nicht angemeldet
IE/FF| Verschiebung eines Layers um 1px wen Fenster nicht 100%
Hallo,
betroffene Seite: http://schaelle.de/pre/design/
Problem: Der Layer 'h1' verschiebt sich um 1px nach Rechts wenn das Browserfenster nicht 100% (komplett geöffen/skaliert) ist.
Padding-left ist 1px. Wenn ich padding-left auf 0 setze, passiert genau das umgekehrte - Bei 100% ist es falsch, bei <100% ist es richtig.
Betroffen ist der Firefox und der Internet Explorer, im Opera funktioniert es.
Grüße,
Schaelle
-
Hallo Schaelle,
betroffene Seite: http://schaelle.de/pre/design/
Problem: Der Layer 'h1' verschiebt sich um 1px nach Rechts wenn das Browserfenster nicht 100% (komplett geöffen/skaliert) ist.
Das ist so nicht richtig (hat nichts mit den 100% zu tun, sondern eher damit, ob die Breite des Anzeigebereichs gerade oder ungerade ist). Betrachten wir zunächst einmal, wogegen sich das H1 Element um das eine Pixel "verschiebt". Es verschiebt sich gegen das Hintergrundbild des Body Elements, welches du ja folgendermaßen definiert hast:
background-position: center top;
Da center gleichbedeutend mit 50% ist und deine Grafik 681px breit ist, ergibt sich bei einer Anzeigenbreite von 1024px folglich:
(1024px - 681px) / 2 = 171,5px (als Wert für den linken Rand)
Ebenso verfährst du mit deinem H1 Element. Diesem weist du eine Breite von 509px zu und möchtest anschließend, dass der Browser es per margin: 0 auto horizontal zentriert. Die Rechnung sieht dann wie folgt aus:
(1024px - 509px) / 2 = 257,5px (als Wert für den linken Rand)
Da die kleinste mögliche Einheit aber ganzzahlige Pixelwerte sind, muss der Browser also in beiden Fällen runden. Mathematisch korrekt im obigen Beispiel wäre ja in beiden Fällen aufzurunden, womit das Ganze dann passen würde, wenn du nicht dem H1 Element anschließend noch ein margin-left von einem Pixel verpassen würdest.
Ich kenne die Rechenroutinen der einzelnen Browser nicht, aber fest steht (für mich), dass hierin dein Problem begründet liegt (im Rundungsverhalten des jeweiligen Browsers). Abhilfe könnte ein 681px breites, alles umschliessendes Element (Wrapper) schaffen, dem du das Hintergrundbild zuweist.
Padding-left ist 1px. Wenn ich padding-left auf 0 setze, passiert genau das umgekehrte - Bei 100% ist es falsch, bei <100% ist es richtig.
Du meinst aber sicher margin ... ;-)
Betroffen ist der Firefox und der Internet Explorer, im Opera funktioniert es.
Und wer weiß wie es bei x-beliebigen Breiten im Safari, Konqueror, u.v.a. aussieht? Opera rundet scheinbar im Gegensatz zu anderen Browsern_immer_beide Werte auf, bzw. ab.
Pixelgenaues Design hat eben so seine Tücken ;-) !Gruß Gunther