Elements with display:block and height gains 100% width and don’t float in IE6

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?

7 thoughts on “Elements with display:block and height gains 100% width and don’t float in IE6”

  1. There is another way to get around it: You can set “line-height: 28px” instead of “height: 28px”. That’s also a good solution for several layouts where centered text is needed.

    Thanks for your post!

  2. Thanks so much for this – I added the float to the menu a, and now it looks perfect in IE6.

    Gracias!

Comments are closed.

Scroll to Top