G Cache and CSS

[glengara]

Recently switched to CSS from tables but the cached page seems to be missing some style elements and when viewing the cache source code it seems they've added style tags, eg:

Original -
<p>&copy; Copyright 2001 - 2007 XYZ-Widget.com</p>

G Cache -

<p>&copy; Copyright 2001 - 2007 XYZ-<b style="color:black;background-color:#ffff66">Widget</b>.com</p>

Is this normal behaviour or have we boobed somewhere?

[encyclo]

Google use this method (adding extra markup) to highlight the searched-for text within the displayed cache document. Bear in mind also that the CSS is not cached and is fetched from the originating server when viewing the cache.

[glengara]

Thanks Encyclo, I should have twigged that :-(

Seems it's my gradient background that's missing from the cache and is making things look clunky.

Here's the part in the stylesheet, anything obvious missing?

html, body {
background-color: #12346B;
background-image: url(/images/body_bg.jpg);
background-repeat: repeat-x;
background-position: top;
text-align: center;
}

[encyclo]

There are a few potential issues, any (or none!) of which could cause issues. The first (probably unrelated, but I'll mention it seeing as you posted your CSS) is that you are actually applying the background to both the

html

and

body

elements - although one would naturally cover the other. You should really split the rule and apply the background to just the

body

:

html, body {
background-color: #12346B;
text-align: center;
}

body {
background-image: url(/images/body_bg.jpg);
background-repeat: repeat-x;
background-position: top;
}

Or you may not need to apply the rules to

html

at all, so also try applying everything just to the

body

element.

The second potential pitfall with background images is that sometimes the path to the image doesn't work out of context (ie. via the cache), however usually the

base

element added by Google fixes this.

Thirdly, the extra markup added by Google to the top of the cached page your pushes the page in the cache into quirks mode, rather than standards-compliance mode (if you are using a full doctype [webmasterworld.com]). This can change how the CSS is handled [webmasterworld.com].

The fourth issue, and the most likely one, is if you are using anti-hotlink protection by checking the referrer on your site when serving images. The referrer would be for an URL on Google's site, not yours, so the referer check may be blocking the display of the image. Check your logs to see if you get a 403 error for the graphic to be sure.

[glengara]

AFAIK there's no anti-hotlink protection so I'll check the other possibilities, and again, thanks....