z-index internet explorer 6

[Gast170816]

Ich habe das eigentlich schon x-mal diskutierte Z-Index-Problem im Internet Explorer (6).

Ich hab schon ganz viele ergoogelte Lösungen probiert, natürlich hab ich auch schon ausdrücklich "#teaser" nach HINTEN und "# header h2" nach vorn gesetzt...trotzdem bleibt die h2-Überschrift verdeckt (durch ein Bild in #teaser)

Der Code:

<div id="header">
    <h1><a href="http://www.blabla.de/">Hauptüberschrift ist da</a></h1>  
    <div id="teaser">  
           <img src="http://www.blabla.de/teaser.jpg" alt="web design" id="featuredImage" />
        
    </div><!--teaser-->
    <h2>Überschrift Zwei ist leider verdeckt</h2> 
    <div id="navigation">

      <ul class="categories">
        <li>Blabla</li>
        <li>Blabla</li>
        <li>Blabla</li>
      </ul>
      <ul class="main-nav">
         <li>Blabla</li>
         <li>Blabla</li>
         <li>Blabla</li>
      </ul>
    </div><!--navigation-->
 </div><!--header-->

Der CSS-Code:

#header {
overflow: hidden;
height: 255px;
width: 1024px;
position: relative;
color: #fff;
padding-top: 18px;
}

#header h1 {
margin: 0px;
padding: 0px;
}

#header h1 a {
position: absolute;
background: url(../img/logo.png) no-repeat left top;
top: 0px;
left: 10px;
width: 205px;
height: 104px;
text-indent: -999px;
z-index: 4; 
}

#teaser {
float: left;
width: 570px;
height: 255px;
}

#header h2 {
font-family: 'Myriad Pro', Arial, sans-serif;
font-size: 0.8em;
font-weight: normal;
text-align: center;
letter-spacing: 0.4em;
line-height: 27px;
color: #fff;
position: absolute;
left: 0px;
bottom: 7px;
background-color: #c617ca;
width: 570px;
z-index: 4;
}

#navigation {
background: url(../img/header.jpg) no-repeat left 4px;
float: right;
width: 454px;
height: 255px;
}

Interessant ist, als ich "#teaser: margin-left: 1px" gemacht habe ist diese zweite Überschrift sofort komplett da. Dafür verschwindet aber meine Navigation, die rechts neben dem Teaserbildchen und seiner Überschrift angeordnet ist...und das dann noch zurecht rücken, hat auch nicht funktioniert, da reagiert einfach erst recht nix mehr wie es soll...deshalb denke ich, dass "margin-left:1px;" eigentlich auch nicht der richtige Weg ist.

 

[SpiceLab]

Wenn ich die korrekte Interpretation von FF heranziehe, komme ich zu diesem Markup:

 <div id="header">
    <h1><a href="http://www.blabla.de/">Hauptüberschrift ist da</a></h1>  
    <div id="teaser">  
           <img src="http://www.blabla.de/teaser.jpg" alt="web design" id="featuredImage" />
    </div><!--teaser-->  
    <div id="navigation">
      <ul class="categories">
        <li>Blabla</li>
        <li>Blabla</li>
        <li>Blabla</li>
      </ul>
      <ul class="main-nav">
         <li>Blabla</li>
         <li>Blabla</li>
         <li>Blabla</li>
      </ul>
    </div><!--navigation-->
    <h2>Überschrift Zwei ist leider verdeckt</h2> 
 </div><!--header-->

mit der Regelergänzung clear:both für den Selektor #header h2 - und siehe da, Überschrift Zwei wird im IE6 überhaupt nicht verdeckt.

 

[Gast170816]

Toll, ja das funktioniert, danke! Also mit "clear" wär ich nie drauf gekommen.

Jetzt hab ich auch noch die #header h2 ganz zum Schluss, denn sonst war dann "#navigation" plötzlich komplett weggewesen (vermutlich weils ja auch gefloatet war).