Safari and Chrome issue

Forum Moderators: not2easy

Message Too Old, No Replies

Safari and Chrome issue

the BODY style in my linked sheet is not being used

sdguy

7:14 pm on Jun 29, 2009 (gmt 0)

I have a linked sheet that includes a number of styles, all of which are being used properly by IE and FF, but for some reason Chrome and Safari are ignoring the BODY tag. The weird thing is that they're honoring other styles in the sheet, like the header stuff, but just ignoring some elements in the BODY tag.

@charset "utf-8";
body {
font: 12px Arial, Helvetica, sans-serif;
background: #6f448a;
margin: 0;
padding: 0;
text-align: center;
color: #333333;
}
body a {
color: #e11d17;
text-decoration: none;
font-weight: normal;
}

body a:hover{
color: #FFFFFF;
background: #e11d17;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

With the above code my links render as red(good) but my page background color defaults to white(instead of purple). This is driving me nutty, any ideas?

jameshopkins

10:46 pm on Jun 29, 2009 (gmt 0)

Although you don't specifically mention it, I presume you're embedding the above styles in the document, as opposed to linking to them in an external stylesheet?

The reason I am making this presumption is that the charset at-rule is invalid if *embedded* along with selectors, in the document. As 4.4 mentions [w3.org], "When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document." To reiterate, the charset at-rule must not be placed along with any other embedded styles.

There is in fact a Webkit bug ticket [bugs.webkit.org] which relates to this issue, however, please note that there are no specific error parsing rules related to the incorrect placement of the charset at-rule.

sdguy

11:07 pm on Jun 29, 2009 (gmt 0)

Sorry about that, those styles are in an external stylesheet, not embedded in the page.

The thing that's killing me is why are the body a and body a:hover styles working fine but the body style is being completely ignored?

encyclo

12:18 am on Jun 30, 2009 (gmt 0)

What does the CSS validator say? What happens if you comment out the @charset declaration?

sdguy

12:26 am on Jun 30, 2009 (gmt 0)

The css validator only give me one error about "Attribute "XMLNS" is not a valid attribute" for <html xmlns="http://www.w3.org/1999/xhtml">

I tried commenting out the @charset, no change.

encyclo

12:36 am on Jun 30, 2009 (gmt 0)

If you add an empty rule such as

b {}

between the @charset line and the initial body rule, does that change things?

Is the @charset on the very first line of the CSS file? If not, and you place it at the very top before any other content (including white-space), does that help?

See here for charset bug in Safari: [w3.org...]

[edited by: encyclo at 12:40 am (utc) on June 30, 2009]

sdguy

12:40 am on Jun 30, 2009 (gmt 0)

Woohoo! You're a genius! Now, would you mind explaining what just happened? :)

encyclo

12:43 am on Jun 30, 2009 (gmt 0)

would you mind explaining what just happened?

No idea ;) But if the CSS validates but the browser is ignoring the first rule, I simply tried making it the second rule instead :)

The empty rule now being ignored is *not* a long-term solution, if the charset bug above is not the culprit, you need to keep looking.

[edited by: encyclo at 12:45 am (utc) on June 30, 2009]

sdguy

12:45 am on Jun 30, 2009 (gmt 0)

Ok, so there were a few spaces before the @charset that were mucking it up for Safari and Chrome. All fixed now, thanks for the help!