|
Subject:
|
CSS Parse Error
|
|
Posted By:
|
DJB1954
|
Post Date:
|
8/18/2006 1:31:05 PM
|
I recently bought Professional CSS from WROX (and excellent it is). I am trying to implement a technique from Chapter 3 and am getting a strange CSS Parse error.
The rule below:
div#body {
margin:auto;
width: 710px;
}
generates the following parse error in W3C CSS validator and the rule settings do not take effect in my HTML, although other rules from same stylesheet do.
* Line: 19 Context : CSS
Parse Error - div#body { margin:auto; width: 710px; }
Can anybody see the problem?
Many thanks,
Denis
|
|
Reply By:
|
meow
|
Reply Date:
|
8/18/2006 1:47:17 PM
|
Hi! 
As you can see if you validate that single rule, there is nothing wrong with it. Possibly it isn't a good idea to use an element name as the name of an id, but that's beside the point.
http://jigsaw.w3.org/css-validator/validator?text=div%23body+%7B%0D%0A++++margin%3Aauto%3B%0D%0A++++width%3A+710px%3B%0D%0A%7D%0D%0A&usermedium=all
So, could you please post the URL to the whole style sheet instead?
--
http://yupapa.com
|
|
Reply By:
|
DJB1954
|
Reply Date:
|
8/18/2006 2:36:02 PM
|
It's a local file on my Mac but here's the stylesheet
Many thanks,
Denis
PS I agree with you re using an element name but I was trying to understand teh basic technique so I just mimicked the book. Incidentally, I have tried changing the class name but to no effect.
Regards,
Denis
CSS
/* this CSS comes from the beginning of the Blogger example in Chapter 3 of Professional CSS and allows main and sidebar divs to swap over left and right*/
/* this following div constrains everything to a certain width and provides room for the two contaimed <divs> to sit side by side. Auto property for margins centers the content*/
/*The CSS Validator at W3C produces the following error message: To work as intended, your CSS style sheet needs a correct document parse tree. This means you should use valid HTML.
Errors
URI : file://localhost/FlexiSidebar.css
* Line: 13 Context : CSS
Parse Error - div#body { margin: auto; width: 710px; font-size: small; font-family: verdana tahoma arial,sans-serif; } */
div#body {
margin:auto;
width: 710px;
}
/* default setting for sidebar - will not display and will be removed from flow unless a class is specified in the body tag All the CSS from here to end of file works allowing me to switch positions between Main and Sidebar left/right/no sidebar... However the rule above is not styling Body. Why not?*/
div#sidebar {
display: none;
}
/* and here is the styling if such a class is specified, constraining #main to a certain width to make room alongside for the sidebar*/
body.ms div#main,
body.sm div#main {
width: 490px; /* redesign this to ems*/
}
/* similarly setting the styling for #sidebar in such a circumstance*/
body.ms div#sidebar,
body.sm div#sidebar {
display: block; /* and this counteracts the display: none default style for the sidebar above*/
width: 200px; /* redesign this to ems */
}
/* having set up the styling the next two rules position sidebar left or right */
body.ms div#main,
body.sm div#sidebar {
float: left;
}
body.sm div#main,
body.ms div#sidebar {
float: right;
}
|
|
Reply By:
|
richard.york
|
Reply Date:
|
8/18/2006 3:25:37 PM
|
I use element names as class/id names like that quite a bit (the body name, at least). I've never had a problem with doing that.
Regards,
Rich
--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results
http://www.catb.org/~esr/faqs/smart-questions.html
|
|
Reply By:
|
richard.york
|
Reply Date:
|
8/18/2006 3:30:55 PM
|
That style sheet validates for me, BTW.
Regards,
Rich
--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results
http://www.catb.org/~esr/faqs/smart-questions.html
|
|
Reply By:
|
DJB1954
|
Reply Date:
|
8/18/2006 4:29:03 PM
|
I assumed it would validate as I admit that it's actually yours, but what I can't understand is why it doesn't validate and that first rule doesn't take effect.
Regards,
Denis
|
|
Reply By:
|
meow
|
Reply Date:
|
8/18/2006 4:56:46 PM
|
It can be something else. An illagal character for instance. Put it on a web server and see what happens.
--
http://yupapa.com
|
