CSS Firefox and IE position:relative;

I am having some trouble in getting my site to render correctly in IE. Firefox and other browsers display the site perfectly fine. However IE seems to mess up.

Firefox positions the div in the right place however IE seems to center it.

Here's my code:

index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HomePage ¦ DarklingFlair :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<div id="wrapper"><!-- this is the start of the site
DarklingFlair Logo-->
<div class="imgbehind"></div>
<img class="logo" src="images/logo001final.png" alt="DarklingFlair Logo">
<!-- DarklingFlair main content begin-->
<div class="pagecontenttop">
</div>
<div class="pagecontentmiddle">
<div class="accross"></div>
<div class="pagecontentmiddlebox">
<div class="windowboxtitle">
Welcome
</div>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
Page in development.<br>
</div
<!--Main content end--></div>
</body>
</html>

style.css


body{
text-align:center;
background-color:#500000;
}#wrapper{
position:relative;
width:835px;
text-align:center;
margin:-15px auto;
background-color:#FFFFFF;
}
.pagecontenttop{
position:absolute;
left:0px;
top:60px;
width:830px;
height:72px;
z-index:1;
background-image: url('images/maintopblack.png');
background-position: top left;
background-repeat: repeat-x;
border-style:double;
border-width:0px 3px 0px 3px;
border-color:#000000 #000000 #000000 #000000;
}
.pagecontentmiddle{
position:absolute;
left:0px;
top:130px;
width:830px;
z-index:1;
background-color:#000000;
border-style:double;
border-width:0px 3px 0px 3px;
border-color:#000000 #000000 #000000 #000000;
}
.pagecontentmiddlebox{
position:relative;
left:300px;
width:500px;
z-index:2;
background-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#A40000 #A40000 #A40000 #A40000;
}
.windowboxtitle{
position:relative;
width:100%;
height:20px;
z-index:1;
background-color:#A40000;
background-image: url('images/windowtitlebar.jpg');
background-repeat: repeat-x;
}
img.logo{
position:absolute;
left:0px;
top:0px;
z-index:1;
border-style:solid;
border-width:0px 3px 0px 3px;
border-color:#000000 #000000 #000000 #000000;
}
.imgbehind{
position:absolute;
left:0px;
top:0px;
width:835px;
height:130px;
background-color:#975233;
}.accross{
width:830px;
height:38px;
z-index:3;
background-image: url('images/across.png');
background-repeat: repeat-x;
}

I just can't figure out what I'm doing wrong. Any ideas?

CSS Firefox and IE position:relative;

Problems. :(

Ben878

your_store

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week