WordPress & Webwork - perun.net

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.

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.

Unter der Überschrift How to style a restaurant menu with CSS gibt es auf Web-graphics eine Anleitung wie man eine Speisekarte für ein italienisches Restaurant machen könnte. An sich nichts spektakuläres, es wurden Definitionslisten eingesetzt wobei einige der Listenelemente floaten.

Aber etwas an dem Beispiel hat mein Interesse geweckt. Denn der Autor stellt sich die Frage ob es möglich sei, daß man ohne den Einsatz von zusätzlichen HTML-Elementen und sogar ohne des Einsatzes von clear in der CSS-Datei ein vorheriges floatendes Element zu "clearen" (das floaten aufzuheben):

So we have learned how to contain floats without extra markup, even without using the clear property. My challenge was: is it possible to clear the influence of a previous floated element without using clear itself?

The answer is yes, we can. The following CSS rule:

div.whatever{clear: both;}

is equivalent to the following:

div.whatever{float: left; width: 100%;}

Hört sich interessant an. Werde es mal bei Gelegenheit austesten.

Geordnete und ungeordnete Listen sind mittlerweile sehr beliebt geworden um eine Navigation zu realisieren. Dies ist (meistens) semantisch richtig und mittels CSS bieten sich vielfältige Getsaltungsmöglichkeiten. Siehe dazu: Navigationsmenüs mit Listen.

Um dem Besucher die Orientierung innerhalb der Website zu erleichtern bietet es sich an, die aktuelle Position innerhalb des Navigationsmenüs hervorzuheben. (weiterlesen…)