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%;
