Problem with multiple classes in IE

ronnie98 · Feb 17, 2006

Hi all,
i have this code

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345 </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.firstclass.colorclass{
background-color: #000000;
color: yellow;
}

div.secondclass.colorclass{
background-color: #cccccc;
color: red;
}
</style>
</head>
<body>
<div class="firstclass colorclass">Some content</div>
<div class="secondclass colorclass">Some other content</div>
</body>
</html>

It behaves different in Firefox and Explorer.
From my point of view Firefox's is the right one,but why it doens't work fine in IE?
That's my problem, hope somebody can point me in the right direction or suggest an alternative solution.
Thanks in advance.

BabyJeffy · Feb 17, 2006

Look at using a doctype for your document. Move IE out of quirks mode and force it to be a little more compliant.

This link on how to choose a doctype

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

ronnie98 · Feb 17, 2006

Thank you jeff,
but adding a doctype didn't bring any benefit,the problem remains.
The updated code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>12345 12345 12345 12345 12345 </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.firstclass.colorclass{
background-color: #000000;
color: yellow;
}

div.secondclass.colorclass{
background-color: #cccccc;
color: red;
}
</style>
</head>
<body>
<div class="firstclass colorclass">Some content</div>
<div class="secondclass colorclass">Some other content</div>
</body>
</html>

BillyRayPreachersSon · Feb 17, 2006

If you swap the order of the classes in your selectors, all works fine in both browsers.

So these:

Code:

div.firstclass.colorclass {
div.secondclass.colorclass {

become these:

Code:

div.colorclass.firstclass {
div.colorclass.secondclass {

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Problem with multiple classes in IE

ronnie98

Technical User

BabyJeffy

Programmer

ronnie98

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor