Uttrycka det

Om du någonsin har gjort (eller gör en) en vertikal meny med listobjekt (Li) taggar och CSS, kan du stöta på detta ännu en bugg i Internet Explorer, där IE 6 inlägg dessa luckor mellan listobjekt som innehåller element blocknivå, dvs om det finns något blanktecken mellan listobjekten i markeringen. Tack, men nej tack, verkar IE version 7 fri från detta fel.
Om som jag, och många fler, du tillhör denna skara frustrerade utvecklare som fortfarande måste få sina nya layouter, som arbetar i IE6, då detta kan vara till nytta. Ta en titt ...

Exempel på kod:

<ul id="menu">
<li> <a href="#"> Hem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Tjänster </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Vanliga frågor </ a> </ li>
<li> <a href="#"> Kontakta oss </ a> </ li>
</ Ul>

Du kan skapa viss CSS, liknande en nedan, för att transfrom ovanstående markeringar i en vertikal meny ....

Provet CSS ...
# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900;
list-style-type: none; width: 150px;
}
# Menyn li {margin: 0; padding: 0;}
# Menyn en {display: block;
color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Resultatet ser du ...

Lösning för denna bugg ... (modifierad / till CSS i fet stil)

# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900; list-style-type: none; width: 150px;
float: left; / * Denna innehåller flottades listobjekt * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Detta fixar * /
width: 100%, / * whitespace buggen i IE6 * /
}
# Menyn en {
display: block; color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Om ovanstående lösning doesnot verkar fungera (av skäl som är kända för att IE6 endast) ... prova denna metod i stället

Lägg bara till den kompletterande IE6 endast stilar till din markup ...

<- [Om lt IE 7>
<style type="text/css">
# Menyn li a {display: inline-block;}
# Menyn li a {display: block;}
</ Style>
<[Endif] ->