Allg. Darstellungsfehler bei Navi mit background-position

[ccisco]

Hallo an alle!

Es geht um diese Grafik:

.
Die von mir händisch gebastelte Website findet ihr hier: http://passaujazzorchestra.culturebase.org.

• Die Grafik ist 640 Pixel breit und 75 Pixel hoch.
• Die Navi ist 640 Pixel breit und 25 Pixel hoch.
• Es gibt also drei Zustände: normal, hover und on.

Hier der CSS Code:

/* HEADER */
#header { width:640px;height:25px;margin:50px auto 10px;position:relative; }
#header #nav { margin:0px;padding:0px; }
#header #nav li { display: inline; }
#header #nav li a { width:80px;height:0px;padding-top:25px;overflow:hidden;background:url(../img/header.png) top no-repeat;float:left; }

/* HEADER NORMAL */
#header #nav li#startseite a { background-position:0px 0px; }
#header #nav li#band a { background-position:-80px 0px; }
#header #nav li#repertoire a { background-position:-160px 0px; }
#header #nav li#termine a { background-position:-240px 0px; }
#header #nav li#fotos a { background-position:-320px 0px; }
#header #nav li#presse a { background-position:-400px 0px; }
#header #nav li#gaestebuch a { background-position:-480px 0px; }
#header #nav li#kontakt a { background-position:-560px 0px; }

/* HEADER HOVER + HEADER PRESSED */
#header #nav li#startseite a:hover, a:active {background-position:0px -25px; }
#header #nav li#band a:hover, a:active { background-position:-80px -25px; }
#header #nav li#repertoire a:hover, a:active { background-position:-160px -25px; }
#header #nav li#termine a:hover, a:active { background-position:-240px -25px; }
#header #nav li#fotos a:hover, a:active { background-position:-320px -25px; }
#header #nav li#presse a:hover, a:active { background-position:-400px -25px; }
#header #nav li#gaestebuch a:hover, a:active { background-position:-480px -25px; }
#header #nav li#kontakt a:hover, a:active { background-position:-560px -25px; }

/* HEADER ON */
#header.startseite #nav li#startseite a { background-position:0px -50px !important; }
#header.band #nav li#band a { background-position:-80px -50px !important; }
#header.repertoire #nav li#repertoire a { background-position:-160px -50px !important; }
#header.termine #nav li#termine a { background-position:-240px -50px !important; }
#header.fotos #nav li#fotos a { background-position:-320px -50px !important; }
#header.presse #nav li#presse a { background-position:-400px -50px !important; }
#header.gaestebuch #nav li#gaestebuch a { background-position:-480px -50px !important; }
#header.kontakt #nav li#kontakt a { background-position:-560px -50px !important; }

Die Einbindung in XHTML ist denke ich mal korrekt, deswegen poste ich die mal jetzt nicht. Das Problem ist, dass ab dem Menüpunkt "Repertoire" unten rechts in der Navigationsleiste ein Darstellungsfehler bei allen Browsern aufkommt.
Die jeweiligen Verschiebungen der einzelnen Grafikabschnitte sind alle korrekt (jedes li-Element ist 80 Pixel breit und 25 Pixel hoch), deswegen verstehe ich den Darstellungsfehler überhaupt nicht.

Vielleicht kann mir ja irgendjemand aus meiner Denkblockade helfen. Bin für alle Vorschläge dankbar!

 

[dms]

Das Problem ist, dass ab dem Menüpunkt "Repertoire" unten rechts in der Navigationsleiste ein Darstellungsfehler bei allen Browsern aufkommt.

Was ist denn der Darstellungsfehler? Für mein Auge sieht es gut aus. Opera, Safari, Firefox.

 

[ccisco]

Wie gesagt, ab "Repertoire"...ist zwar kein weltbewegender Fehler, es nervt mich trotzdem.

 

[AgentMax]

Also hier funktioniert das ohne Fehler:

http://snipr.com/2ubkj-cfmqmt

OSX10.5, FF 3

EDIT: ah alles klar. Jetzt hab ich den "Fehler" gefunden. Du meinst die Kante die ganz hinten unten erscheint.
OK, die ist bei mir auch

 

[ccisco]

Wow, richtig professionell mit Video, cool! Ja, wie gesagt, nichts weltbewegendes, aber es nervt!

 

[dms]

@AgentMax Ist das mit Jing gemacht oder gibts da mittlerweile schon wieder ein neues Tool?

 

[AgentMax]

Snapz Pro X.

http://www.ambrosiasw.com/utilities/snapzprox/

 

[msslovi0]

Ist das mittlerweile gelöst? Ich kann den Fehler aktuell nicht nachvollziehen...

 

[ccisco]

Nein, ist noch nicht gelöst. Mir ist es auch unbegreiflich...vielleicht findet ja jemand noch den Fehler.

 

[pferdle]

Bei mir werden einige Fehler bei der HTML-Validierung angezeigt - auf den ersten Blick scheint nichts dabei zu sein, was direkt mit dem Problem zu tun hat, aber man weiß ja nie.

 

[msslovi0]

Jetzt hab ich es verstanden. Es passiert nur, wenn man die Seite aufruft. Ich dachte, das passiert (auch) beim :hover.

Es liegt an deinem Markup. Du verwendest den Klassennamen .termine einmal bei div#header und einmal für einen eigenen div, um da rechts eine Überschrift einzublenden. Und da hängt ein Hintergrundbild dran. Das ist das, was du rechts unten in der Ecke dann auch bei div#header.termine siehst. Das tritt bei Band nicht auf, weil da der Klassenname beim div#header auf .band lautet und weiter unten .entstehung respektive .verein.
Von der Semantik her am einfachsten bekommst du das Problem in den Griff, indem du deine div-Suppe rauswirfst und die Überschriften in Header-Tags packst (und den Content in p-Tags). Dann kannst du die Überschriftenbilder an h2.termine antackern und der div.termine bekommt kein nicht gewolltes Hintergrundbild mehr spendiert.

Matt

 

[ccisco]

Juhu, du hast den Fehler gefunden! Super, vielen Dank! ;-)

Habe jetzt mal als Erste-Hife-Maßnahme einfach die id's, die namentlich gleich waren, umbenannt. Dann werde ich mir mal deinen Vorschlag zu Herzen nehmen.

Danke nochmal!