Welcome to WebmasterWorld Guest from 54.226.242.132

Forum Moderators: not2easy

Message Too Old, No Replies

Safari and Chrome issue

the BODY style in my linked sheet is not being used

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

New User

5+ Year Member

joined:May 31, 2009
posts: 32
votes: 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?

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

Junior Member

5+ Year Member

joined:May 26, 2009
posts: 107
votes: 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.

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

New User

5+ Year Member

joined:May 31, 2009
posts: 32
votes: 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?

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

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9068
votes: 4


What does the CSS validator say? What happens if you comment out the @charset declaration?
12:26 am on June 30, 2009 (gmt 0)

New User

5+ Year Member

joined:May 31, 2009
posts: 32
votes: 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.

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

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9068
votes: 4


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]

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

New User

5+ Year Member

joined:May 31, 2009
posts:32
votes: 0


Woohoo! You're a genius! Now, would you mind explaining what just happened? :)
12:43 am on June 30, 2009 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9068
votes: 4


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]

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

New User

5+ Year Member

joined:May 31, 2009
posts:32
votes: 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!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members