ID / class inheritance

I am building a site that is going to have a number of pages containing some common components, whose look will change in different sections of the site. I have been successfully building up the basics in CSS and testing them on Mac browsers. Now I have tried a test on Windows IE6 and it is not working. I'd like to know if this is an IE6 limitation so that I can cut my losses and just start hard-coding the variations. (Which would be too bad, it was working nicely on the Mac browsers -- even IE5!)

Basically, I have an CSS declaration of an ID, for example

#story {
width: 512px;
}

and then for each I have a catalog of classes which modify other attributes.

#story.vanilla {
background-color: blue;
}

#story.chocolate {
background-color: red;
}

And in the HTML I use declarations like:

<div id="story" class="vanilla"> blah blah </div>

blah blah

<div id="story" class="chocolate"> blah blah </div>

On the Mac browsers it has worked fine: chocolate and vanilla have the width of a story ID, but have their own background color. On Windows IE6 it seems to apply only the attributes for the first class defined -- vanilla in this case. (BTW, I'm not trying to supersede the same attributes as those defined by the ID -- the class definitions are for a different set of attirbutes.)

Is this a known problem, or should I submit code to see if I'm coding something wrong?

thanks,
BR

you can only call an id or name one time, if u want to use the same css for multiple elements then uses classes

Also, you can use more than one class per element, so you could do:



CSS:

.story {
width: 512px;
}

.vanilla {
background-color: blue;
}

.chocolate {
background-color: red;
}


HTML:

<div class="story chocolate"> blah blah </div>
<div class="story chocolate"> blah blah </div>

Hope this helps,

You're absolutely right -- but that was just a mistake in my message. I didn't actually try to declare the same ID twice in the same page. I should have written:

...In the HTML I'll use a declarations like:

<div id="story" class="vanilla"> blah blah </div>

on one page, and use

<div id="story" class="chocolate"> blah blah </div>

on another page.

Only the vanilla case works. When I reorder the class declarations in my CSS file so that the chocolate declaration appears first, then only the chocolate page works.

BR

This will work:


#story {
rules for both
}

.chocolate {
rules for chocolate
}

.vanilla {
rules for vanilla
}

If it doesn't work, something else is wrong and you should show us all your code :)

Thanks for the responses. You are all correct, and I do have a solution. I'm able to keep the ID definitions and the classes, but I do have to specify the CSS a little differently.

#story {
width: 512px;
}

.vanillaStory {
background-color: blue;
}

.chocolateStory {
background-color: red;
}

File 1:
<div id="story" class="vanillaStory"> blah blah </div>
File 2:
<div id="story" class="chocolateStory"> blah blah </div>

In other words, the CSS syntax would only work if I left the #id-name out of
the specialized class definitions. Then I just had to be sure that this generic class was given a name was clearly identified in the context of this ID. I'll end up with more class names but I'll live with that.

Thanks for the help.

BR