I am having trouble getting IE8 to recognize the margins, I have a logo I want vertically centered in a header div with a left margin but it seems like it is ignored but displays fine in Chrome, Firefox, and Safari. Also I have a Login/Signup div that should be in the top right of the header div with some top and right margins but they are being ignored also. I will include the JSFiddle link along with the code in this post.
Here is what it looks like in IE
Here is what it is supposed to look like
JSFiddle
http://jsfiddle.net/ARhRt/
<html>
<head>
<title>
TESTING
</title>
<LINK href="CLLProfile.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<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="navigation">
<form id ="categoryForm" action="test1.php" method="post">
<div id="categorydiv">
<select name="thing" onChange="getSub(this.value)">
<option value=0>Select Main Category<?=$options?>
</select> </div>
<div id="subcategorydiv">
<select name="subCats" >
<option>Select Sub Category</option>
</select></div>
<input type="submit" value="Submit" />
</form>
</div>
<div class="content">
Here is the CONTENT
<div class="profileInfo">
PROFILE INFO
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body{
background: gainsboro;
text-align: center;
}
.container{
padding-top: 20px;
background: gold;
width: 900px;
height: 1300px;
margin: 0 auto;
}
.content {
background: #aad500;
width: 800px;
height: 1000px;
margin: 0 auto;
border: black solid medium;
text-align: left;
}
#header {
width: 800px;
height: 150px;
margin: 0 auto;
background: #aad500;
border: black solid medium;
text-align: left;
}
#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: 500px;
}
.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;
text-align: right;
}
.login a:hover{
color: green;
}
.navigation {
background: green;
width: 800px;
height: 50px;
margin: 0 auto;
border: black solid medium;
text-align: left;
}
.navigation select{
float: left;
margin-top: 15px;
margin-left: 10px;
}
.navigation input {
margin-left: 10px;
margin-top: 15px;
}
.search #Submit{
float: right;
position: absolute;
}
#wrapper{
width: 100%;
margin-left: auto;
margin-right: auto;
}
Here is what I did wrong for people that may experience the same issue I forgot to add the !DOCTYPE A user suggested this and the post was deleted for some reason.
What I left off at beginning of DOC: