CSS-Erfahrungen der letzten Tage

Momentan arbeite ich an mehreren Projekten gleichzeitig und mittlerweile verwandelt sich das Weblog in ein Arbeitstagebuch 🙂 und da wollte ich ein paar Sachen notieren die mir so aufgefallen sind.

Als erstes fangen wir mit einer leichten Übung an: mit einem CSS-Hack für Internet Explorer 5-5.5 (Windows). Wir alle wissen das IE das Box-Modell falsch intepretiert, soweit so gut und ich will jetzt nicht näher darauf eingehen, aber man hat das Problem das IE 5-5.5 eine andere Anweisung bekommen soll als die restlichen Browser, hier ein Beispiel:

width: 170px; /* Anweisung für IE 5-5.5 */ width/**/:/**/ 150px; /* Anweisung für die restlichen Browser */

Der “Trick” besteht darin das der erste Kommentar IE 5.0 (Win) umhaut und der zweite IE 5.5. Ja, ich weiß mit CSS-Hacks sollte man vorsichtig sein und im Falle von IE-Unzulänglichkeiten die conditional comments bemühen. Aber trotzdem interessant.

Die zweite Beobachtung betrifft position: fixed;. Viele wissen, daß diese CSS-Anweisung bis jetzt leider nur von Opera, Geckos (Mozilla, Firefox, Netscape ab 7 etc.), Safari und Konqueror aber nicht von Internet Explorer (mal von IE Mac abgesehen) unterstützt wird. Es gibt einige Lösungen die IE position :fixed; beibringen können. Sehr interessant finde ich den “IE 7” von Dean Edwards. Es handelt sich hierbei um einer Erweiterung, die dem IE einige lang vermisste Fähigkeiten spendiert u. a. volle Unterstützung für PNG-Grafiken und fixierte Bereiche.

Nun hatte ich aber ein Layout erstellt welches einen Workaround nutzt um den Footer immer am Seitenende zu halten, guckst du hier: The Man in Blue. Kommt man jetzt auf die Idee, von alleine oder durch den Kunden :-), bestimmte Bereiche zu fixieren dann wird das zwar in den Geckos und Opera 8+ klappen, aber nicht in IE. Egal ob man die IE 7-Lösung oder sonstige Ansätze (CSS-Hacks, Expressions) bemüht.

Die zwei Ansätze (“sticky Footer” und fixierung in IE) sind leider nicht kompatibel. Nun fehlt mir leider die Zeit dem Phänomen näher auf den Grund zu gehen. Gut, nun kann man sich streiten wie sinvoll und nützlich (gerringe Monitorauflösung, persönliche Abneigung etc.) fixierte Bereiche sind, aber das wollte ich hier nicht zum Thema machen.

Die dritte Erfahrung die ich gemacht habe, ist das IE (wer den sonst) gerne die Rahmen um Überschriften “verschluckt” wenn sich die Überschriften innerhalb eines Bereiches befinden welcher sich wiederum innerhalb eines relativ positionierten Bereiches befinden. Nich vertsanden? OK, hier ein Beispiel:

#bereich1 { position: relative; } #bereich2 { ... } #bereich2 h3 { border-bottom: 1px solid #ddd; }

In so einem Fall kann es passieren, daß IE den Rahmen nicht anzeigt. Abhilfe schafft man in dem man dem Elternelemen – in diesem Fall #bereich2 – auch position: relative; vergibt.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.