[EMAIL PROTECTED] wrote:
> Hi,
>
> I am pretty new to CSS. This file is fine with IE but when view through
> Firefox it does not display correctly. Any help would be greatly
> appreciated!
>
> http://www.ccclib.org/programs/srl_dsl.html
> http://www.ccclib.org/Style/programs.css
>
>
> Thanks
> Stacie
Hi Stacie,
Firefox is implementing the css correctly here while IE is getting
things wrong as Mr Goodchild pointed out. It can make life easier to get
a page looking good in firefox first and then tweak it for IE if necessary.
I've had a look at the css in the Firefox EditCss plugin and this
should fix the problem:
.imageleft {
float: left;
width: 150px;
padding: 20px;
}
.imageright {
float: right;
width: 150px;
padding: 20px; /* padding plus width (150 + 20 + 20) equals 190px */
}
.bodyright {
margin-left: 190px; /* margin-left to keep the text from wrapping
around the floated image */
text-align: left;
padding: 8px;
}
.bodyleft {
margin-right: 190px; /* same as above but moves the text to the right
of the image */
text-align: right;
padding: 8px;
}
You should use an #id only once in an html document. If styles need
to be applied more than once use a class name e.g. in this case i have
changed #bodyleft to .bodyleft and so on (the html will need to be
altered accordingly).
The best way to get to grips with floats and how to use them is to
experiment or look for tutorials like this one:
http://css.maxdesign.com.au/floatutorial/
Good luck,
Rob
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
