Unvollständiger Hover-Bereich diverser Links in einer Liste
Ashura
- html
Hallo.
Da ich schon ziemlich am verzweifeln bin, und ich absolut, _wirklich_ absolut keine Ahnung habe, welche Schlüsselbegriffe mir im Archiv oder bei Google helfen können, mein Problem zu beseitigen, bitte ich nun euch um Hilfe.
Ich habe eine einfache Navigation mittels <ul> Liste erstellt. In den Geckos und Opera sieht es erwartungsgemäß gut aus.
Doch, wie könnte es anders sein, tut sich der IE mächtig schwer mit einigen Eigenschaften.
Hier der zuständige Code:
<ul>
<li><a class="nav" href="#">Dummy1</a></li>
<li><a class="nav" href="#">Dummy2</a></li>
<li><a class="nav" href="#">......</a></li>
</ul>
Das normale Stylesheet:
li{list-style:none;margin-bottom:2%;}
li>a:link, li>a:visited{padding:2% 10% 2% 15%;border:1px solid #999;background-color:#000;display:block;}
li>a:hover{color:#fff;background-color:#333;border:1px solid #ccc;}
li>a:active{color:#000;background-color:#fff;}
Hier das spezielle IE-CSS:
li{margin-bottom:-1em;}
a.nav:link, a.nav:visited{padding:0.3em 0.2em 0.3em 2em;border:1px solid #999;background-color:#000;display:block;}
a.nav:hover{color:#fff;background-color:#333;border:1px solid #ccc;}
a.nav:active{color:#000;background-color:#fff;}
Das Problem liegt hierbei in der "Erfassungsfläche" der Elemente. Alle modernen Browser "verlinken" den gesamten <a> Block, also unabhängig, ob man wirklich über das Wort oder einen Freiraum im Block "hovert".
Im IE jedoch sind wirklich nur die Wörter verlinkt, der Block scheint nur als Zierde da zu sein.
Das Kuriose: Der erste Link wird korrekt "gehovert"...
Ich würde mich freuen, wenn ihr mir zumindest einen Tipp geben könntet, wonach ich suchen muss.
Gruß, Ashura
Hi,
a.nav:link, a.nav:visited{padding:0.3em 0.2em 0.3em 2em;border:1px solid #999;background-color:#000;display:block;}
width:100%
IE braucht das manchmal, obwohl sich das aus display:block eigentlich schon ergeben sollte.
cu,
Andreas
Hallo.
IE braucht das manchmal, obwohl sich das aus display:block eigentlich schon ergeben sollte.
Ich musste zwar den margin-bottom für <li> wieder auf einen positiven Wert ändern, und ein wenig mit dem padding herumexperimentieren, aber nun reagiert der IE korrekt.
Vielen Dank! :)
Gruß, Ashura