Parsing Errors

Forum Moderators: not2easy

Message Too Old, No Replies

Parsing Errors

soccrates

2:29 pm on Sep 17, 2012 (gmt 0)

I am converting my site from XHTML to HTML 5. I was checking my css and have a couple of questions:
1. my template came with a charset declaration at the top of the css and I wonder if that is correct. If it is what would be the correct charset for css on an HTML 5 site? I have UTF-8 on the html pages. I hope that is correct as well.
2. I am getting parsing errors on anything with a #: some examples: Parse Error [|#mainContent *|a:hover]
Parse Error [|#mainContent *|a]
Parse Error [|#mainContent *|td]
Parse Error [|#mainContent *|li]
Parse Error [|#mainContent *|p]
Parse Error [|#mainContent *|blockquote]

and anything with a . some examples:
Parse Error [|.quote]
Parse Error [|.imageLeft]
Parse Error [|.imageRight]

Thanks for the help.

not2easy

4:25 pm on Sep 17, 2012 (gmt 0)

Sorry but no one can guess what is causing these errors because we can't see what #mainContent contains or how you are using it in the html. Same for the .quote class.

lucy24

5:05 pm on Sep 17, 2012 (gmt 0)

css and (x)html should have nothing to do with each other. Does the charset declaration come inside the stylesheet (whether internal or external)? It doesn't belong there-- and should be irrelevant because what have you got in your stylesheet that isn't vanilla ASCII? (Please don't say id's. Change them, if so.)

What do all those | pipes mean? Or are they just artifacts from cut-and-paste? For that matter, who's saying you have a parse error? I don't think that's a wording the w3c validator uses. Unless, ahem, there exists a category of error I've never gotten. Which I doubt very much :)

soccrates

6:11 pm on Sep 17, 2012 (gmt 0)

This is how the container works: <body> <div id="container">
 and <div id="mainContent"> which contains all the text for the page. The template I am using came with a charset in the external css stylesheet and created the structure I am using.

It's the css validator that is telling me that I have parsing errors. As you can probably guess I am very green with css. So based on what you are saying I guess these parsing errors are on div id's and I need to eliminate them? If you can point me in the direction of what I need to do or where there is some information I read that will help I would appreciate it.

not2easy

7:11 pm on Sep 17, 2012 (gmt 0)

No, you don't need to eliminate the id's, I think lucy24 was referring to eliminating any reference to charset in the actual .css file, that file should not contain any kind of headers or meta data. There may be issues with the .css file, if it has a charset or if it contains those | pipe characters you showed in the OP.

soccrates

7:21 pm on Sep 17, 2012 (gmt 0)

Thanks. I will get rid of those and see what happens. The problem may be in the pipes.

not2easy

7:34 pm on Sep 17, 2012 (gmt 0)

I thought those were only the format from your error report, if the * asterisks are in there, take those out too. The .css file should only be plain text, without <coding, pipes, charsets and asterisks. It sounds like your template came with a sample css file that you were supposed to edit and customize.

soccrates

7:38 pm on Sep 17, 2012 (gmt 0)

Brilliant! I have validated all my css except for two specifications:
Parse Error [|#leftNav *|li *|a]
and
main.css Parse Error .css*|#socialmedia { }.

I don't know how these should look.

Can you help?

Thanks.

lucy24

10:35 pm on Sep 17, 2012 (gmt 0)

Well, you'll have to show the css for those two items. Does it say what's wrong, beyond the generic "parse error"? Are you using the w3c validator? Normally it says exactly what it doesn't like.

Are the pipes in your actual CSS or do they show up when you cut and paste?

Oh, hey, look what I found [w3.org] in a part of the CSS specs I normally don't look at:

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

1. An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)
2. BOM and/or @charset (see below)
3. <link charset=""> or other metadata from the linking mechanism (if any)
4. charset of referring style sheet or document (if any)
5. Assume UTF-8

Authors using an @charset rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the @charset rule.)

(A byte order mark is never appropriate, but never mind that: It's a pretty old standard by now.)

Apostrophes have a function in CSS, but their function is equivalent to
:: drumroll ::
leaving it out entirely. So they can't be considered necessary. Except, oops, in /* comment lines */

The only place I've ever seen pipes is in the rare construction
[att|=val]
(Section 5.8.1 of CSS 2.1 spec, for the insatiably curious among you.)

soccrates

1:00 am on Sep 18, 2012 (gmt 0)

Lucy,

I figured out one of the errors, so only one more to go.

I am using the W3cvalidator. My CSS is in a separate file and the parsing errors that I noted above are from the W3cValidator.

This is the css from the css file:

main.css*|#socialmedia {
}

* #socialmedia *|ul *|li {
display: inline;
margin-left: 5px;
}

* socialmedia *|img {
border-style: none;

}

It is the first line that is a problem. I looked to see if their was further explanation about the error but did not find any. I don't know enough about CSS to figure this out yet so any insights will help. Thanks.

lucy24

1:55 am on Sep 18, 2012 (gmt 0)

Do you realize that you have not yet explained where all those pipes | are coming from?

Try putting in the CSS with no asterisks at all. Surely you just mean, for example,

socialmedia img

Or

#socialmedia img

if that's supposed to be an id. (Careful! Class and id are different things. It is probably not a good idea to recycle the names.)

Images don't have borders anyway, though some browser might choose to give them padding or margins. If they are ever used as links, play it safe by tossing in a {text-decoration: none} to keep them from getting outlined. (I think only Camino does this-- and I actually like the effect on gallery pages!)

soccrates

9:40 am on Sep 18, 2012 (gmt 0)

I do not know where the pipes came from. I have hardly touched the css since I purchased the template and I do not know much about css. Wish I could add more to the discussion, but I really do not know.

I will give your suggestion a try. Thanks.

soccrates

11:46 am on Sep 18, 2012 (gmt 0)

Taking out the asterisk and a pipe worked and the css validated!

You all have made a huge difference for this newbie and I am very grateful.

alt131

6:02 pm on Sep 19, 2012 (gmt 0)

Hi soccrates, and welcome to css :), Good job on validating!

I suspect the same as not2easy - the pipes were placeholders in the template - although not very helpful. However I suggest take care when removing the asterisks. The "first-line" you referred to is the selector [w3.org], and asterisk is a Universal selector (scroll down the page, it is the first selector in the table)>

So [|#leftNav *|li *|a] might be a placeholder for a rule to apply the styles to
#leftNav * {}
which means everything inside an element with id="leftNav"

So just check your page after editing the css file to make sure the styles are being applied to all the elements you expected/want.

soccrates

6:39 pm on Sep 19, 2012 (gmt 0)

Thanks. So far I have taken out only the one asterisk I mentioned. I realize how much I do not know about HTML5 and CSS3 and have purchased a couple of books to start learning.

At least my site is working and on most browsers so I feel that I on fairly solid ground and can start looking at making further improvement from a good place.

Parsing Errors

soccrates

not2easy

lucy24

soccrates

not2easy

soccrates

not2easy

soccrates

lucy24

soccrates

lucy24

soccrates

soccrates

alt131

soccrates

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week