Fix Google's Cache When Using CSS Absolute Positioning
If you use CSS absolute positioning when designing your site, you may have noticed that when you view the google cache of your site, the google message displays within your design and not above the page.
This happens because the CSS is positioning it exactly where you told it to in relation to the top left corner of the page, not in relation to the google cache message. To fix this problem, wrap the entire content of the page in a div and position it relatively.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tutorial - Fix Google's Cache When Using CSS Absolute Positioning</title>
<style type="text/css">
#wrapper {position:relative;
top:0; left:0;}
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus id
nunc. Aliquam mauris velit, dignissim quis, sodales ut, auctor et, risus. Proin
interdum. Nulla condimentum, libero at fringilla varius, massa diam laoreet nulla,
at vehicula urna justo sed sapien. In non odio et nibh bibendum pulvinar. Nullam
adipiscing, wisi ut suscipit tincidunt, erat purus consectetuer ipsum, id bibendum
metus justo vitae odio. Proin imperdiet tincidunt nisl. Aliquam erat volutpat.
Morbi enim. Proin viverra lorem nec metus. Phasellus sed augue. Curabitur commodo,
enim convallis tempus hendrerit, ligula dui placerat massa, vel scelerisque augue
sapien convallis lectus. Etiam aliquet. Donec vel nulla.</p>
</div>
</body>
</html>
Your site will now appear below the google cache message and will have no other effect on the rest of your site!
