[web] XHTML 'class' vs 'id', and why this doesn't work.
Author
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?
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
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
Author
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.
What I meant was, change this
to 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;}
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.
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.
/* 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.
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.
I tested using both under firefox using the css editor and they both work fine.
Author
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++;
Some more info on CSS Selectors.
These are some other ways of assigning styles rather then just using elements, classes and ids.
These are some other ways of assigning styles rather then just using elements, classes and ids.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
