Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-settings.php on line 530

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-includes/cache.php on line 103

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-includes/theme.php on line 623
blog.gkaindl.com » IE7 float/margin-bottom annoyance

blog.gkaindl.com

nerd nouveau

IE7 float/margin-bottom annoyance

IE7 is not rendering my blog theme correctly

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…

4 Comments

Comments are closed | Comments RSS

  1. Deprecated: Function ereg() is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-content/plugins/google-analyticator/google-analyticator.php on line 445
    wixa! » Blog Archive » IE7 margin-bottom Woes...A product of Jason E. Rist
    wrote on May 31, 2007 at 4:51

    [...] Notice how there is a nice gap between the bottom orange color and the Catalog background orange color? I could probably hack it somehow to work properly, but I’m interested in the provenance of its occurrence. I’ve only found one similar problem via my favorite tool, and that was a very similar problem with floats. [...]


  2. Deprecated: Function ereg() is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-content/plugins/google-analyticator/google-analyticator.php on line 445
    Benjamin Sterling
    wrote on Nov 14, 2007 at 3:35

    Very good find, I personally have never ran into this issue till I built my gallery plugin for jQuery and just could not figure out why there was a gap. Thanks for posting your fix.


  3. Deprecated: Function ereg() is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-content/plugins/google-analyticator/google-analyticator.php on line 445
    Gil
    wrote on Jun 18, 2008 at 13:41

    Did you try putting an empty div with style=”clear:both” on it?


  4. Deprecated: Function ereg() is deprecated in /nfs/c03/h01/mnt/52932/domains/retiredblog.gkaindl.com/html/wordpress/wp-content/plugins/google-analyticator/google-analyticator.php on line 445
    georg
    wrote on Jun 18, 2008 at 23:06

    @Gil: Yes, but it doesn’t change anything. Also, as I’ve said in my original post, semantic markup is important to me, and having an empty div just because of a browser bug goes against this principle.

About

Hi, how are you? My name is Georg Kaindl, and I'm a twenty-something from Vienna, Austria. During the day, I'm a CS student at the Vienna University of Technology, but at night, I turn into an independent software developer for the Macintosh platform, social nerd, lazy entrepreneur and intuitive researcher.

I like to write about everything that matters to considerate technology enthusiasts, but humbly retain the right to go off-topic from time to time.

My posts are licensed under a Creative Commons Attribution 3.0 License.

Contact

You can reach me by email if you have something to say that's not related to a blog post or that you don't want to have publicly available as a comment to a post.

However, you'll have to prove that you are human! Even though I personally like robots very much, I'm less of fan of SPAM. It's just a simple riddle to solve, but a SPAM bot won't cut it!

To get my email address, take the word before the .com in my domain name first (Hint: The word you are looking for starts with a "g" and ends with an "l"). Next, simply attach @mac.com to this word.

Boom, there's my email address. Simple, isn't it?

Powered by WordPress

Comments RSS

Entries RSS