Sign in to follow this  
Thevenin

[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 this post


Link to post
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 this post


Link to post
Share on other sites
Thevenin    270
Quote:
Original post by Mathachew
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/


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

Quote:
Original post by Mathachew
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


I don't understand.

Share this post


Link to post
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;
}

Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
Thevenin    270
Quote:
Original post by Mathachew
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.

*** 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 this post


Link to post
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 this post


Link to post
Share on other sites
tstrimp    1798
Quote:
Original post by Thevenin
Thanks 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]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this