CSS troubles.

2 minutes read

Jon Udell found  (and Stefan Tilkov did too) that my new design doesn’t (didn’t) work in Mozilla Firebird.

The issues were inconsistencies in the behavior of the "float" and "clear" CSS properties between Opera, IE and Mozilla and, on top of it all, the rustiness of my CSS skills. All the "side-bar" elements on the left side of the page (calendar, navigator links, category list and blogroll) were "width:220px", "float:left" and "clear:both", saying "show this thing on the left hand side of any content that is rendered with regular layout and put the box under all other left floating boxes". So that causes all of these boxes to come out vertically aligned.

Now, the content section was also "float:left" but with "clear:right" and "width:70%". Opera and IE were showing the content as I intended it, to the right of the side-bar. As per the words of the spec, that indeed seems to be proper behavior for "clear:right", because it says that "The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document."  In other words, since all other elements rendered before this element were "float:left" and there isn't any "float:right" up to this point, the top margin for the new float is should be at relative/top:0px. Opera and IE are right, Mozilla is wrong.

Now... I fixed this for all by simply removing the float/clear properties from the content box and not making the content floating anymore. ... and tripped over another problem: widths.

I set the content box's size to 78%. In IE, that turned out to be 78% of the available horizontal <body> space excluding the width of the already rendered side-bar boxes (now all set to 18% width). In Mozilla and Opera, that's simply 78% of the available horizontal <body> space (in effect, the available page width). So, 78% of 82% of the page width are roughly 64% (63.96%). Measuring pixels of what IE renders and taking the margins of the item boxes into account, I indeed got 64.3% for the content boxes. In Opera, measuring pixels yielded 78.6% of the page width and Mozilla came in at 78.1%.

Since I couldn’t find anything supporting IE's behavior reading the spec section on the width property and the definition of the containing block, I concluded Mozilla and Opera are doing this right and IE is doing it wrong. This was a bit surprising to me, because (a) I don't do web design for a living and would know otherwise and (b) because IE actually needs to perform extra work to get to these numbers, so that behavior is surely no accident.

Switching IE into “standards-compliant mode” by injecting <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> ultimately fixed the width calculation problem, but who would know that intuitively?

This left the problem that Mozilla doesn’t get the clear property right. So, I settled on an absolute horizontal positioning for the content box using “position:absolute;left:22%;width:73%” . Now with that, the footer (yet another <div> at the <body> level) was getting confused, because now I had only floating and absolutely positioned elements and therefore I wouldn’t know where the bottom is. Moving the footer into the content box below the content placeholder fixed that, too. Now it looks good for Mozilla and Opera and IE6.0. If you use an earlier version of IE, upgrade.

Updated:

Leave a Comment