Buttons verschieben sich im Firefox

[Manuel]

Hallo,
ich hab ein kleines Problem von dem ich in den Weiten des Webs nur die Frage aber nie eine passende Antwort gefunden habe :(
Ich hoffe Ihr könnt mir hier helfen.

Das Problem:
Ich hab mehrere Hover-Buttons per CSS erstellt. Im IE funktionieren diese einwandfrei. Jedoch im Firefox, verschiebt sich jeder Button, nachdem man ihn angeklickt hat, nach oben. Ich finde aber keinen Fehler:/

Hier der Link zur Seite:
www.greatest-hils.org

Hier der CSS-Code:
#nav  {  }
#nav ul { list-style:none; margin:0; padding:0 }
#nav li { margin:0; padding:0 }
html>body #nav a:link, #nav a:visited { height:auto }
#nav a:link, #nav a:visited    { background: url(Button2.jpg) no-repeat center; margin: 0px 0; padding: 12px; height: 0px; display: block; text-decoration:none }
#nav a:hover   { background: url(Button1.jpg) no-repeat center; margin: 0px 0; padding: 12px; height: 0px; display: block; text-decoration:none }

Ich hoffe Ihr könnt mir helfen!

Mit freundlichen Grüßen
Manuel

[Zeromancer]

Hallo Manuel,

Ich hab mehrere Hover-Buttons per CSS erstellt. Im IE funktionieren diese einwandfrei. Jedoch im Firefox, verschiebt sich jeder Button, nachdem man ihn angeklickt hat, nach oben. Ich finde aber keinen Fehler:/

dasss der IE es richtig anzeigt, sollte dir keine Sicherheit geben. Die Tidy-Extension für den Firefox sagt Folgendes aus:

Zeile 1 Zeichen 1 - Warnung: missing <!DOCTYPE> declaration
Zeile 124 Zeichen 11 - Warnung: <font> isn't allowed in <tr> elements
Zeile 125 Zeichen 13 - Warnung: missing </font> before <td>
Zeile 125 Zeichen 70 - Warnung: inserting implicit <font>
Zeile 125 Zeichen 70 - Warnung: missing </font> before <table>
Zeile 136 Zeichen 11 - Warnung: discarding unexpected </font>
Zeile 17 Zeichen 1 - Warnung: <table> proprietary attribute "name"
Zeile 17 Zeichen 1 - Warnung: <table> proprietary attribute "height"
Zeile 21 Zeichen 9 - Warnung: <table> proprietary attribute "name"
Zeile 21 Zeichen 9 - Warnung: <table> proprietary attribute "height"
Zeile 40 Zeichen 21 - Warnung: <div> anchor "nav" already defined
Zeile 49 Zeichen 21 - Warnung: <div> anchor "nav" already defined
Zeile 58 Zeichen 21 - Warnung: <div> anchor "nav" already defined
Zeile 67 Zeichen 21 - Warnung: <div> anchor "nav" already defined
Zeile 76 Zeichen 21 - Warnung: <div> anchor "nav" already defined
Zeile 84 Zeichen 38 - Warnung: <div> anchor "nav" already defined
Zeile 95 Zeichen 15 - Warnung: <table> proprietary attribute "height"
Zeile 126 Zeichen 15 - Warnung: <table> proprietary attribute "name"
Zeile 125 Zeichen 13 - Warnung: trimming empty <font>
Zeile 107 Zeichen 21 - Warnung: trimming empty <p>
Zeile 125 Zeichen 70 - Warnung: trimming empty <font>

0 Fehler / 21 Warnungen

Der Validator beim W3C ist auch nicht glücklich. Versuche alle Fehler auszubessern und schaue dann, ob die Darstellung immer noch nicht korrekt ist!

Mit freundlichen Grüßen,
André

[Ron]

Hallo,

Versuche alle Fehler auszubessern und schaue dann, ob die Darstellung »» immer noch nicht korrekt ist!

soll das ein Gewinnspiel sein !?

Ron

[Zeromancer]

Hallo Ron,

soll das ein Gewinnspiel sein !?

sorry, habe ich überlesen.

Mit freundlichen Grüßen,
André

[Manuel]

Servus,
klar ist das ein Gewinnspiel: und der Gewinn ist ein großes DANKE von mir;)

OK Spaß beiseite:
Also ich hab das ganze Ding jetzt validiert... und der Button verschiebt sich immernoch :( Wer weis Rat?

(hier der Link zum modifizierten HTML: www.greatest-hils.org/Ordner/Index.html )

[Detlef G.]

Hallo Manuel

Hier der Link zur Seite:
www.greatest-hils.org

Hier der CSS-Code:
...

Ich hoffe Ihr könnt mir helfen!

Markup Validation Service
Solange dein HTML grobe Fehler hat, wie z.B. keine Doctype-Angabe oder
mehrfaches verwenden einer ID, ist es relativ sinnlos, nach der Ursache von
Anzeigefehlern im CSS zu suchen.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Manuel

Ich hab mehrere Hover-Buttons per CSS erstellt. Im IE funktionieren diese einwandfrei.

Der kennt ja auch manches nicht und interpretiert height als min-height.

Jedoch im Firefox, verschiebt sich jeder Button, nachdem man ihn angeklickt hat, nach oben.

Genau so hast du es definiert ;-)

Hier der CSS-Code:
...
html>body #nav a:link, #nav a:visited { height:auto }

Das height:auto soll also für unbesuchte Links angewendet werden, wenn der
Browser den Kindselektor kennt (html>body #nav a:link).
Außerdem soll es für besuchte Links bei allen Browsern angewendet werden,
wenn später keine andere Angabe mit mindestens gleicher Gewichtung erfolgt
(#nav a:visited).

#nav a:link, #nav a:visited    { ... height: 0px; ... }

Hier wird die Höhe auf 0 gesetzt und zwar mit genau der gleichen Wichtung,
wie oben für besuchte Links.

Die Spezifität (Gewichtung) für unbesuchte Links ist oben höher
(html>body #nav a:link) als hier (#nav a:link) wodurch nur in diesem
Fall height:auto nicht durch height: 0px überschrieben wird.

Brauchst du das height: 0px für den IE überhaupt?

Auf Wiederlesen
Detlef

[Manuel]

Hey ein großes DANKE an dich, genau da lag der Fehler!!
Hab das nicht gesehen, dass ich die Höhe mehrmals drin hatte.... Manchmal sehen 4 Augen einfach mehr als nur 2 ;)