CSS layout not working in IE7 (Please help!)

FinnIII · FinnIII #1 (**permalink**)

06-16-2009, 04:18 AM

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">&copy; 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 · Larry Bird #2 (**permalink**)

06-23-2009, 07:06 AM

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

Larry Bird #2 (permalink)
Member Since: May 06, 2009 Location: Sydney Posts: 42 Mac Specs: MacBook Black Core 2 Duo 2.4GHz, 13-inch, 4Gb Ram, 250 HD with 1TB External, 16GB Iphone 3GS	06-23-2009, 07:06 AM 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 everything you can imagine is real...
	QUOTE Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
USB wireless adapter - working, but not working!	AnkeMac	Internet, Networking, and Wireless	3	09-29-2011 11:11 AM
Help with Facing Pages layout (InDesign)	Morgan19	OS X - Apps and Games	6	03-10-2010 01:11 AM
keyboard stops working, only in Finder? Help!	coolskierguy	OS X - Operating System	0	02-25-2008 12:56 PM
Getting launchd working	dr_springfield	OS X - Development and Darwin	0	05-10-2005 02:40 PM
javascript detect & CSS.	design2	Web Design and Hosting	4	04-20-2005 01:50 PM

CSS layout not working in IE7 (Please help!)

Internet Services

Web Development

Digital Marketing

Consumer Tech

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)