Peruns Weblog - Webwork und Internet

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.

Simon Willson und Nate schreiben auf deren Websites über ein sehr wichtiges Thema: "pflegeleichte CSS-Dateien" oder was soll man machen bzw. vermeiden um diese zu bekommen.

Sehr wichtig und hilfreich sind Kommentare innerhalb der CSS-Datei und zwar nicht nur bestimmte Bereiche von einander abzuheben sondern vor allem die CSS-Hacks zu kommentieren, damit man auch noch nach Monaten nachvollziehen kann warum man eine, auf den ersten Blick bescheurte, Anweisung notiert hat .

Heute ist mir wieder ein alter Bekannter über den Weg gelaufen: der doppelte Margin-Wert. Es handelt sich hierbei um einen CSS-Bug im Internet Explorer. Worum geht es? Weist man einem Div-Block die Eigenschaft float zu und gibt ihm gleichzeitig einen Margin-Wert (welches in gleicher Richtung zeigt), dann verdoppelt sich der Margin-Wert. Je nach Laune und Tagesform ist es entweder ein lästiger Bug oder ein nettes Feature der Firma Microsoft . Hier ein Code-Beispiel:

#sidebar {
float: right;
margin-right: 25px; /* In IE wird daraus 50px */
width: 190px;
}

Eine mögliche Lösung des Problems:

#sidebar {
float: right;
margin-right: 25px;
display: inline; /* Umgeht das Problem */
width: 190px;
}

Weiterführende Infos: Positioniseverything.net.

Die 10 CSS-Tricks hatten wir schon mal. Nun gibt es weitere 10 CSS-Tricks, die man sich merken sollte.

Wer seine Tabellen – wir reden hier von Daten- und nicht von Layout-Tabellen – etwas aufpeppen will, der sollte mal auf dieser Seite vorbeischauen. Entweder man lässt sich von den Beispielen inspirieren oder man lädt sich die Beispiele direkt herunter.

Bei der Erstellung von Druckstylesheets sollte man schauen, daß man nicht die Eigenschaft float anwendet, denn die Mozilla-Browser verschlucken sich dabei, guckst du hier. Aber auch der allseits beliebte Internet Explorer hat so seine Macken diesbezüglich. Benutzt man im Quelltext id="tags", dann bricht der IE den Druck genau bei dieser Zeile. Weitere Infos gibt es hier.

Khoi Vinh war so nett und hat eine Formular-Vorlage auf seiner Seite zum Download bereitgestellt. Wer also in Eile ist oder keine Lust hat sich mit den Tiefen des Formulardesigns oder ein praktisches Beispiel braucht sollte zugreifen.

Bewertungssysteme die Sternchen-Grafiken nutzen sind vielen von uns bekannt, auf komodomedia.com gibt es ein Tutorial wie man so was mit XHTML & CSS aufbauen kann.