blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Das Padding Dilemma

Wer kennt das Problem nicht, man erstellt ein Layout und verwendet in diesem Padding um die inneren Abstände zu definieren. Selber optimiere ich meine Layouts erstmal für den IE, separiere dann durch spezielle Klammerungen den Mozilla und Opera, und kann damit diesen dann die notwendigen Anweisungen geben um das gewünschte Ergebnis zu erzielen.

Etwas Arbeit beim Browseroptimieren kann man sich aber sparen wenn man statt Padding Margin verwendet. Schaut man sich dieses Beispiel mal im IE und Mozilla an, sieht man schnell was ich meine. Der IE interpretiert beide Styles gleich, aber wohl falsch denn im Mozilla schaut das Beispiel schon ganz anders aus. Der Mozilla addiert unsere Padding-Werte auf die angegeben Weite und schon ist es passiert, unser Layout würde zerissen werden.

Benutzen wir nun aber Margin um den inneren Abstand zu definieren, so interpretieren es beide Browser gleich, genau so wie wir es ja wünschen. Mein Tipp also, wenn möglich verwendet Margin um die inneren Abstände zu definieren, dann spart ihr euch eventuelle Browserhacks(weichen).

4 Kommentare zu 'Das Padding Dilemma'

Auf dem Laufenden bleiben per RSS oder TrackBack zu 'Das Padding Dilemma'.

  1. Leon sagt,

    Juli 21st, 2004 um 12:48 am

    Coole Sache, auch wenn man das Problem mit dem Doctype strict umgehen kann. Aber für jeden der dies nicht will oder kann, aus welchen Gründen auch immer, ein guter Tip.

  2. Sebastian sagt,

    Juli 21st, 2004 um 4:47 pm

    bzw. wenn man den IE 5.x supporten will. Da hilft nämlich auch kein DOCTYPE mehr um korrektes rendern zu erzwingen. Ich arbeitet übrigens andersrum. Erst die Standard-fähigen Browser (IE6, Moz, Opera, Safari) supporten, dann für den Rest anpassen.

  3. Alex Weber sagt,

    Juli 21st, 2004 um 6:33 pm

    Ich weiß ja auch das man es eigentlich andersrum machen sollte. Ich geh halt immer davon aus, dass die meisten Leute mit dem IE unterwegs sind, und hab es mir irgendwann “falsch” herum angewöhnt. Bei den erziehlten Ergebnissen ist es mir aber auch ziemlich egal, was nun richtig oder falsch herum ist.

    Werd mal an mir arbeiten, und es bei meinem nächsten TYPO3 Templates “richtig” machen…

  4. Arne Kamola sagt,

    Juli 28th, 2004 um 10:52 pm

    Es gibt auch noch eine andere Lösung für das Padding-Problem, sofern die width-Angabe in Pixeln definiert ist.
    Und zwar kann man bei z.B. bei einer Weite von 700px und einem Padding von 15px die Innenabstände von Rechts und Links addieren und dann von der Weite abziehen (=670px). Dieser Wert wird dann in der CSS-Datei unter der Weite angebenen und zwar als Maximale Weite: max-width: 670px;

    MfG Arne :)

Kommentar schreiben:


88,761 Spam-Kommentare
blockiert von
Akismet