Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

[RaySpoint]

Hyhy,

Ich code' gerade mal wieder an einer Website, dabei fiel mir etwas erschreckendes auf:
Die Position einzelner Bilder verschiebt sich in unterschiedlichen Browsern...
Ich gebe mit CSS bestimmte Positionen an, z.B.

Header {
position:relative;
top:-50px
}
Navigation {
position:relative;
top:-5px
}
Content {
position:relative;
top:-5px
}
Footer {
position:relative;
top:-5px
}

Das ganze mache ich bspw., weil Bilder nicht von selbst nahtlos aneinander sind.

Nun ja, nun stellte ich aber fest, dass '5px' in Firefox etwas anderes sind als in Chrome und noch etwas anderes in IE. Aber warum?
Ich habe in drei verschiedenen Browsern drei verschiedene Abstände zwischen den Elementen. Warum? Ist 'Pixel' nicht völlig eindeutig?
Habe ich da 'n Denkfehler, oder haben die Browserentwickler wieder gepatzt?

Vielen Dank!
Ray

 

[patrick_l]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Damit du bei allen Browser auf einen Nenner kommst, solltest du zunächst ein Browser bzw. CSS-Reset machen. Dafür kannst du z.B. den Stern-Selektor nehmen.

* {margin: 0; padding: 0; border: none;}

Es sind natürlich noch weitere Resets möglich. Dafür einfach mal hier im Forum oder bei Tante G suchen und dich diesbezüglich weiter einlesen.

Grüße Patrick

 

[RaySpoint]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

CSS reset?

Davon habe ich ja noch nie etwas gehört -lesen!?
Ähm... ich nehme mal an, dass ich das einfach ins CSS reinschreibe, damit alle Browser von den gleichen 'Startwerten' ausgehen - oder wie darf ich das verstehen!?

Danke schon mal...
Ray

 

[TobiKo]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Ziemlich genau so ist es. Verschiedene Browser haben verschiedene Standards definiert. Vor allem der Internet Explorer tanzt öfters nicht gerade zur Freude der Webdesigner aus der Reihe.

Gruß Tobi

 

[leveler]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

http://www.cssreset.com/scripts/eric-meyer-reset-css/

 

[patrick_l]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Ähm... ich nehme mal an, dass ich das einfach ins CSS reinschreibe, damit alle Browser von den gleichen 'Startwerten' ausgehen -

Richtig. Du solltest dies ganz oben in deinem Stylesheet notieren. Wenn du mehr zum Theme CSS-Reset erfahren möchtest, Tante G ist dein Freund

Grüeß Patrick

 

[Tr3icio]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Du kannst dir auch normalize.css anschauen.
https://github.com/necolas/normalize.css/blob/master/normalize.css

Ist das selbe, wie auch im HTML Boilerplate zu finden ist.
Einfach in die Seite einbinden (z.B. in deine CSS Datei oder in eine andere, dann aber vor deiner eigenen) und Spaß damit haben (kleiner Tipp: das ganze zu komprimieren wäre praktisch)

 

[Daniel Koch]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Wobei Resets natürlich auch nicht unumstritten sind. Gerade aus Sicht der Website-Performance sollte man überprüfen, ob man tatsächlich ein Reset braucht.

http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/

Viele Grüße
Daniel

 

[sasquotschi]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Sollte der * Selektor nicht grundsätzlich vermieden werden (aus Performance Gründen)?
Eine reset oder normalize.css ist hier denke ich am sinnvollste.

 

[Daniel Koch]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Stimmt, der *-Selektor hat eine miserable Performance. Hier die Performance-Reihenfolge:

1. ID
2. Klasse
3. Element
4. Sibling
5. Kind
6. Descend
7. Universal-, also Stern-Selektor

Viele Grüße
Daniel

 

[RaySpoint]

@patrick_l:
WOW! Da habe ich bei meinen morgendlichen Recherchen ja echt Bauklötze gestaunt, was es zu diesem Thema alles gibt.
Ich bin dann mal dem Link von leveler gefolgt ( cssreset.com ) und habe dieses sehr umfangreiche Script (das nach eigenen Angaben millionenfach im Web verwendet wird) in meine Seite eingebunden...

Der Status Quo ist, dass meine Seite jetzt in allen Browsern wieder ein wenig anders dargestellt wird, als sie vorher anders dargestellt wurden...
Es hat defakto einige Lücken geschlossen und dafür andere aufgerissen... war also nicht der Weisheit letzter Schluss...

@daniel_koch: Danke für die 'Performance-Reihenfolge', da sehe ich doch, dass ich grundsätzlich alles richtig mache!
Wobei ich -Element- manchmal der -ID- vorziehe - den body gibts ja z.B. nur einmal...
Aber die Sites, die ich so bastel sind selten (nie) so umfangreich wie bspw. PSD-Tutorials, will sagen, dass meine CSS Scripte selten (nie) '10-Seiten' stark sind.

Also Ihr habt mir alle schon ganz toll geholfen!!!

@Tr3icio: Vereinfachen meint was?
Mehrere Elemente und Parameter, soweit möglich, zusammen fassen?

Ich mache mich weiter über alles schlau und gebe dann feedback!
Würde es euch helfen, wenn ich den Kuddel-Muddel mal hochlade?!?

RAYsn

UPDATE

Also Chrome & Internet Explorer 9 (ja, ich kann's auch nicht glauben) interpretieren die Seite jetzt fast gleich, nur das h2 Tag sieht etwas anders aus...

Aber Firefox (Nightly) tanzt aus der Reihe. Da sind zwei Lücken, die ich mir nicht erklären kann...

 

[patrick_l]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Stimmt, der *-Selektor hat eine miserable Performance. Hier die Performance-Reihenfolge:

1. ID
2. Klasse
3. Element
4. Sibling
5. Kind
6. Descend
7. Universal-, also Stern-Selektor

Danke Daniel für deine Auflistung. Meiner Meinung nach ist der Stern-Selektor für ein paar wenige Resets in Ordnung. Sobald es mehr wird, würde ich auch über andere Wege nach denken.

@patrick_l:
WOW! Da habe ich bei meinen morgendlichen Recherchen ja echt Bauklötze gestaunt, was es zu diesem Thema alles gibt.

Ja, da ist einiges möglich. Ob es jetzt so ein großes Reset sein muss, sei mal in Frage gestellt. Denn meistens reicht das reseten der margin und padding-Werte aus. Bedeutet auch gleichzeitig das du diese für alle Elemente neu vergeben musst. So ist zumindest mein stand der Dinge.

Ich mache mich weiter über alles schlau und gebe dann feedback!
Würde es euch helfen, wenn ich den Kuddel-Muddel mal hochlade?!?

Das hoch laden kann eigentlich nie schaden. So können wir nochmal einen Blick drauf werfen und dir gegeben falls sagen ob es hier und da Murks ist. Manchmal übersieht man ja auch gerne mal das ein oder andere.

Grüße Patrick

 

[Myhar]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

Abgesehen davon, dass ich nicht mit einer nightly Version enwickeln würde:
Dann nimm Firebug und untersuche das betreffende Element. Dir wird dort genau gezeigt, warum welches Element welche Dimension hat. Das sollte dir helfen.

 

[RaySpoint]

AW: Browser interpretieren CSS Pixel-Werte unterschiedlich, warum?

[GELÖST]

@Myhar:

Muchas Gracias!!!

Firebug hats gerichtet!
Ich hatte in dem div Tag in welchem der 'Kuddel-Muddel' liegt, das text-align Attribut mit dem Parameter center und das vertrug sich nicht mit den Pixel-Werten, weil bei 'center' wohl jeder Browser etwas eigen ist...!?

Also noch einmal vielen Dank an alle! Auf bald!
Ray

[GELÖST]