Display problem changing over from ID to CLASS

[Black Max]

This is a bit trickier...at least for me and my limited understanding.

I'm using CSS buttons for my index page, the big buttons in the center, in a vertical list. When I originally wrote (actually modified someone else's) code for the buttons, I used the ID attribute:

#buttonmenu {
	margin-left: 10px;
}
#buttonmenu ul, #buttonmenu li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image:none;
}
#buttonmenu a {
	display: block;
	width: 115px;
	padding: 8px;
	margin: 0;
	border: 5px outset #7ac7fe;
	background-image: url('http://www.iraqtimeline.com/graphics/bluemottle.jpg');
	color: white;
	text-align: center;
	font-weight: bold;
	font-family: Trebuchet, Verdana, Arial, sans-serif;
}
#buttonmenu a:hover {
	position: relative; 
	border: 5px inset #7ac7fe;
	background-image: url('http://www.iraqtimeline.com/graphics/bluemottle.jpg');
	color: white;
	font-weight: bold;
	font-family: Trebuchet, Verdana, Arial, sans-serif;
}

for the buttons. Unfortunately, because there is text beneath each button, and there are several dozen buttons on the page, I'm repeating ID tags throughout the page -- not proper, as I understand it. Here's a truncated version of the HTML:

<div id="buttonmenu">
<ul>
<li><a href="1897.html">1897-1960</a></li>

<li>...text here...</li>

</ul>
</div>

<div id="buttonmenu">
<ul>
<li><a href="1961.html">1961-1970</a></li>

<li>...text here...</li>

</ul>
</div>

...and repeat

It actually displays properly in FF, IE6, and Opera, but I'd like to be valid, and I don't know what it looks like in IE7, Mac IE, Safari, or Konq, much less other browsers.

So I tested a change, making the CSS for the buttonmenu a class instead of an ID:

.buttonmenu 

and so forth

and changing the div ID in the HTML to div class:

<div class="buttonmenu">

Problem is, in IE6 the text links in the buttons themselves no longer appear in white, as mandated in the CSS code, but in the overall link colors:

A:link {
   color: #0000ff;
   text-decoration: none;

...and so forth...
}

(I didn't test it in FF or Opera, since the problem showed up in IE6, and the majority of my site's visitors use some version of IE, more's the pity.)

Obviously, I'm running into a problem with the cascading part of CSS, with the original link CSS overriding the buttonmenu style commands. It doesn't happen with the ID tag, but it does with the class tag.

Here is the link to the stylesheet, if you're interested.

Any ideas?

[Dan Schulz]

Get rid of <!-- and --> (HTML comments are not allowed in stylesheets).

[Black Max]

Get rid of <!-- and --> (HTML comments are not allowed in stylesheets).

Dadgum it, I thought I had already gotten rid of those. I must be going blind.

Color me stupid -- I don't have to repeat the div id tags over and over again, if my quick-and-dirty test in IE and Firefox is any judge. Sloppy coding on my part. Since I don't have to repeat the id tags, I don't need to worry about using the id tag over and over. But I'm still curious as to why there's a cascading problem with the link code using the class tag and not the id.

[Dan Schulz]

Because the global link styles are coming after the class styles. Swap the order around so the main link styles come first, followed by the class styles, and it should correct itself.

[Black Max]

Swap the order around so the main link styles come first, followed by the class styles, and it should correct itself.

Believe it or not, that actually crossed my mind...after I already posted this thread. I am still canalized to think in alphabetical (i.e. prehistoric) terms. My biggest question was if it was an IE quirk or something else. Guess not -- the term "cascading" actually means something. I'm still figuring out what it means, I take it.

I'm going to bed. Fixes tomorrow. Thanks, Dan.

(Side note: I got my first piece of hate mail in months today. Wonder if it was a Sitepoint poster? )

[GonzaloGM]

It's because you're "redefining" the link properties. Maybe you can see it like this: when you set a link with a class (a.someclass) you are telling it "set these properties to this links (the one with the class "someclass")", and then when you define de properties for the general links (just a; without any class) you're saying "ok, now set these properties to ALL links", so you override the previously set properties.

[felgall]

The class attributes are more specific and should take precedence over generals styles but IE is known for doing its own thing rather than following the rules.

[Black Max]

Then I can't see the need to ever use an ID tag again. It seems to be redundant, with the class selector doing everything an ID will do without the limitation of being able to be used only once. The much more knowledgeable folks at WestCiv seem to agree....

Of course, I'm coming late to the party with this realization, no doubt, but hey, it's a minor revelation to me.

[Paul O'B]

Then I can't see the need to ever use an ID tag again

ID's are mainly used to divide your page into a logical sections and therefore give extra structure to the page (e.g. Header, Footer, Navigation, mainContent etc). These main elements provide the structure of your page and the id's imply a semantic meaning to that structure.

Of course you could do it all with classes but classes do not carry the same semantics as Id's and do not uniquely identify an element in the way that id's do. If you are using Javascript then you have to use id's to find that element exactly which can't be done with classes as you would find all the classes and not that one unique element.

In practice its just a matter of preference as there is no problem in just using only classes and perhaps advantages in not having specificity issues.

[Black Max]

Good answer, Paul. Using IDs for specific organizational structure and classes for everything else -- basically -- makes sense.