blog.gkaindl.com

IE7 float/margin-bottom annoyance

When I was toying around with browsershots.org yesterday, I noticed that my custom blog theme did apparently not render correctly in IE7 (click the image for a larger version. Also note the fugly text-rendering in IE7!). I have to admit that I haven’t bothered to test the layout in IE7 so far: While I’ve specifically added some work-arounds for IE5.5 and IE6, I’ve bought Microsoft’s assertions that IE7 would do away with the quirkiness and be a lot more standards-compliant. As my theme isn’t particularly complex, I thought IE7 would render it just fine, much like Safari and Firefox.

Obviously, you can never trust Microsoft. As you can see in the side-by-side comparison, IE7 does not render the space between my horizontal navigation list and the main content area. After a lot of googling, I only found this blog post addressing my specific issue: IE7 has a CSS bug where the bottom margin (margin-bottom in terms of CSS, or the third value in the margin: x x x x shortened form) is not rendered at all for floating box elements (CSS: float: left/right) even though it clearly should be. Firefox, Opera and Safari render such margins fine, and so do IE5.5 and IE6. This bug has been newly introduced in IE7. Yikes!

Unfortunately, the work-around suggested in the blog post is out of the question for me: I do not want to introduce a wrapper-box to the XHTML markup that has no semantic meaning at all other than being a tool to work around this particular browser bug: Layouts should be purely done in CSS, XHTML is all about content semantics. That’s my personal stance on web design. Granted, sometimes it is necessary to introduce a wrapper element to achieve a particular effect, but I definitely do not want to taint my markup just because IE7 has a nasty bug.

Fortunately, some playing around made me find another, CSS-only work-around (for my particular problem): Since my main content area contains no block elements, but only floating “posts” and “sidebar” sections, and the navigation section only contains floating elements as well, I could fix the problem by adding the same space a navigation element has as margin-bottom to the main content container as margin-top: Since both containers are “empty”, a standards-compliant browser would allow the two margins to overlap, creating no additional visible spacing, whereas IE7 would (while still neglecting the margin-bottom property of the navigation elements) at least render the margin-top space of the content container. Consequently, IE7’s output now looks exactly like what the truly standards-compliant browsers produce. No CSS hacks or IE conditionals needed. Neat!

Of course, this was almost too easy: It turns out that IE5.5 and IE6 do not overlap the two margins as standards-compliant browsers should, but render them both one of the other. This makes the spacing between the navigation bar and the content area appear to be twice as tall as the spacing between the header and navigation bar in these browsers. Fortunately, targeting IE versions < 7 is easy, since these versions do not implement CSS child selectors. You can read about the technique that exploits this fact on 24ways.org (scroll to the “Using child selectors” part). The great thing about this trick is that it isn’t really a hack, but produces valid CSS, while still accurately targeting only those buggy Microsoft browsers.

By employing these changes in my CSS code, my blog theme renders fine now in IE5.5, IE6 and IE7 as well as Firefox, Safari and Opera. The page still validates as XHTML 1.0 Strict, and the CSS code is valid CSS 2.1. No hacks, conditionals or extraneous XHTML markup involved!

Hopefully, I won’t have to go through such hassles again when IE8 comes out…