Internet Explorer 7 har nogle mærkelige fejl. En af dem er, hvordan den håndterer z-index. Det kan den slet ikke finde ud af. Hvis du har prøvet at lave en dropdown-menu, har du garanteret stødt på dette problem – Det har jeg i hvert fald.

En hurtig Google søgning fandt en hel masse sider med løsninger på problemet. De fleste af dem involverede jQuery, men jeg blev ved med at søge ,for at finde en mere simpel og bedre løsning.

Og jeg fandt den!

Onlinebrand.dk havde en meget simpel CSS løsning. Løsningen er simpelthen, at give overordnet (Parent) element et højere z-index værdi end elementet selv.

Dette skyldes, at IE7 nulstiller z-index værdien på alle positionerede elementer. Dette fungere selvfølgelig ikke, da hele ideen med z-index, er at man skal kunne positionere sine elementer foran eller bagved hinanden.

Lad os sige du har denne markup:

<ul id="menu">
<li><a href="#">Forside</a></li>
<li><a href="#">Om</a>
  <ul>
    <li><a href="#">Om</a></li>
  </ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>

Så skal du give #menu en højere z-index værdi end #menu li

#menu {
z-index: 10;
}

#menu li {
z-index: 5;
}

Det behøver ikke være 10 og 5, men det er dejlig lette tal.