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

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/v...usermedium=all

So, could you please post the URL to the whole style sheet instead?

--
http://yupapa.com

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;
}

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

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

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

It can be something else. An illagal character for instance. Put it on a web server and see what happens.

--
http://yupapa.com