[web] XHTML 'class' vs 'id', and why this doesn't work.

Recommended Posts

Thevenin    270
I don't understand why this behavior is occuring with my website; when I change 'class' to 'id' the page gets displayed correctly, but doesn't validate to XHTML due to multiple 'id's of the same reference. However, if I leave it as 'class' the page doesn't display correctly. http://www.Frostwinds.com/Monsters The snake is using 'class' and so its subsequently not being displayed properly, however, everything else uses 'id'. Any ideas why this is occuring?

Share on other sites
Mathachew    352
Well, I can't answer the class vs id question, but for your rounded corners, there is a JS solution that requires no images: http://www.html.it/

The only drawback I've seen to this is that sometimes, the rounded corners do not appear immediately if the pages requires several moments to load.

Edit: Try putting #Content in front of the class attributes. I've found that sometimes class styles don't work when they are inside of an ID tag unless they are preceded by the ID, such as #Content .standardbox

Share on other sites
Thevenin    270
Quote:
 Original post by MathachewWell, I can't answer the class vs id question, but for your rounded corners, there is a JS solution that requires no images: http://www.html.it/

I have no problems using images. And I absolutely hate javascript.

Quote:
 Original post by MathachewEdit: Try putting #Content in front of the class attributes. I've found that sometimes class styles don't work when they are inside of an ID tag unless they are preceded by the ID, such as #Content .standardbox

I don't understand.

Share on other sites
Mathachew    352
What I meant was, change this

#Content standardbox{	background-color : #e1ebf5;	width : 575px;	margin-left:auto;	margin-right:auto;}

to this

#Content .standardbox{	background-color: #e1ebf5;	width: 575px;	margin: auto;}

Thevenin    270

Share on other sites
Mathachew    352
Looking at your current code, you have #standardbox listed twice in your CSS. It doesn't seem you are fully understanding how to use classes in CSS.

/* Not a valid CSS Class */standardbox {}/* Valid CSS Class */.standardbox {}/* What you currently have */#standardbox {}/* What you need to have */#Content .standardbox {}

Does it make sense? Classes in CSS are preceded with . while ID's are preceded with #

Not specifying either will have the CSS assume you are applying the style to an HTML tag, such as body, p, div, br, hr, h1, h2, etc.

Share on other sites
tstrimp    1798
Either "#Content .standardbox" or just .standardbox should work in your css. I assume you want the latter unless you only want that style applied if it's inside of a #content area.

I tested using both under firefox using the css editor and they both work fine.

Share on other sites
Thevenin    270
Quote:
 Original post by MathachewLooking at your current code, you have #standardbox listed twice in your CSS. It doesn't seem you are fully understanding how to use classes in CSS.*** Source Snippet Removed ***Does it make sense? Classes in CSS are preceded with . while ID's are preceded with #

Never knew that, thanks. This fixed the problem too. [smile]
ratings++;

Share on other sites
Mathachew    352
wohoo! I'm here to help! [smile]

Share on other sites
tstrimp    1798
These are some other ways of assigning styles rather then just using elements, classes and ids.

Share on other sites
Thevenin    270
Thanks tstrimp, and, btw, my project still isn't dead yet... [rolleyes]

Then again, it has only been a month since your prediction from my GD lounge journal purposal.

Share on other sites
tstrimp    1798
Quote:
 Original post by TheveninThanks tshrimp, and, btw, my project still isn't dead yet... [rolleyes]Then again, it has only been a month since your prediction from my GD lounge journal purposal.

I never said it would be! Just that there is still time. [wink]

Create an account

Register a new account