✔ Grafische Navigation mit Hover - IE Problem

RageNo1

RageNo1

Erfahrenes Mitglied
Hallo,
ich arbeite gerade an einer Navigation die auf Grafiken basiert und einen Hover beinhalten soll.

Hier mal der Komplette Code:
Code: 
<html>
<head>

<style type="text/css"> 

.n1 { background-image:url(images/startseite-low.jpg); float:left; width:80px; height:34px; }
.n1:hover { background-image:url(images/startseite-high.jpg); float:left; width:80px; height:34px; }

.n2 { background-image:url(images/ecoline-low.jpg); float:left; width:70px; height:34px; }
.n2:hover { background-image:url(images/ecoline-high.jpg); float:left; width:70px; height:34px; }

.n3 { background-image:url(images/waermepumpe-low.jpg); float:left; width:107px; height:34px; }
.n3:hover { background-image:url(images/waermepumpe-high.jpg); float:left; width:107px; height:34px; }

.n4 { background-image:url(images/technischedaten-low.jpg); float:left; width:126px; height:34px; }
.n4:hover { background-image:url(images/technischedaten-high.jpg); float:left; width:126px; height:34px; }

.n5 { background-image:url(images/anlagenaufbau-low.jpg); float:left; width:109px; height:34px; }
.n5:hover { background-image:url(images/anlagenaufbau-high.jpg); float:left; width:109px; height:34px; }

.n6 { background-image:url(images/kontakt-low.jpg); float:left; width:63px; height:34px; }
.n6:hover { background-image:url(images/kontakt-high.jpg); float:left; width:63px; height:34px; }

.n7 { background-image:url(images/impressum-low.jpg); float:left; width:85px; height:34px; }
.n7:hover { background-image:url(images/impressum-high.jpg); float:left; width:85px; height:34px; }

</style>


</head>
<body>
<div style="width:640px;">
<a href="/"><img src="images/spacer.gif" border="0" class="n1"></a>
<a href="ecoline"><img src="images/spacer.gif" border="0" class="n2"></a>
<a href="waermepumpe"><img src="images/spacer.gif" border="0" class="n3"></a>
<a href="technische-daten"><img src="images/spacer.gif" border="0" class="n4"></a>
<a href="anlagenaufbau"><img src="images/spacer.gif" border="0" class="n5"></a>
<a href="kontakt.php"><img src="images/spacer.gif" border="0" class="n6"></a>
<a href="impressum"><img src="images/spacer.gif" border="0" class="n7"></a>

</div>
</body>
</html>

Im FF und Safari wird alles korrekt dargestellt.
Im IE6 sind die Buttons nicht aneinanderliegend sondern liegen ca. 10 Pixel weit auseinander. Auch funktioniert hier der Hover-Effekt nicht.

Ich hoffe das mir jemand den entscheidenen Tip geben kann um die Navigation auch im IE6 richtig darstellen zu lassen.

Gruß Ragey
 
Hi,

  1. Übergib den Browsern das HTML-Dokument mit der entsprechenden Doctype-Deklaration im standardkonformen Modus, und die vom IE6 produzierten Abstände fallen in sich zusammen. Siehe hierzu den Artikel Der »DOCTYPE-Switch« und seine Auswirkungen.

  2. Der IE6 unterstützt die :hover-Pseudoklasse ausschließlich für den <a>-Tag, du wendest sie aber auf <img> an.

Und noch ein Tipp. Solch eine Zeile:
CSS: 
.n1 { background-image:url(images/startseite-low.jpg); float:left; width:80px; height:34px; }
.n1:hover { background-image:url(images/startseite-high.jpg); float:left; width:80px; height:34px; }
lässt sich kürzen:
CSS: 
.n1 { background-image:url(images/startseite-low.jpg); float:left; width:80px; height:34px; }
.n1:hover { background-image:url(images/startseite-high.jpg); }

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

Neue Beiträge

Zurück