Welcome to WebmasterWorld Guest from 54.163.100.58

Forum Moderators: not2easy

CSS Firefox and IE position:relative;

Problems. :(

   
10:28 pm on Jan 13, 2008 (gmt 0)

5+ Year Member



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?

4:40 pm on Jan 14, 2008 (gmt 0)

10+ Year Member



IE is centering the div because of :

body { text-align: center; }

Include that snippet on #wrapper instead of body.

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month