Elastisch

Seit ich den Heiligen Gral in meine Website eingebaut habe, ist der Mittelteil zwar elastisch, viele andere Elemente allerdings nicht. In dieser verzweifelten Lage kommt mir das unglaubliche em zu Hilfe, so dass ich sämtliche Größen und Abstände relativ zur regulären Schriftgröße von 13px formulieren kann.

Der letzte verbleibende Unsicherheitsfaktor – neben der unvollständigen CSS-Unterstützung gewisser Browser – sind die Standardabstände:

Many styling inconsistencies occur between browsers because browsers apply their own internal style sheet to HTML elements. These style sheets are very similar, but crucially they do differ. The most notable difference occurs with lists: Safari and Gecko-based browsers (such as Firefox) use padding-left to indent lists; Internet Explorer uses margin-left. Neither are right or wrong, they are just different.

Um auch in diesem Bereich vor unliebsamen Überraschungen gefeit zu sein, folge ich dem radikalen Vorschlag, alle Abstände zu eliminieren, um sie anschließend von Hand wieder herzustellen:

* { padding:0; margin:0; }

Das Ergebnis der vielen Arbeit wird in aktuellen Versionen von Safari, Firefox, Opera, Chrome und Internet Explorer korrekt dargestellt. Der Internet Explorer kommt bis Version 7 natürlich nicht mit dem Heiligen Gral zurecht, aber ich bin in der komfortablen Position, das gleichmütig hinnehmen zu können. Die älteren IE-Versionen bekommen einfach ein anderes Stylesheet vorgesetzt:

<!--[if IE 6]><link rel="stylesheet" href="/css/ie.css" type="text/css" media="screen, projection"><![endif]--> <!--[if IE 7]><link rel="stylesheet" href="/css/ie.css" type="text/css" media="screen, projection"><![endif]-->