HTML5 / CSS3 - Praxistutorial 2 - Anpassungen IE 8 und 9

1. Die Abschnitte

2. Die Rundungen

Tja, um die zumindest im IE 9 hinzubekommen, müssen wir leider (mal wieder) mit Hintergrundbildern arbeiten. Und da ich euch einfach mal was zeigen will, lasst ihr gefälligst die Finger von der styles.css. Die ist ab sofort für euch in diesem Tutorial tabu.

So, man könnte jetzt auf folgende Idee kommen. Die linear-gradient-Angaben gelten dabei für background. Also überschreibt man die filter-Anweisung einfach hiermit (ie9.css).


header nav {
  background: url('../pics/nav_bg.gif') repeat-x;
}

Denkste

Wir ihr sehen könnt, bleibt das Problem bestehen. Denn filter: ... gradient hat nichts mit einer Hintergrundeigenschaft zu tun. Und das gilt meines Wissens nach für alle Filter-Eigenschaften von Microsoft. Also merken. Eine solche Angabe kann man nicht mit Standard-CSS überschreiben. Und darum muss man so etwas hiermit deaktivieren.


filter: none;

Leider

... gilt das natürlich auch für alle anderen Verläufe. Darum muss die ie9.css um den folgenden Code ergänzt werden.


aside h3 {
  filter: none;
  background: url('../pics/aside_bg.gif') repeat-x;
}

footer {
  filter: none;
  background: url('../pics/footer_bg.gif') repeat-x;
}

footer p {
  filter: none;
  background: url('../pics/footer_p_bg.gif') repeat-x;
}

3. Die Verläufe im IE 8

... sind "dank" der fehlenden Unterstützung von border-radius dagegen in Ordnung. Bis auf die beiden im Footer, wo wir ja mit Stopp-Punkten gearbeitet habe. Um das dort zu korrigieren, müsst ihr die beiden folgenden Anweisungen aus der ie9.css in die ie8.css kopieren. Gut, das ist zwar redundant, aber das soll uns hier nicht jucken.


footer {
  filter: none;
  background: url('../pics/footer_bg.gif') repeat-x;
}

footer p {
  filter: none;
  background: url('../pics/footer_p_bg.gif') repeat-x;
}

Ein Hinweis

Da die Drehung des Verlaufs aus dem ersten Tutorial einfach unerträglich scheußlich aussah und selbst dem schlechtesten Designer so was nicht einfallen würde, hab ich die für dieses Tutorial entfernt. Insofern passt dann alles.

4. Die Überschriften

Bei so einem Fall gibt es eine einfache Lösung. Haut dem verantwortlichen Designer links und rechts eins um die Ohren. Wer so was verbockt, hat einfach Schläge verdient. Aber was macht man, wenn es sich bei der betreffenden Person um eine Frau handelt? Oder der verfluchte Kerl stärker ist? Tja, dann habt ihr ein Problem. Und das ist ein Grundsätzliches. Denn Schatten bei Überschriften sind immer wieder gerne gesehen. Und da hat man eigentlich nur zwei Möglichkeiten. Entweder man sagt, dass das im IE 8 sowie im IE 9 nicht geht oder man arbeitet mit Bildern.

Ein mögliche(!) Alternative wäre sIFR. Mit dieser Flash- und JavaScript-basierten Lösung hat man Mitte der 2000er Jahre die Browserunzulänglichkeiten bei den serverseitigen Schriften ausgeglichen. Dabei wurde der eigentliche Text per JavaScript durch eine Flash-Datei ersetzt. Und vielleicht bekommt man damit auch so krude Geschichten hin wie unsere Überschriften. Da ich von diesem Programm aber null Ahnung habe und auch nicht mit Bildern arbeiten möchte (das ist einfach zu retro), sage ich für dieses Tutorial einfach mal ganz herzlich "Fuck off".

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt