CSS-Navileiste und Firefox

Status
Nicht offen für weitere Antworten.
P

psx

Grünschnabel
Hallo!

Vielleicht könnt ihr mir bei meinem Problem weiterhelfen. Ich brauche eine horizontale Navigationsleiste mit Hovereffekt die auf CSS basiert. Folgenden Quellcode habe ich dazu erstellt:

HTML: 
<html>
<head>
<style type="text/css">
<!--

a#btn1,a#btn2,a#btn3,a#btn4,a#btn5,a#btn6,a#btn7,a#btn8,a#btn9,a#btn10 {height:50px}

a#btn1 {background:url(1.jpg);width:71px}
a#btn1:hover { background:url(1h.jpg)}

a#btn2:link {background:url(2.jpg);width:60px}
a:hover#btn2 { background:url(2h.jpg)}

a#btn3 {background:url(3.jpg);width:84px}
a:hover#btn3 { background:url(3h.jpg)}

a#btn4 {background:url(4.jpg);width:73px}
a:hover#btn4 { background:url(4h.jpg)}

a#btn5 {background:url(5.jpg);width:118px}
a:hover#btn5 { background:url(5h.jpg)}

a#btn6 {background:url(6.jpg);width:128px}
a:hover#btn6 { background:url(6h.jpg)}

a#btn7 {background:url(7.jpg);width:61px}
a:hover#btn7 { background:url(7h.jpg)}

a#btn8 {background:url(8.jpg);width:48px}
a:hover#btn8 { background:url(8h.jpg)}

a#btn9 {background:url(9.jpg);width:63px}
a:hover#btn9 { background:url(9h.jpg)}

a#btn10 {background:url(10.jpg);width:94px}
a:hover#btn10 { background:url(10h.jpg)}


img {border:0px;}

//-->
</style>
</head>

<body>

<a href="#" id="btn1"></a>
<a href="#" id="btn2"></a>
<a href="#" id="btn3"></a>
<a href="#" id="btn4"></a>
<a href="#" id="btn5"></a>
<a href="#" id="btn6"></a>
<a href="#" id="btn7"></a>
<a href="#" id="btn8"></a>
<a href="#" id="btn9"></a>
<a href="#" id="btn10"></a>

</body>
</html>
 
Ich hab noch was vergessen: Im IE funktioniert die Navigationsleiste, im Firefox nicht.
 
ganz spontan wuerd ich sagen, dass dein <a></a> kein inhalt hat ... da is dann nicht soviel mit darstellen
 
und "links ohne inhalt" und "bilder ohne beschreibung (alt="beschreibung")" sind eh soone sache, die man sich verkneifen sollte ... es gibt auch noch textbrowser die keine bilder darstellen koennen(lynx, links) oder meschen, die nix sehen koennen und deshalb auch auf bildbeschreibungen angewiesen sind...
 
Auch wenn in den Links was steht, klappt es nicht. Und wie kann man da ne Bildbeschreibung hinzufügen?

Falls jemand einen besseren Vorschlag hat, dann nur her damit ^^.

Ich brauch eben eine bildbasierende, horinzontal ausgerichtete Navileiste mit Hovereffekt die möglcihst kein Javascript benötigt. (Ich weiß, viele Forderungen...)
 
Hi,

bei A-Tags handelt es sich um ein Inline-Element. Dieses akzeptiert keine Breitenangaben. Dass
es im IE dennoch dargestellt wird, ist eine IE-Spezialität.

Versuche mal, ein Blockelement zu erstellen (display: block) und dieses mit float: left nebeneinander
darzustellen.
Code: 
a#btn1,a#btn2,a#btn3,a#btn4,a#btn5,
a#btn6,a#btn7,a#btn8,a#btn9,a#btn10{ height:50px;
                                     display: block;
                                     float: left;}
Ciao
Quaese
 
DANKE! Das ist die Rettung!

Ich wusste doch da gabs was... Hatte es schon mit display:block probiert, jedoch waren dann die Elemente unterienander. Auf float:left bin ich nicht gekommen...


Vielen Dank! :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück