CSS skin or Content (semantic markup question)

I'm in the middle of doing a site conversion to xHTML and CSS using semantic markup,

Lets say I have something which needs a rating displayed in stars...

E.g. if the current html is :



I'd like...



And do some image replacement on this when skinning the site... what do you think?

-D

hmm... that's a tough call. I'd probably just use the img tags.
Talking semantics the argument would be that star images aren't a heading and thus shouldn't use the h2 tag.

But I can see how your alternative might be pretty cool… especially if you make it so that is says "4 Stars" when images are turned off. When it says "4 Stars" it does seem appropriate to use the h2 tag.

In any case, I'd like to see how you do the image replacement on the h2 tag. Maybe post the site up here when you finish the conversion.

Good luck on your conversion.

Thanks dude.

I eventually went with the image replacement technique for a couple of reasons.

Firstly like you say the title & content now display 4 Stars instead of star star star star when the page fails gracefully.

However due to the general image replacement problem when images are turned off the text content does not show. I've looked at all the image replacement options and choose the text indent option. (You set the text-indent to a very high negative value)

Secondly we have an affiliate system and although at the moment no affiliates have said "can you change the stars on our pages to these instead" as yet, I'm sure that they will, and if/when they do replacing them in their specific CSS skin file will be better than writing new XHTML markup for them.

-D