CSS Z-index un IE6,7

Problēma veca tik pat cik IE6 un IE7, bet lai vai kā, labojot cita veidoto kodu, uzkāpu uz šī grābekļa. Skatījos un brīnījos, kamēr sapratu, kas tas ir IE bugs.

CSS:

#bg_1 {
position: relative;
width: 100px; height: 100px;
background: blue;
}

#bg_2 {
position: relative;
width: 100px; height: 100px;
background: green;
}

#front_1 {
position: absolute;
width: 100px; height: 100px; left: 50px; top: 50px;
background: red;
}

HTML:

<div id="bg_1">
<div id="front_1"> Some text </div>
</div>
<div id="bg_2"></div>

IE6	FF 3.6

IE 6,7 BUGS

CSS:

#bg_1 {
position: relative;
width: 100px; height: 100px;
background: blue;
}

#bg_2 {
position: relative;
width: 100px; height: 100px;
background: green;
}

#front_1 {
position: absolute;
z-index: 9;
width: 100px; height: 100px; left: 50px; top: 50px;
background: red;
}

IE6	FF 3.6

Risinājums

CSS:

#bg_1 {
position: relative;
width: 100px; height: 100px;
background: blue;
z-index: 9;
}

#bg_2 {
position: relative;
width: 100px; height: 100px;
background: green;
}

#front_1 {
position: absolute;
z-index: 9;
width: 100px; height: 100px; left: 50px; top: 50px;
background: red;
}

IE6	FF 3.6

 
[1] IE z-index bug - http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html