✔ z-index | nur im IE falsch

[Sebigf]

Hallo zusammen !

Ich habe hier ein Layout, welches eine JS Navigation hat, die sich aufklappt wenn man drüber geht mit mouseover.

Nur ist es so, dass sich das augeklappte "DIV" nicht über den Contentbereich legt, sondern drunter bleibt.

Hier ist einmal der HTML Code:

.middle        { width:750px; position:relative; left:50%; margin-left:-375px; }
.navbar        { width:100%; height:29px; background-color:#AB132C; border-bottom:solid 1px #000000; }
.greybar    { width:100%; height:2px; background-color:#D1D1D1; padding:0; margin:0; }
.content    { background-color:#FFFFFF; z-index:1; position:relative; border-left:solid 1px #E4E4E4; border-bottom:solid 1px #E4E4E4; border-right:solid 1px #E4E4E4;  }
.subnav        { display:none; z-index:4; position:absolute;  background-color:#AB132C; border-left:solid 1px #000000; }

HTML:

<div class="navbar"> 
<div class="middle right">

<div class="fr">

<div class="fl ov">
<div class="nav_item" onmouseover='show_nav(1);' onmouseout='hide_nav(1);'><img border="0" src="images/navigation/navigation_normal_01.gif" alt="Aktuelles" /></div>
<div class="subnav left cb white" onmouseover='show_nav(1);' onmouseout='hide_nav(1);' id="1"><div class="padding left">huhuhuhu<br />hjghjg jh<br />i jhg </div></div>
</div>

</div>

</div>
</div>


<div class="greybar"></div>
<div class="middle content"><div class="padding">INHALT</div></div>

 

[Maik]

Wende mal die "höhere" Schichtpositionierung auf die Klasse .navbar an.

 

[Sebigf]

Du bist der Beste Es hat geklappt. Ich dachte ich hätte das bereits probiert, aber dem war wohl nicht so ^^.

Hast du noch eine Ahnung, warum .greybar im IE höher angezeigt wird als im FF ?

Im FF ist es 6px hoch, im IE ca. 8-10px...

Danke !

 

[Maik]

Der IE "reserviert" für das Element eine gewissse Schriftgröße, die höher als 2 Pixel ist.

.greybar {
width:100%;
height:2px;
background-color:#D1D1D1;
padding:0;
margin:0;
font-size:0;
}

 

[Sebigf]

Mmh, habe ich bisher nie gebraucht Danke