IE7 bug 1: nested list (abs. positioned) is overrun by preceding link’s background colour

I have encountered one ugly bug in IE7 rendering engine, which you could see in the last week at the main navigation of this site (at the top). It manifests when hovering items that has submenus, in which case nested list of items appears, like this:

However, in IE7 you would’ve seen this:

I had no idea what caused this, even asked in IE’s web dev forum without any answers received. Then, last night, while working on new version of this two-level navigation, I realized that it works, with bare styling. After an hour or so spent dissecting the CSS rules one by one, I found the culprit.
I have used the following rule to style the curently hovered main item:

PLAIN TEXT

CSS:



ul.navig li:hover a {


	color: #000;


	background-color: #ff4500;


}

The problem is the background-color rule. As soon as you remove it, sub-items re-appear. I have changed the style into this, which does not trigger the bug:

PLAIN TEXT

CSS:



ul.navig li:hover {


	background-color: #ff4500;


}


ul.navig li:hover a {


	color: #000;


}

Take a look at the example page which illustrates the problem. This is the nastiest IE7 bug I have encountered so far.

Apart form this, IE7 did not bring much problems. It is a very good release where most of the IE6 bugs are resolved. Some have remained though, like z-index problems. The lack of support for the :after pseudo-selector requires you to use zoom:1 in all places where you have used height:1% previously — in the IE7 only styles hidden by cond. comments (there are other solutions as well).
One another bug have remained too, again with this type of navigation, which I will demonstrate in another post.

Tags or categories or topics...

Lots of ramblings on this blog...might be easier for you to find your juice through these tags:

Voices from the crowd, 10 so far

Wow, that looks like a nasty bug. Thanks for the writeup. I’ll add this one to the list of bugs to remember.

by matthijs
14 hours, 57 minutes after the post

This is a wonderful post! Thanks for sharing.

I’ve been putting off troubleshooting this issue on a couple of sites that I have developed. You just saved me four or five hours of frustration.

by Matt Harris
1 day, 7 hours after the post

Superb, thanks… I’ve experienced this exact bug with nested lists used as navigation too

by Mark Hutton
3 days, 15 hours after the post

This is really interesting, because I’ve been finding similar “disappearing content” bugs, always ultimately triggered by a background color or image.

There’s a fuller (but still rough) write-up at http://www.cayenne.co.uk/ie7/disappearing-content.html. In all cases the presence of either “background-color” or “background-image” on a parent or ancestor is the culprit. Looks like this is another example of this more generic bug, which is reassuring, cos it means I’m not just going mad!.

The basic, generic fix is to ensure the parent/ancestor with the background “hasLayout” (or any ancester of the missing content which is also a descendent of the element with the background — sorry, I haven’t found a clearer way to say that yet. See the link above for examples). So moving the background to the element fixes the problem because the “hasLayout” (from the float:left property). If the <a> is given layout this would also fix the problem. This might be useful if for any reason your design doesn’t allow you to apply the background color/image to the . In IE 7 you can trigger layout with min-height: 1% or min-width: 1%, neither of which should normally affect your layout at all.

Ultimately we’re looking at a fun new instance of the basic IE peekaboo bug. What fun!

by Sophie Dennis
1 week after the post

Thanks for sharing the experience and your findings Sophie. It seems that all things in IE work fine if you trigger hasLayout. Maybe putting * {min-height:0} at the start of each CSS would be good practice. ;)

by Aleksandar
1 week, 1 day after the post

Just checked the example with the official IE7 release, and I believe the bug is now fixed…

by Josh
2 weeks, 2 days after the post

Josh, I have final IE7, downloaded one day after it was released and the bug is spotted in it. Are you sure it is fixed? Did you maybe download recently — maybe Microsoft posted a newer file although I think it’s highly unlikely that they do that.

by Aleksandar
2 weeks, 2 days after the post

Eventually, the nested list language used for IE 7 does not work in IE 6.
The website I put is the screen capture from my IE 6.
No hover effects shown on the nested list.

by Fanny
1 month, 2 weeks after the post

Fanny, that is expected, as IE6 is not supporting li:hover. It’s an illustration of the IE7 bug, which does support it.

by Aleksandar
1 month, 2 weeks after the post

Hi Aleksander

Thanks for finding and documenting this. I wasted hours trying to fix my “popup” navigation in IE 7 yesterday. I thought it was due to my javascript which repositions the menus on screen (should they appear off), and can’t believe it was something this stupid! Thanks IE!

Cheers

Matt

by Matt Stow
1 month, 3 weeks after the post

IE7 bug 1: nested list (abs. positioned) is overrun by preceding link’s background colour

Voices from the crowd, 10 so far

Post your opinion

Related posts (possibly)

IE7 bug 2: not defaulting left on abs. positioned elements to 0">IE7 bug 2: not defaulting left on abs. positioned elements to 0

IE7 bug: will not render z-index change on li:hover">IE7 bug: will not render z-index change on li:hover

Two-level navigation

IE7 float clearing">IE7 float clearing

1.5. Theme update.">Upgrade to 1.5. Theme update.

IE/Win!">Child selectors and more…in IE/Win!

Tags or categories or topics...