Selbes Layout in IE und Firefox - Margin anstelle von Padding nutzen
Viele Designer stellen sich oft die Frage, wie man ein Design in mehreren Browsern gleich realisieren kann. Ein wichtiger Faktor um ein identisches Layout zu erzeugen ist der Verzicht auf das Element “padding”. Dies wird von Internet Explorer und Firefox unterschiedlich interpretiert.
Warum setzt man Padding ein?
Der übliche Vorgang ist Content-Boxen zu erstellen, in diese wird später dann der Text ausgegeben. Damit der Text dann nicht am Rand klebt, benutzt man das Attribut padding um einen Abstand zu erzeugen, dadurch wird aber die absolute Breite der Box im Firefox größer, bzw. im IE nicht.
Auf Padding verzichten und dennoch einen Abstand erzeugen
Verzichtet man nun auf das Padding Attribut muss man sich anders behelfen. Eine Möglichkeit ist eine weitere interne Box zu erstellen, diese hat keinen Rand und dient nur zu Ausrichtung des Contents. Dabei erhält diese Box den Wert den man normalerweise für das Padding Attribut anwenden würde, diesmal benutzt man ihn aber mit dem Margin- Attribut.
Ein Beispiel:
<style type="text/css" media="screen">
#box_layout {border: 1px solid gray; width: 500px; height: 500px;}
#box_content {margin: 10px;}
</style>
<div id="box_layout">
<div id="box_content">
INHALT INHALT INHALT
</div>
</div>
Dadurch bläht sich der Quellcode der HTML Datei auf (auch wenn es in diesem Beispiel nicht sonderlich auffällt). Deshalb gibt es noch eine andere Methode, die allerdings etwas aufwendiger ist und anstelle der HTML Datei das Stylesheet aufbläht.
<style type="text/css" media="screen">
#box_layout {border: 1px solid gray; width: 500px; height: 500px;}
#box_layout h3 {margin: 10px;}
#box_layout p {margin: 10px;}
#box_layout img {margin: 10px;}
</style>
<div id="box_layout">
<h3>Überschrift</h3>
<p>INHALT INHALT INHALT</p>
<img src="" alt="" />
</div>
Nun wird einfach jedes Element in der Layout Box mit einem Margin versehen und verschoben. Welche der beiden Methoden eingesetzt wird kommt auf die persönlichen Vorlieben an. Da die erste Methode weniger Code in das Stylesheet schreibt und man nachher auch nicht noch weitere Elemente hinzufügen muss, bevorzuge und empfehle ich diese.
Vielen dank an Lars Brillert für den Tipp zu diesem Artikel.
Verwandte Artikel
- Eigene Rahmen mit kleinen transparenten Gifs gestalten
- HowTo: Suchmaschinen Optimierung - Schritt 3 - Überschriften - Nutzen der H-tags
- Nutzen des Attribute Selector mit Css
- HowTo: Suchmaschinen Optimierung - Schritt 5 - Links und Grafiken richtig ausgeben
- Schritt für Schritt ans eigene CSS-Layout
4 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Vielen Dank für diesen nützlichen Hinweis ;)
Mit der Methode bläht sich zwar nicht HTML, dafür aber das CSS auf und wird unübersichtlich. Jedes Element, das ich im DIV habe, muss ich jetzt ins CSS mit dem margin hinzufügen. Dadurch entsteht mehr manueller Aufwand und es macht das Layout unflexibler. Meiner Meinung nach ist das Verschalteln von 2 DIVs der schönere Workaround für dieses Problem.
Der CSS-Hack ist auch falsch. Da so auch die Elemente untereinander ein margin erhalten. Sprich in obigen Beispiel erhält p 10px nach oben zum h3-tag.
Wem das egal ist kann das css wiefolgt verbessern
#box_layout * {margin: 10px}
#box_layout h3 {margin: 10px;}
#box_layout p {margin: 10px;}
#box_layout img {margin: 10px;}
???
#box_layout * {margin: 10px;}
!!! ;)