✔ Pseudoklasse :hover mit floating <li> Elementen

N

ne0hype

Erfahrenes Mitglied
Hallo Leute,

hab ein komisches Problem und weiß kein Rat ;)

Meine HTML-Datei sieht folgendermaßen aus:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
#nav li {
	float: left;
}
#nav a:hover {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #330066;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
  <li> <a href="">test</a></li>
</ul>
</div>
</body>
</html>

Wie ihr seht, seht ihr nichts :)... also im Internet Explorer. Im Firefox erscheint beim hovern ein Border. Wenn ihr nun das "floating" entfernt, oh Wunder der Internet Explorer stellt den Border nun auch dar.

Wieso, weshalb, warum?

Danke für eure Hilfe....

// EDIT

Folgende Lösung ergibt sich:

Das Listenelement muss mit einem "display: inline" gefloatet werden.
 
Hi,

das muß es grundsätzlich, und speziell auf deinen vorgestellten Fall bezogen, überhaupt nicht zwingend oder zwangsläufig.

Code: 
#nav li {
	float: left;
}
#nav a {
        display: block;
}
#nav a:hover {
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #330066;
}
... führt nämlich zum selben erwünschten Resultat :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück