HTML/CSS - Bugs & Hacks - Listen-Bug
1. Die Abschnitte
- Überblick
- Grundsätzliche Tipps für den IE
- Conditional Comments
- Double Margin Bug
- Three Pixel Text Jog
- Listen Bug
- Duplicate Characters Bug
- Fieldset Bleed Bug
2. Das Problem
3. Der Code
body
{
font-family: Verdana, Arial, Helvetice, sans-serif;
margin: 0px;
padding: 0px;
font-size: 0.8em;
}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
li
{
margin: 0px;
padding: 0px;
}
div.navi
{
width: 150px;
}
a
{
text-decoration: none;
}
div.navi li a
{
display: block;
background-color: #868686;
margin-top: 2px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 0.85em;
padding: 2px 0px 3px 10px;
}
div.navi li a:hover
{
background-color: #000;
}
<div class="navi">
<ul>
<li><a href="#">Hola hi hü</a></li>
<li><a href="#">Hi hüdeldö</a></li>
<li><a href="#">Diridiri</a></li>
<li><a href="#">Dudel dö</a></li>
</ul>
</div>
4. Die Bugs
Eigentlich handelt es sich hier nicht um den Listen-Bug, sondern nur um zwei von Vielen. Leider ist da unser Lieblingsbrowser ziemlich eigenwillig. Es gibt aber ein paar Masterlösungen, eine davon zeige ich jetzt.
Bug Nummer 1
Der RollOver-Effekt tritt nur dann ein, wenn man mit der Maus über den Text fährt.
Bug Nummer 2
Der bereits erwähnte vertikale Abstand.
5. Die Lösungen
Um den RollOver-Effekt auf den gesamten Bereich auszudehnen, muss eine Breitenangabe gemacht werden:
* html div.navi li a
{
width: 150px;
}
Um den übergroßen vertikalen Abstand zu korrigieren, reicht ein
* html div.navi li
{
display: inline;
}
6. Tipp
Die CSS-Anweisung display:inline; bewirkt beim Internet Explorer 6/7 sehr oft wahre Wunder. Also wenn ihr ein wie
auch immer geartetes Problem habt, probiert es einfach mal aus.