homepage Welcome to WebmasterWorld Guest from 54.227.77.237
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Firefox and IE position:relative;
Problems. :(
Ben878




msg:3547357
 10:28 pm on Jan 13, 2008 (gmt 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?

 

your_store




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

IE is centering the div because of :

body { text-align: center; }

Include that snippet on #wrapper instead of body.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved