Annoying IE6 bug

Question

Read about the z-index issue and tried anything, but just can't seem to fix this.

Please check this in IE6: http://bit.ly/ld54WO

I'd really appreciate any help.

Many thanks

did you try this solution ? http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ — VirtualTroll, May 26 '11 at 17:15
@Woot4Moo Right, but popular websites still do, can't afford to lose even 5% of the customers. :) — eozzy, May 26 '11 at 17:17

score 2 · Accepted Answer · edited May 23 '17 at 11:47

2

The most obvious solution is to simply remove position: relative from your "NOT OK" div.

But, I'm guessing that for whatever reason, that's not an option for you.

So, another fix is to remove position: relative from <header class="cl">.

I've tested this with your actual page using genuine IE6.

For more info, see: div layering problems

edited May 23 '17 at 11:47

Community

1
1

answered May 26 '11 at 17:58

thirtydot

224,678
48
389
349

score 1 · Answer 2 · answered May 26 '11 at 17:32

1

See tab 4 @ http://www.barelyfitz.com/screencast/html-training/css/positioning/

Maybe that will help achieve it for you.

answered May 26 '11 at 17:32

Archit Baweja

973
7
18

oops, yeah realized I was thinking his problem was something else – Archit Baweja May 26 '11 at 18:03

score 0 · Answer 3 · answered May 26 '11 at 18:03

0

Part of the issue might be that you are using HTML5 (from HTML5 Boilerplate, http://html5boilerplate.com/), which is not supported by IE6. My guess is that if you change all your invalid elements (nav, header) to valid XHTML or HTML4, the issue will resolve itself.

answered May 26 '11 at 18:03

MoonKat1216

46
4

This is not relevant to the problem - changing `nav`/`header` to `div` won't make one iota of difference. HTML5 Boilerplate includes Modernizr, which adds support for the HTML5 elements in older versions of IE. – thirtydot May 26 '11 at 18:05
Modernizr helps IE6 recognize those elements, but the browser still doesn't put the expected default styling on them, rendering many of them as inline. – MoonKat1216 May 26 '11 at 18:11
True, but HTML5 Boilerplate's CSS includes `article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } `. – thirtydot May 26 '11 at 18:14
Accurate; that's assuming all the necessary files are being used. I'm merely cautioning to proceed with care using these elements in IE6. Even with boilerplate there are still some complexities. – MoonKat1216 May 26 '11 at 18:26

score 0 · Answer 4 · answered May 26 '11 at 18:59

My solution is minimizing floating & positioning/z-indexing. Question, why do you need to have the red container to be relative?

I took the initiative in a menu with minimal style(no z-index used too):

http://jsfiddle.net/CbNr4/1/

I recommend not making the site look "exactly" the same as for IE6. you will go insane.

Hope this make sense

Annoying IE6 bug

4 Answers4