Let me put this simply. On a page with 5 textboxes, when you refresh the page, Chrome is messing up the style of the page, so that the navigation bar is moving down.
However, if you take out one of the textboxes, then it will always render the style correctly:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="index.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,600' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="images/favicon.png" />
<title>Improper Style</title>
</head>
<body>
<header>
<img src="images/placeholder.jpg" height="50px" />
<div id="navbar">
<ul>
<li>
<a href="">My Profile</a>
</li>
<li>
<a href="">Shopping Cart</a>
</li>
<li>
<a href="">Logout</a>
</li>
</ul>
</div>
</header>
<div id="logo" >
<a href="index.html"><h1>Generic Name</h1></a>
<h2>This page has improper format (on refresh)</h2>
</div>
<div id="navbar2">
<ul>
<li id="newCustomer">
<a href="proper.html">Click for page with <br /> correct format</a>
</li>
<li>
<a href="">Shirting</a>
</li>
<li>
<a href="">Trousers</a>
</li>
<li>
<a href="">Blog</a>
</li>
</ul>
</div>
<div id="main">
<form id="signup" method="post" >
<div id="signCol1">
<ul>
<li>
<strong>Email</strong>
</li>
<li>
<input type="email" size="25" maxlength="100" name="email" />
</li>
</ul>
</div>
<div id="signCol2">
<ul>
<li>
<strong>Choose password</strong>
</li>
<li>
<input type="password" size="25" maxlength="100" name="password" />
</li>
</ul>
</div>
<div id="signCol3">
<ul>
<li>
<strong>Repeat password</strong>
</li>
<li>
<input type="password" size="25" maxlength="100" name="pwconfirm" />
</li>
</ul>
</div>
<div id="signCol4">
<ul>
<li>
<strong>First Name</strong>
</li>
<li>
<input type="text" size="25" maxlength="100" name="fname" />
</li>
</ul>
</div>
<div id="signCol5">
<ul>
<li>
<strong>Last Name</strong>
</li>
<li>
<input type="text" size="25" maxlength="100" name="lname" />
</li>
</ul>
</div>
<input type="submit" value="Next Step" />
</form>
</div>
</body>
</html>
CSS:
html {
overflow-x: hidden;
}
body {
font-size: 16pt;
}
#main {
margin-left: auto;
margin-right: auto;
}
header {
background-color: rgb(59,0,0);
width: 100%;
}
#navbar {
float: right;
}
#navbar ul {
}
#navbar ul li {
list-style: none;
display: inline-block;
padding-right: 20px;
}
#navbar ul li a {
text-decoration: none;
color: blue;
}
#navbar2 {
float: left;
position: relative;
top: 10%;
left: 3%;
font-size: 16pt;
line-height: 300%;
z-index: 5;
}
#navbar2 ul {
list-style: none;
}
#navbar2 ul li a {
text-decoration: none;
color: rgb(100,0,0);
}
#logo {
text-align: center;
clear: right;
margin-left: auto;
margin-right: auto;
position: relative;
top: 5px;
left: 35px;
font-family: bigmouth-reg;
font-size: 20pt;
}
a img {
border: none;
}
#signup {
position: relative;
left: 10%;
}
#signup div {
/*float: left;*/
padding-left: 5%;
padding-right: 5%;
display: inline-block;
text-align: center;
}
#signup div ul {
margin-left: 0;
padding: 0;
}
#signup div ul li {
list-style: none;
padding: 0;
margin-left: 0;
}
#signCol4 {
margin-left: 15%;
}
#newCustomer {
line-height: 120%;
}
#mainVid {
text-align: center;
position: relative;
top: 10%;
right: 5%;
}
#products {
width: 65%;
margin-left: auto;
margin-right: auto;
position: relative;
/*left:5%;*/
}
#products ul {
list-style: none;
float: left;
height: 400px;
}
#products ul li {
width: 200px;
text-align: center;
line-height: 150%;
}
#products ul li img {
height: 300px;
width: 190px;
}
#productHeader {
width: 80%;
color: rgb(59,0,0);
text-align: center;
font-size: 32pt;
position: relative;
left: 5%;
}
.listHeader {
text-align: center;
width: 100%;
position: relative;
/*right:5%;*/
left: 3%;
}
.listHeader hr {
width: 75%;
clear: right;
}
I figured I'd just post the correct answer, as given by https://stackoverflow.com/users/1401973/dmi3y.
I just put the image below the the div for the navbar and that seems to have smoothed out the issue.
Thanks again to dmi3y.