CSS layout not working in IE7 (Please help!)

FinnIII · Jun 16, 2009

I know this is probably all documented somewhere but I'm still new to CSS, so I was wondering if you could possible help me.

I've build a site that it all in DIVs that a offset from the centre of the page, it looks brilliant in FF, but all goes to the left in IE. I really need some help! If you help me now, I can learn how to do it in the future and I wont need to come crawling back for help!

My site Targo Studios - Web, Design and Print

CSS:

Code:

body {
	background-image: url(../images/wall.jpg);
	background-repeat: repeat;
	margin: 0px;
	font-family: rockwell, helvetica, arial, sans-serif;
}

.container {
	position: relative;
}

#body {
	position: absolute;
	width: 400px;
	height: 560px;
	top: 180px;
	left: 0;
	right: 220px;
	margin-left: auto;
	margin-right: auto;
}

#testemonial {
	position: absolute;
	width: 230px;
	height: 177px;
	top: 505px;
	left: 450px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#films {
	position: absolute;
	width: 212px;
	height: 177px;
	top: 530px;
	left: 500px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#post-it1 {
	position: relative;
	margin: auto;
	margin-top: 50px;
	width: 326px;
	height: 318px;
}

#post-itHome {
	width: 187px;
	height: 75px;
	position: absolute;
	top: 220px;    
	left: 450px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#post-itWork {
	width: 187px;
	height: 75px;
	position: absolute;
	top: 320px;    
	left: 450px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#post-itContact {
	width: 187px;
	height: 75px;
	position: absolute;
	top: 415px;    
	left: 450px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#paper {
	width: 780px;
	height: 907px;
	margin: auto;
	margin-top: 20px;
}

#targostudios {
	width: 627px;
	height: 88px;
	position: absolute;
	top: 50px;    
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#subtitle {
	width: 422px;
	height: 41px;
	position: absolute;
	top: 130px;
	left: 220px;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

#footer {
	position: absolute;
	width: 400px;
	height: 20px;
	top: 810px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

And the HTML for the home page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Targo Studios - Web, Design and Print</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<style type="text/css">
<!--
.style1 {font-size: 10px}
.style3 {font-size: 12px}
-->
</style>
</head>

<body>
<div class="container">
<div id="paper"><img src="images/paper.png" /></div>
<div id="targostudios"><img src="images/targostudios.png" /></div>
<div id="subtitle"><img src="images/subtitle.png" /></div>
<div id="body">
  <h1>Welcome,</h1>
  <p>Targo Studios was set up by Finn Margrie who is currently studying art and design at Bournemouth Arts Institute, specialising in film.</p>
  <p>Targo Studios can offer competitively price web design services for small businesses or personal sites.</p>
  <p>We will work with you, to created interesting and attractive sites through which your business can develop and grow.<br />
  </p>
  <p>Besides web design, Targo Studios also offers a printed media design and layout service for items such as flyers, menus and posters.</p>
  <p>Samples of all our work is accessible by clicking the work link to the left.</p>
</div>
<div id="post-itHome"><img src="images/post-its/post-it_home.png" width="187" height="75" border="0" /></div>
<div id="post-itWork"><a href="work.html"><img src="images/post-its/post-it_work.png" width="187" height="75" border="0" /></a></div>
<div id="post-itContact"><a href="contact.html"><img src="images/post-its/post-it_contact.png" width="187" height="75" border="0" /></a></div>
<div id="testemonial">
  <h3>Testimonial,</h3>
  <p class="style3"> We gave Finn an extremely vague requirement and he came up with the goods without a complaint. He is one of those rare designers who actually can tell what you want, even when you cannot explain it very well. The results were faster than previous design houses we have used.</p>
  <p class="style3"> We will be recommending Finn to all our customers from now on.</p>
  <p class="style3"> Dean Owen<br />
    Inventoryclerk.com</p>
</div>
<div id="footer">
  <div align="center" class="style1">© Targo Studios 2009. All Rights Reserved.</div>
</div>
</div>
</body>
</html>

It would be brilliant if you could give me a few pointers! Thanks!

Larry Bird · Jun 23, 2009

Finn III,

I dont know if you have fixed this problem.

but i suggest trying the following

for your body use this

#body {
position: absolute;
width: 400px;
height: 560px;
top: 180px;
left: 0;
right: 220px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

and for your container / wrapper

.container {
position: relative;
text-align: left;
}

what this does is make the body go to center but the container still go to the left. i know it says text, but for some reason IE7 (which I hate btw) assumes that text align center means center the page

good luck.

i did this for a tafe assignment and fixed the problem

CSS layout not working in IE7 (Please help!)

FinnIII

Larry Bird

Shop Amazon