Share This Article:

Subscribe to Kavoir:

As we all know that with a style rule of width or height, an element gains hasLayout in Internet Explorer and it triggers the IE proprietary rendering algorithm. Though this trick solves many weird problems in IE, especially IE6, it does come with a few issues as well.

For example, when you need a top menu which is basically a horizontal list with <ul>, so you have HTML

<ul id="menu">
	<li><a href="#">item 1</a></li>
	<li><a href="#">item 2</a></li>
	<li><a href="#">item 3</a></li>
</ul>

With the CSS:

#menu {
	height:1%;  // IE6 hack to make #menu stretch as far as the floated children go.
	overflow:hidden; // FF and non-IE hack to fulfill the same task as above.
}
#menu li {
	float:left; // display:inline is another approach for a horizontal list but as all the elements are inline, it's not easy to add more visual appealing to it.
}
#menu li a {
	display:block;
	height:28px;
}

It works well in all other browsers except one, that is IE6. In IE6 all the links are displayed with 100% width and don’t float at all. When you get rid of either of display:block or height:28px, or both, it’s all right but if you need to fit a background image that has a height of 28px to be the hover effect of the links?

To get around this, you’ll have to add float:left to #menu li a, that is the links, therefore you must have:

#menu {
	height:1%;
	overflow:hidden;
}
#menu li {
	float:left;
}
#menu li a {
	display:block;
	height:28px;
	float:left; // newly introduced to get around this problem
}

You may ask, now that you have floated a, what’s the point of floating li and why don’t you just get rid of it as the links are already floated. But the answer is no, you can’t. Try erasing it and refresh the page in IE6, the floated links will be stacked together like a ladder.

For a horizontal list with floated item links that are display:block with heights, this is probably the only way to do it in IE6. Or is it?

Share This Article:

Subscribe to Kavoir:

You should also read:

• Extended CSS Sprites for Foreground Images <img>
• HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced
• Styling an Alphabet of 26 Letters in HTML and CSS
• 3 column layout, left and right fixed width, center fluid
• CSS: Complementary Background in Float