IE6 - same id with different classes not working. (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

djcc -> IE6 - same id with different classes not working. (9/16/2007 18:13:13)

Code: 
#content {
    margin: 0; }

#LeftSide,
#RightSide {
    margin: 3px 8px;}

/* only the first one works */
#LeftSide.3bss {
    margin: 3px 0px 3px 8px!important;}

#LeftSide.3ssb {
    margin: 3px 0px 3px 8px!important;}

/* same problem */
#content.3bss {
    margin: 3px 0 3px 8px !important;}

#content.3ssb {
    margin: 3px 8px 3px 0 !important;}


Classic sidebar content structure. Options exist to place sidebars on right or left. In my case, I need to adjust margins based on these combinations.

As you can see, margins are initially set to default values. #LeftSide.3bss margins work - definitely override the defaults. The second version - #LeftSide.3ssb does NOT work... at least, not as long as #LeftSide.3bss exists. If I comment that one out, then #LeftSide.3bss will work. Same for the 2 #content versions. Only seems to interpret the first instance of an id/class combination and will not allow any further combinations using the same id with a different class. Anyone have a solution, or am I doing something wrong here?



Donkey -> RE: IE6 - same id with different classes not working. (9/16/2007 19:22:19)

I may be misinterpreting what you are trying to do, without seeing the html I'm not sure.

If you are trying to set rules for classes of divs or spans or something that only take effect when those divs or spans are children of your ID'ed divs, then you need to leave a space.

e.g. 
#LeftSide .3bss {
    margin: 3px 0px 3px 8px!important;}

#LeftSide .3ssb {
    margin: 3px 0px 3px 8px!important;}


or shortened: 
#LeftSide .3bss, 
#LeftSide .3ssb {
    margin: 3px 0px 3px 8px!important;}



djcc -> RE: IE6 - same id with different classes not working. (9/16/2007 19:38:23)

Thank you Donkey - sorry about the missing html. I'm not talking about children. Containers would be
<div id="LeftSide class="2bss> or <div id=LeftSide class="2ssb">
<div id="content" class="2bss"> or <div id="content" class="2ssb">



Tailslide -> RE: IE6 - same id with different classes not working. (9/17/2007 2:41:13)

Why do you have 2 different classes to do the same thing?

#LeftSide.3bss and #LeftSide.3ssb have exactly the same rules? While you can only use an id once on a page, you're free to reuse classes however many times so it's a good idea not to have new rules that do the same thing - too confusing. Plus it's usually better to give the classes a more meaningful name.

Several points:

1. Why don't you just apply these new rules to the div rules themselves (#LeftSide) rather than adding classes? Much less confusing and much less code.
2. Do you have a proper DOCTYPE on your page as this will throw IE into Quirks mode and can cause issues.
3. If you can't apply the rules for some reason to the divs themselves and have to have classes then just have the single class - don't add more for no reason.
4. Why have you got !important in there so much - I never use that (not that it's incorrect - it's just usually unecessary).
5. Do you have any inline rules that are overriding the stylesheet?
6. Can we see a link - much easier to diagnose problems than with snippets of code.



djcc -> RE: IE6 - same id with different classes not working. (9/17/2007 10:57:19)

Doing a little more digging, I discovered this is indeed an ie6 bug. IE6 understands the first instance of #id.class but ignores all subsequent combinations using the same id. Same goes for class.class - accepts the first, ignores the rest. Seems related to the ie6 bug that only recognizes the last class listed when multiple classes are provided, eg .class1.class2.class3 {rules} is seen by ie6 as simply .class3{rules}



Tailslide -> RE: IE6 - same id with different classes not working. (9/17/2007 11:16:01)

That IE class bug was fairly old if I remember rightly - pre version 5... What IE 6 can't do is understand chained classes e.g: ul.red.itallic

but you weren't using them in the styles you posted.

Could you post a link to the page itself - then we can probably help you fix it a bit easier.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875