As most CSS gimps know, IE (Internet Explorer) is a bit wacko when it comes to standards.

Take today for example, I needed to create a multi-level CSS drop down menu, which I have done many a time before, including on my own site www.cj-design.com, but with this one, the first level of navigation would not be fixed width.

The code looked something like this:

#nav ul li
{
float:left;
width:150px;
}
#nav ul ul li
{
float:left;
width:160px;
}

But as I said, I needed the first level of navigation to fit the text inside, so I did this:

#nav ul li
{
float:left;
whitespace:nowrap;
}

Firefox = Fine
Opera = Fine
IE = Arghh, what are you doing? - I need some reassurance here!

The fix for IE is as follows:

#nav ul li
{
float:left;
whitespace:nowrap;
width:1%;
}

width 1%, how stupid is that? And of course, this breaks Firefox and Opera doesn’t it. The final code ended up using the star hack to hide IE-only CSS…

#nav ul li
{
float:left;
whitespace:nowrap;
}
*html #nav ul li
{
width:1%;
}

I hope Microsoft do a good job with IE7 because this really annoyed me and it’s a waste of time trying to find a solution. Not even position:relative; or height:1%; could fix this one*. Stu agreed that this was a cool fix, therefore I blog.

*usually the following CSS can usually fix IE6 CSS bugs:

position:relative;
or
height:1%;