CSS: class vs id behaviour?

I have a page http://sweetskies.fruitwerks.us/breeders.php that works great, but I have added additional instances of the listing code... looks ok, but it doesn’t validate. I tried changing the id statements to class statments and making the appropriate css modifications, but I ended up with the pictures in a single column. Tried a few variations of the CSS with no luck.

Any ideas?

* page is XHTML Strict.

Looks like it’s working now, no? The only CSS validation error that I see is a margin-top without units, and the XHTML validates as Strict. Maybe you’ve fixed it since you posted?

yeah I use wc3.. if I do not wrap a table around them, the pics will overflow off the lighter colored div. This way it looks the same in IE and FF.. I originally used the table correctly, but it was not working out so well, long time ago, don’t remember the details.

So you are saying there should be no visible difference between a class and id with the same declarations?

Thanks!

There is no difference between ID and classnames. Classnames are for multiple use, ID is for a unique identifier. I suppose internally they are stored differently, items with classnames are put into an array ( myclass[0], myclass[1] etc) so in DOM traversal you need to access them in this manner, which can be a bit awkward in Javascript.

Good info, but we are talking about CSS and how id’s and classes are rendered

Quote from: fruitwerks at Feb 23, 2008, 12:03 AM

Good info, but we are talking about CSS and how id’s and classes are rendered

So is Susan...

They are rendered the same. The only difference is that you can have multiple items with the same classname, but only one with the same ID.

well I must be doing something wrong with my syntax but it works for now, so it goes to the lower end of the list.

Thanks!

There is one way in which classes and ids are treated differently and that is when you are talking about Specificity and the cascade. Here are some extracts from HTMLDog.com:

Specificity

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

and here is the part that talks about the fact that IDs have a 10fold higher specificity than classes:

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value.

* p has a specificity of 1 (1 HTML selector)
* div p has a specificity of 2 (2 HTML selectors; 1+1)
* .tree has a specificity of 10 (1 class selector)
* div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
* #baobab has a specificity of 100 (1 id selector)
* body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.

That being what it is though, rendering is always the same it is only whether it WILL BE rendered or not and not HOW it will be rendered.

Cheers,

Jay

Here are some resources:

http://snook.ca/archives/html_and_css/understanding_c/
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.rebelinblue.com/specificity.php

Indeed order vs. specificiy is where CSS rules get wacky, and why I always try to be as detailed as possible in my rules so I don’t need to think about that (it makes my head hurt).