Forum Moderators: not2easy

Message Too Old, No Replies

IE7 breaks my CSS when viewing Google cache

Only happens in IE7

         

HarryM

11:19 am on Jul 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have been using the layout below (or variants) for years with no problems, and works in all browsers except IE4 and NS4. But it breaks when using IE7 to view a Google cached page. Presumably this is due to something in the Google top-level markup over riding my CSS which IE7 can't handle. All other browsers I have checked display the cache correctly. I no longer have IE6, but am sure this problem did not occur with it.

The "banner" div should be aligned 2px right within the "outerpage" container div, but in the cache is aligned 2px from the edge of the body.

The "adslead" div should be centered within the "outerpage" container div, but is aligned to the left in the container.

Also if I resize the window when viewing the cache, I have to refresh the page to see it. Again only necessary in IE7.

Any suggestions about what Google markup is causing this will be welcomed, as then maybe I can do something about it!

XHTML (simplified)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>#*$!</title>
<meta name="Description" content="yyy" />
<meta name="Keywords" content="zzz" />
<link href="../includes/css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body class="standard">
<a name="a"></a>
<div class="outerpage"> <!-- container div -->
<div class="banner"> <!-- contains logo and text --> </div>
<div class="clearboth">&nbsp;</div>
<div class="innerpage">
<div class="adslead"> <!-- contains leaderboard ads --> </div>
<div class="panewide">
<div class="panecenter-img"> <!-- contains content --> </div>
<div class="paneright-img"> <!-- contains thumbnails --> </div>
<div class="clearboth">&nbsp;</div>
&nbsp;
</div> <!-- end panewide -->
<div class="paneleft"> <!-- contains indexes --> </div>
<div class="clearboth">&nbsp;</div>
&nbsp;
</div> <!-- end innerpage -->
<div class="footer"> <!-- contains footer stuff --> </div>
<div class="footer2"> <!-- contains footer stuff --> </div>
</div> <!-- end outerpage -->
</body>
</html>

CSS

body.standard{
margin:0;
padding:0;
background-color:#123454;
text-align:center;
}

.outerpage{
width:780px;
margin-left:auto;
margin-right:auto;
padding:2px 0 0 0;
text-align:left;
background-color:#ffffff;
margin-top:4px;
}

.innerpage, .banner{
position:relative;
left:2px;
}

.banner{
width:774px;
min-height:44px;
padding:0;
text-align:left;
background-image:url(DIRECTORY/FILENAME.jpg);
background-position:top right;
background-repeat:no-repeat;
border:1px solid #000000;
}

.innerpage{
width:776px;
padding:4px 0 0 0;
text-align:left;
}

.clearboth{
height:0;
font-size:0;
line-height:0;
margin:0;
padding:0;
clear:both;
}

.adslead {
margin-left:auto;
margin-right:auto;
margin-top:6px;
margin-bottom:6px;
width:728px;
height:90px;
}

.panewide{
width:651px;
float:right;
padding:0;
border:0;
}

.panecenter-img{
width:558px;
float:left;
padding:0;
text-align:center;
}

.paneright-img{
width:90px;
float:right;
padding:0;
border:0;
font:8pt "Arial",sans-serif;
color:#000000;
text-align:center;
}

.paneleft{
width:122px;
float:left;
padding:0;
font:8pt "Arial",sans-serif;
color:#000000;
text-align:left;
}

.footer, .footer2 {
width:772px;
padding:0;
font:8pt "Arial",sans-serif;
color:#666666;
margin:0 0 2px 4px;
}

.footer{
text-align:left;
}

.footer2{
text-align:center;
}

mattur

3:07 pm on Jul 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Google sticks a lump of markup at the top of the cached page, so if your page is in standards mode it will be in quirks mode when viewed as the cached page.

Second time this topic has come up for me recently - is there some benefit to having a perfect Google cache page? Or is just webmasters wanting to check the page is in Google and then see a skewed layout?

pageoneresults

3:49 pm on Jul 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



is there some benefit to having a perfect Google cache page?

I'd have to ask the same question. The only time I view cache is when doing "deep review" type stuff. And then, all I'm concerned about is the "content" in the cache, I could care less what it looks like. Google has always broken many of the sites I visit with their cache insertion code. You'll get JS errors, CSS errors, HTML/XHTML errors, etc.

And I don't think there is really much you can do to override what Google is doing with the cached results. Oh wait, there is...

<meta name="googlebot" content="noarchive">

HarryM

6:13 pm on Jul 3, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks,

Yes, Google sticks markup before my page doctype and that alters the browser mode. But the page breaks only with IE7, so presumably IE7's quirks mode is different.

What seems to be happening is position:relative; is being interpreted as relative to the page, rather than the container div.

If there is something I can do to fix it (easily), then I would prefer to do that rather than live with unprofessional looking caches.

<meta name="googlebot" content="noarchive">

Great suggestion! But I think I must have something similar within some of my pages although I can't find it.

<meta name="googlebot" content="make this page supplementary">

Harry