CSS: geliebtes Border-Box-Modell

Jeder, dessen CSS-Definitionen nicht nur mit aktuellen Browsern (Firefox > 1.0.x und IExplorer 7) korrekt ausgegeben werden sollen steht irgendwann einmal vor dem Dilemma des Border-Box-Modells.

Genauer gesagt: er steht vor dem Problem, dass IExplorer 5.x und 6.0  das Border-Box-Modell mit Innen-/Außenabständen, Breite und Rand in Eigeninterpretation betrachten (Box Model Bug).

Solange vor allem der IExplorer 6 (laut Zugriffs-Statistik sämtlicher (Kunden-)Webseiten) nach wie vor die Nase vorn hat und CSS3 noch nicht in greifbare Nähe rückt, muß man als Web-Developer sich diesem Problem wohl oder übel stellen.

Aus diesem Grund ist bei jeder Template-Frickelei das geliebte Border-Box-Modell Grund für diverse Nervenzusammenbrüche...

Einige Grundregeln für ein identisches Aussehen eines Templates in allen Browsern habe ich heute von Marcus erfahren:

1. Nutze, wenn möglich, für Boxen (DIV & Co.) nie feste Breiten kombiniert mit Abständen (padding /margin).
2. Zum Zentrieren niemals fixe Abstands-Definitionen nehmen, das erfordert meistens Hacks für den IExplorer:
   margin 0 auto; /* funktioniert nur in neueren Browsern */text-align: center; /* für alle anderen */

Vor allem mit (1.) lassen sich marginale Probleme umgehen.

BTW, die "CSS-Spickzettel" (CSS cheat sheets) von lesliefranke.com oder www.ilovejackdaniels.com helfen auch - bei grundlegenden Problemen ;-)

To be continued...