Hilfe! Merkwürdiger 1px-Versatz bei Hintergrundobjekt.

Liebe Leute,

ich noch ganz neu hier ... und brauche schon eure Hilfe. Nachdem ich bereits das ganze Wochenende über nach einer Lösung gesucht habe, bin ich mit meinem Latein am Ende.

Worum geht's?

Ich habe mir für ein SciFi-Projekt unter Verwendung des "Animated Buttons" eine etwas aufwändigere Hauptnavigation für die Desktop-Ansicht gebaut. Die Idee war, dass sich die Buttons bei Mausberührung in darunter platzierte Vertiefung schieben – ein wenig so, als würden sich zwei Module verbinden oder ein Schott bewegen.

Hier könnt ihr euch einen Dummy anschauen (ich habe die Adresse aus Datenschutzgründen gekürzt): http://tinyurl.com/hnorhrk

Um die gewünschte Funktion zu realisieren, habe ich das Gegenstück zu den Buttons, also die Leiste mit den erwähnten Vertiefungen als Hintergrundobjekt unter "Zeilenstil" eingefügt. So ist gewährleistet, dass sich die Buttons über bzw. in die Vertiefungen schieben können.

Das Problem:

Während die Navigation in Firefox, Microsoft Edge und Internet Explorer einwandfrei dargestellt wird, tritt in Chromium-basierten Browsern (also auch im WebsiteX5-Vorschaubrowser) ein Versatz um einen Pixel auf. Genauer gesagt rutscht die Hintergrundgrafik mit den Vertiefungen um 1px nach links – was auf der einen Seite der Navigation eine zusätzliche Spalte zur Folge hat, auf der anderen Seite eine unschöne Überlappung der Bilder. Hier ein paar Screenshots:

Korrekte Darstellung (Firefox, Edge, IE)

korrekteansicht.jpg

Fehlerhafte Darstellung (Chrome, Opera usw.)

fehlerhafteansicht.jpg

Und zum besseren Verständnis noch eine isolierte Darstellung der Hintergrundgrafik, die ich unter "Zeilenstil" eingebunden habe (die schwarze Fläche ist eigentlich transparent):

menuehintergrund.png

Diese Grafik verschiebt sich. Eine Vergrößerung des Versatzes:

versatz.jpg

Meine Frage:

Hat jemand von euch eine Idee, wie ich diese Fehldarstellung unterbinden kann? Die Grafik ist mittig positioniert, ebenso die Menübuttons und der restliche Seiteninhalt; alle Außenränder sind absolut proportional oder stehen auf Null. Woran liegt's also bzw. was mache ich falsch?

Über Hilfe und Tipps würde ich mich freuen!

Schönen Abend

maerz1978

Zitat von andy67

HAbe dir im HELP Center geantwortet.

Ah, du bist das. Vielen Dank. Habe dir dort auch geantwortet.

Zitat von zwoemti

Bitte Grafiken direkt im Forum hochladen so bleiben sie auch der nachfolgenden Generation erhalten.

Ist gut, werde ich künftig berücksichtigen. Mir war nicht klar, dass sich die Bilder auf diesem Weg auch sichtbar einbinden lassen (und nicht nur als Anhang).

Zitat von zwoemti

Opera ist nicht gleich Opera.

Zitat von zwoemti

Eine Absolut einheitlich Darstellung ist eigentlich nie möglich.

Dass es immer gewisse Abweichungen gibt, war mir bewusst. Bei einer so eindeutigen Positionierung (absolute symmetrische, mittig platzierte Grafik) hätte ich jedoch nicht mit Problemen gerechnet. In dem Fall werde ich die Navigation wohl aufgeben müssen.

Danke für die Tests und deine Erläuterungen!

Zitat von Cookie

Kannst du mir verraten wie du dass mit Facebook, Twitter... hingekriegt hast, dass sie am linken Bildschirmrand stehen?

Gerne.

• Kostenloses AddThis-Konto anlegen
• Das entsprechende Tool auswählen und konfigurieren (Dienste zusammenstellen)
• Den benötigten Code generieren lassen und unter 1 > Erweitert > Statistiken, SEO und Code > Erweitert > "Vor dem </Body> Tag" einfügen
• Feddisch.