IE CSS bug? - Softwareontwikkeling

dinsdag 13 november 2007 13:47

Acties:

Topicstarter

We weten allemaal dat IE veel bugs heeft, maar deze is nogal vervelend en ik weet zo even niet de naam of een oplossing ervoor.

Ik neem het volgende stukje html als voorbeeld:

code:

<html>
<head>
<style>
DIV { width: 200px; height: 200px; margin: 10px; background-color: #000000; }

DIV.a.b { background-color: #FF0000; }
</style>
</head>
<body>

<div class="a b">&nbsp;</div>
<div class="a">&nbsp;</div>
<div class="b">&nbsp;</div>

</body>

Gewenst resultaat: 3 doosjes, eerste rood, de andere 2 rood.

Gekregen resultaat:

FF: zoals gewenst
IE: 3 doosjes, 1e + 3e rood, 2e zwart.

Weet iemand hier een oplossing voor? In mijn applicatie wordt een klasse gebruikt om aan te geven dat een element actief is (huidige pagina) en wordt de kleur elders gemodificeerd (verschillende menu items hebben een verschillende kleur, ook als ze actief zijn).

dinsdag 13 november 2007 17:45

Acties:

hing

Een doctype toevoegen aan je HTML lijkt het probleem op te lossen:

HTML:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

dinsdag 13 november 2007 19:48

Acties:

Deikke

Topicstarter

Helaas, dit lost het probleem hier niet op.

Correctie, het is nu ok in IE7, maar niet in IE6.

dinsdag 13 november 2007 19:53

Acties:

apokalypse

Wellicht is dit nuttig

http://quirksmode.org/css/multipleclasses.html

[ Voor 4% gewijzigd door apokalypse op 13-11-2007 20:18 ]

dinsdag 13 november 2007 20:08

Acties:

Deikke

Topicstarter

thx:

Explorer 6- doesn't read this last rule correctly; it applies it to any paragraph that has a class "small".

Niet mogelijk dus

dinsdag 13 november 2007 23:27

Acties:

crisp

Devver

Pixelated

Inderdaad niet mogelijk tenzij je je in hele lastige bochten wilt wurmen met een shitload aan scripting...
De enige workaround is om er extra classes tegenaan te gooien.

Note dat er ook bugs zijn mbt de combinatie van id- en class-selectors in IE:

HTML:

<style>

div#foo {
    background-color:red;
}
div#foo.bar {
    background-color:blue;
}
div#foo.baz {
    background-color:yellow;
}

</style>
<div id="foo" class="baz">This should have a yellow background</div>

Intentionally left blank