Results 1 to 2 of 2
  1. #1


    Member Since
    Jan 17, 2008
    Posts
    16
    Specs:
    MacBook Pro: 2.16 GHz 2GB ram
    Exclamation CSS layout not working in IE7 (Please help!)
    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!

  2. #2


    Member Since
    May 06, 2009
    Location
    Sydney
    Posts
    42
    Specs:
    MacBook Black Core 2 Duo 2.4GHz, 13-inch, 4Gb Ram, 250 HD with 1TB External, 16GB Iphone 3GS
    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...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. problems in IE6 and IE7
    By fine0023 in forum Web Design and Hosting
    Replies: 1
    Last Post: 03-28-2011, 11:26 PM
  2. Warning XP Users: Microsoft warns of IE7 lock-in with XP SP3
    By mojonandha in forum Schweb's Lounge
    Replies: 10
    Last Post: 05-13-2008, 12:42 PM
  3. problems with swf in ie7
    By Maul in forum Web Design and Hosting
    Replies: 3
    Last Post: 04-07-2007, 07:09 PM
  4. My first tableless CSS layout
    By ChicoWeb in forum Web Design and Hosting
    Replies: 17
    Last Post: 01-18-2005, 02:57 PM
  5. CSS
    By muso in forum Web Design and Hosting
    Replies: 4
    Last Post: 09-21-2003, 09:02 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •