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

By: Matt Stow

Matt Stow — Tue, 19 Dec 2006 22:03:15 +0000

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: Aleksandar

Aleksandar — Tue, 12 Dec 2006 07:39:25 +0000

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

By: Fanny

Fanny — Mon, 11 Dec 2006 23:19:57 +0000

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: Aleksandar

Aleksandar — Sun, 12 Nov 2006 11:49:38 +0000

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: Josh

Josh — Sun, 12 Nov 2006 06:57:07 +0000

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

By: Aleksandar

Aleksandar — Fri, 03 Nov 2006 15:33:38 +0000

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: Sophie Dennis

Sophie Dennis — Fri, 03 Nov 2006 13:51:38 +0000

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 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 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: Mark Hutton

Mark Hutton — Mon, 30 Oct 2006 07:20:29 +0000

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

By: Matt Harris

Matt Harris — Fri, 27 Oct 2006 23:19:30 +0000

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.