Welcome to WebmasterWorld Guest from 54.163.142.67

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Firefox and IE position:relative;

Problems. :(

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

New User

5+ Year Member

joined:Jan 7, 2008
posts:30
votes: 0


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)

Preferred Member

10+ Year Member

joined:Oct 19, 2001
posts:455
votes: 0


IE is centering the div because of :

body { text-align: center; }

Include that snippet on #wrapper instead of body.