New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

CSS layout not working in IE7 (Please help!)


Post Reply New Thread Subscribe

 
Thread Tools
FinnIII

 
Member Since: Jan 17, 2008
Posts: 16
FinnIII is on a distinguished road
Mac Specs: MacBook Pro: 2.16 GHz 2GB ram

FinnIII is offline
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!
QUOTE Thanks
Larry Bird

 
Member Since: May 06, 2009
Location: Sydney
Posts: 42
Larry Bird is on a distinguished road
Mac Specs: MacBook Black Core 2 Duo 2.4GHz, 13-inch, 4Gb Ram, 250 HD with 1TB External, 16GB Iphone 3GS

Larry Bird is offline
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

Post Reply New Thread Subscribe


« syncing with site | Dreamweaver/Flash newbie but experienced mac artworker »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

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

All times are GMT -4. The time now is 08:58 AM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?