When you’ve completed your x/html page which is using CSS div tags/classes, you may have a tag or class that doesn’t appear to be functioning properly. Maybe an image isn’t centred, maybe it doesn’t have a border, or maybe the font is not bold - Basically whatever elements you added to that rule are not displaying properly. So what to do?
Firstly, take a sanity check. Has the last set of rules been completed? Do they all have semi-colons at the end and a closing curly bracket? Look at this example:
#div1{
element: option;
element: option
element: option;
#div2{
element: option;
element: option;
element: option;
}
Div1 element two is missing the closing semi-colon. Also the div does not have a curly bracket ( } ) so div2 won’t function on your page. To fix this you need the semi-colon and the closing bracket so it will look like this:
#div1{
element: option;
element: option;
element: option;
}
#div2{
element: option;
element: option;
element: option;
}
Pretty basic stuff. So whats wrong with this following example?
#1stdivbox{
element: option;
element: option;
element: option;
}
#div2{
element: option;
element: option;
element: option;
}
Semi-colons and curly brackets are both present so all should be good. Actually, you can’t start a div tag with a number. Basically its seen as a dimension and therefore doesn’t function.
In CSS1, an id name could start with a digit (”#55ft”), unless it was a dimension (”#55in”). In CSS2, such ids are parsed as unknown dimensions (to allow for future additions of new units) To make “.1stdiv” a valid id, CSS2 requires the first digit to be escaped (”#\31stdiv”) - W3C Explaining why starting a tag with a number may not work how you want it to.
If you’ve done these quick sanity checks and its not working run it through the W3C CSS validator and see what errors come out. Its always best to use validated xhtml and css as it will cause less problems and helps ease cross browser compatibility. It will also help with parent/child issues which can get quite complicated. Keep your CSS simple and logical. Good luck!