DIV moves down when page is loaded in google chrome, but is where it
should be when page is refreshed
The site I'm working on has a navigation menu in a div. When you go to the
index page everything looks fine, but when you click one of the links the
nav links move down. Refresh the page and it's back where it should be. It
doesn't happen every time, but has happened at some point with all the
links. It only seems to be happening in Google Chrome. I have tried it
several times in IE and they don't move.
www.realestatephoto.rosemariecarter.com
The code on index (I'm using php so the code is the same on all the pages.
header.php)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<link
href='http://fonts.googleapis.com/css?family=Bilbo+Swash+Caps|Port+Lligat+Slab'
rel='stylesheet' type='text/css'>
<title>Rose Marie Carter Real Estate Photography</title>
</head>
<body>
<div class="center">
<div id="links">
<h1><a href="index.php">Home</a> <a href="contact.php">Contact</a>
<a href="prices.php">Prices</a> <a
href="gallery.php">Gallery</a> <a href="why_professional.php">Why
Professional?</a></h1>
</div>
<img src="header.jpg" />
<br />
<br />
Hello everyone!
<br />
<br />
</div>
</body>
</html>
the css for the DIVs used:
.center {
margin-left:auto;
margin-right:auto;
width:65%;
}
#links {
position: absolute;
top: 520px;
text-indent: 1em;
white-space: pre;
}
It's been a while sense I've coded a site, so it could be something simple
I overlooked. If it is I'm sorry. Thanks for any help
No comments:
Post a Comment