CSS: IE 6 - Falsche Styles (Background-Color)

(Kommentare: 0)

Skurriles Verhalten beim MSIE 6: Der Internet Explorer 6 rendert bestimmte Style-Eigenschaften von Blöcken einer bestimmten CSS-Klasse falsch, z.B. background-color, border, padding etc. Offenbar hat er Probleme mit der Reihenfolge von mehreren CSS-Klassen-Namen in einer Definition.


Beispiel

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<style>
body { background-color: #BBB; }
#wrapper { background-color: #DDF; margin: 10px auto 10px auto; width: 80%; padding: 20px; }
.block { background-color: #FFF; padding: 10px; }
.special.block { background-color: #FDD; }
</style>
</head>
<body>
<div id="wrapper">
<div class="header block">Normal Block</div>
<div class="special block">Special Block</div>
<div class="content block">Normal Block After Special Block</div>
<div class="content block">Normal Block After Special Block</div>
<div class="footer block">Another Normal Block</div>
</div>
</body>
</html>



Soll folgendermaßen aussehen und wird auch von normalen Browsern so gemacht (Firefox, IE 7, IE 8):

IE 6 Bug 1

Sieht im IE 6 aber so aus:

IE 6 Bug 2

Problem und Lösung: Der IE 6 kommt mit der Spezialisierung ".special.block" des Styles der Klasse block nicht klar. Ein Element der Klasse block soll einen weißen Hintergrund haben, nur nicht der Block "special". Der IE 6 rendert aber alle block-Blöcke rosa. Kehrt man die Reihenfolge um zu ".block.special", funktioniert es.

Beispiel wirkt vielleicht konstruiert, ich hatte es aber real bei einem Projekt. Typolight beispielsweise gibt allen Modulen die entsprechende Modul-Klasse und die Klasse "block" mit. ".block" bietet sich also für übergreifende Eigenschaften aller block-Blöcke an, sollte aber für ein bestimmtes Modul verändert werden.

Zurück

Kommentare

Einen Kommentar schreiben