...

View Full Version : ID / class inheritance



bluerattle
02-07-2005, 03:08 AM
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

_Aerospace_Eng_
02-07-2005, 03:25 AM
you can only call an id or name one time, if u want to use the same css for multiple elements then uses classes

rmedek
02-07-2005, 03:30 AM
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,

bluerattle
02-07-2005, 03:33 AM
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

mindlessLemming
02-07-2005, 03:49 AM
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 :)

bluerattle
02-07-2005, 04:13 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum