I am starting to layout a website and I am having trouble in firefox mostly and sometimes safari depending on the conditions, for example in safari if I load the page from typing it in the address bar it will display with the search div in the middle of the header border but if I highlight the address bar again and I hit enter it displays correctly, if I click refresh after everything is displayed correctly it will result in the search box being in the middle of the header border and also the login div disappear. Everything works great in chrome. In firefox the submit button is below the text input field no matter what I do it seems to stay there. My code is here http://jsfiddle.net/ES2Mz/ And below:
<html>
<head>
<title>
TESTING!
</title>
<LINK href="CLLProfile.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div id="header">
<img src="http://www.placekitten.com/400/100">
<div class="login">
<a href="http://www.signup.com">Sign Up</a> <a href="http://www.login.com">Login</a>
</div>
<div class="search">
<form id ="search" action="" method="post" enctype="multipart/form-data">
<label>Search:</label>
<input type="text" name="searchBox" id="searchBox" /> <input type="submit" id="Submit" value="Submit" />
</form>
</div>
</div>
<div class="content">
Here is the CONTENT
<div class="profileInfo">
PROFILE INFO
</div>
</div>
</div>
</body>
</html>
CSS
body{
background: gainsboro;
}
.container{
padding-top: 20px;
background: gold;
width: 900px;
height: 1300px;
margin: 0 auto;
}
.content {
background: #aad500;
width: 800px;
height: 1100px;
margin: 0 auto;
border: black solid medium;
}
#header {
width: 800px;
height: 150px;
margin: 0 auto;
background: #aad500;
border: black solid medium;
}
#header img{
position: relative;
left: 50px;
top: 25px;
}
.login {
width: 350px;
height: 35px;
float: right;
background: #aad500;
}
.search{
background: #aad500;
color: white;
width: 250px;
height: 20px;
position: relative;
margin-top: 10px;
margin-left: 550px;
}
.profileInfo{
background: whitesmoke;
width: 750px;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.login a{
float: right;
margin-left: 10px;
margin-right: 20px;
margin-top: 5px;
font-size: large;
color: whitesmoke;
}
I solved it I forgot to add the
<!DOCTYPE>