IE6 and second class in CSS

[pablopatito]

I have the following page which seems to work in all browsers except
IE6. In IE6, the second class (myclass2) is ignored, but the first
class works fine. Is there something wrong with my code, or is there a
workaround. Any advise for a relative novice would be much
appreciated.


<style>
#mainbody {background: red;width:600px}
#mainbody.myclass1 {background: yellow;width:300px}
#mainbody.myclass2 {background: green;width:300px}
</style>

<div id="mainBody">Hello</div>

<div id="mainBody" class="myclass1">World</div>

<div id="mainBody" class="myclass2">World</div>

 

[Beauregard T. Shagnasty]

I have the following page which seems to work in all browsers except
IE6. In IE6, the second class (myclass2) is ignored, but the first
class works fine. Is there something wrong with my code, or is there
a workaround. Any advise for a relative novice would be much
appreciated.

Do you have this working on a web server? Provide a URL.

<style>
#mainbody {background: red;width:600px}
#mainbody.myclass1 {background: yellow;width:300px}
#mainbody.myclass2 {background: green;width:300px}
</style>

<div id="mainBody">Hello</div>

<div id="mainBody" class="myclass1">World</div>

<div id="mainBody" class="myclass2">World</div>

An id is only permitted once on a page. You would notice this at:
http://validator.w3.org/

Why don't you wrap all your content in one div which uses the
id="mainBody" ?

 

[dorayme]

I have the following page which seems to work in all browsers except
IE6. In IE6, the second class (myclass2) is ignored, but the first
class works fine. Is there something wrong with my code, or is there a
workaround. Any advise for a relative novice would be much
appreciated.


<style>
#mainbody {background: red;width:600px}
#mainbody.myclass1 {background: yellow;width:300px}
#mainbody.myclass2 {background: green;width:300px}
</style>

<div id="mainBody">Hello</div>

<div id="mainBody" class="myclass1">World</div>

<div id="mainBody" class="myclass2">World</div>

Try lower case in the html to match the css.

 

[pablopatito]

Do you have this working on a web server? Provide a URL.

Here is an example:
http://jns.shared.hosting.zen.co.uk/tmp/page1.htm
http://jns.shared.hosting.zen.co.uk/tmp/page2.htm

Page 1 works in IE6, but page 2 doesn't. This is because page 1 uses
the first class, and page 2 uses the second class. Both work fine in
other browsers. Thanks for your help.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Fri, 27 Jul 2007 08:09:49 GMT
pablopatito scribed:

Here is an example:
http://jns.shared.hosting.zen.co.uk/tmp/page1.htm
http://jns.shared.hosting.zen.co.uk/tmp/page2.htm

Page 1 works in IE6, but page 2 doesn't. This is because page 1 uses
the first class, and page 2 uses the second class. Both work fine in
other browsers. Thanks for your help.

All the other browsers are wrong. IE6 is right.

#myid .myclass { something } refers to:

<div id="myid"><div class="myclass">Da content.</div></div>

 

[John Hosking]

Here is an example:
http://jns.shared.hosting.zen.co.uk/tmp/page1.htm
http://jns.shared.hosting.zen.co.uk/tmp/page2.htm

Page 1 works in IE6, but page 2 doesn't. This is because page 1 uses
the first class, and page 2 uses the second class. Both work fine in
other browsers. Thanks for your help.

See http://isaacschlueter.com/2006/03/ie-multi-selector-bug/
and
http://www.quirksmode.org/bugreport..._MSIE_6_Selector_with_an_ID_and_a_Class_.html
(or for a non-wrapped version of second link above:
http://preview.tinyurl.com/ywvqmm )

Pablo, if you have more questions about CSS, subscribe to
comp.infosystems.www.authoring.stylesheets

 

[Beauregard T. Shagnasty]

Here is an example:
http://jns.shared.hosting.zen.co.uk/tmp/page1.htm
http://jns.shared.hosting.zen.co.uk/tmp/page2.htm

Page 1 works in IE6, but page 2 doesn't. This is because page 1 uses
the first class, and page 2 uses the second class. Both work fine in
other browsers. Thanks for your help.

I got your sample code to work as expected by correcting the CASE of
your ID, as already mentioned by someone else,
from
<div id="mainBody"
to
<div id="mainbody"

 

[pablopatito]

John,
Thanks for those links. That seems to be the exact problem I'm having.

Beauregard,
I've fixed the case on my url's listed, but its still not working.

I'm thinking I will have to use two classes instead, rather than one
ID and one class, as in here:
http://jns.shared.hosting.zen.co.uk/tmp/page3.htm
This seems to get around my problem, but means editing about 50 pages.

Many thanks.