Float:Right Nuke for IE6


This post was originally published in 2010
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

Lately I’ve been spending a lot of time debugging browser issues in our site ( ECPod – Blog to a Wider Audience ). I’m not going to kid with you here: it isn’t fun. On the scale of hate, 10 being most hated, my browser table would be something like this:

IE 8 – 4 ( It’s actually not too bad, even has so-so dev tools )
IE 7 – 6 ( Bad but not godawful )
IE 6 – One million

IE 6 is so bad it’s not funny. OK so it is funny, just not when you’re the one tasked with forcing it to render a site in a way that doesn’t make me want to vomit correctly.

The point of this particular rant against IE 6 is float:right and stepdown.

WTF is that, you ask? It’s when, instead of floating an element to the horizontal right of it’s siblings, IE 6 will float it right then push it down so that its topmost edge is flush with the bottommost edge of its tallest sibling. Fail!

Below is what I like to call the float:right nuke. Like a nuke, you should only use it in two situations:

  1. you don’t have the time or patience to work out a better solution for your particular issue
  2. nothing else has worked.

Behold, the IE 6 float:right nuke:

	position:relative; /* prevent #offendingElement from shooting to the top-right */
	float:none; /* override any non-ie specific css */

Use with caution, and don’t forget your radiation pills.

No comments | Trackback