#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    164
    Rep Power
    19

    Central positioning in IE6


    I've been trying to centrally position my site pages in IE6 but despite using what seems to be the correct and accepted code (though perhaps not as the case may be), in IE6 the site pages keep aligning left.

    In IE7/8, FF etc. the alignment is centered and fine.

    The CSS I'm using is:

    /* global to standardise padding etc. */

    * {
    padding:0;
    margin:0;
    border:0;
    line-height:0;
    }

    body {
    margin: 0;
    padding: 0;
    text-align: center;
    background: #ffffff;
    font-family:Arial, Helvetica, sans-serif;
    overflow:auto;
    height:100%;
    }

    #container {
    width: 1002px;
    background: #ffffff;
    margin: 0 auto;
    text-align: left;
    height:auto;
    }

    This CSS works fine (in IE6) on another site, i.e centers ok.

    Some articles talk about IE6 being funny with XHTML doctypes, so I swapped it for an HTML Transitional doctype- but that wouldn't work either.

    Any ideas as to how I can make the site centered properly in IE6? As far as I can tell the above code should work- but doesn't...
  2. #2
  3. Person
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2007
    Location
    Moon
    Posts
    1,154
    Rep Power
    555
    Try putting an auto margin on the body along with a width that matches your container.

    Here's a sample of centering
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    body{margin:auto; width:800px;}
    div{width:800px;}
    </style>
    </head>
    <body>
    	<div>container</div>
    </body>
    </html>
    Cheers.
    Give Opera some love. Use it and you'll see why.

    Oh, those monkeys.::What's wrong with the world today?::The lion king in 5 seconds.

    My body is so sexy.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Manchester, UK
    Posts
    153
    Rep Power
    262
    I just tested your css using a strict DTD and no DTD for a single div, i.e.

    Code:
    <div id="content"></div>
    and didn't have any problems....

    You might need to post your markup if bals28 suggestion doesn't fix things..
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    164
    Rep Power
    19
    Hmm, I tried setting width:1002px; and margin:auto; on the body tag, and although that centers the whole thing globally, it has the effect of making text in some areas of the page come out of their divs in IE6... also a scroller that I've set up scrolls out beyond the left edge now.


    Originally Posted by bals28mjk
    Try putting an auto margin on the body along with a width that matches your container.

    Here's a sample of centering
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    body{margin:auto; width:800px;}
    div{width:800px;}
    </style>
    </head>
    <body>
    	<div>container</div>
    </body>
    </html>
    Cheers.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    164
    Rep Power
    19
    This is the full markup of the template page (ignore the odd tags, these just come from a modX CMS package). By the way I tried changing the character set as well, didn't work...


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

    <title>[(site_name)] - [*pagetitle*]</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="/assets/templates/ie6.css" >
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/assets/templates/style.css" />
    <script src="scripts/swfobject_modified.js" type="text/javascript"></script>
    <script language="javascript" src="cal2.js">
    </script>
    <script language="javascript" src="cal_conf2.js"></script>
    <script type="text/javascript">
    function poponloadTerms()
    {
    testwindow= window.open ("terms.htm", "Terms and Conditions",
    "location=1,status=1,scrollbars=1,width=350,height=500");
    //testwindow.moveTo(0,0);
    }
    </script>

    </head>

    <body>

    <div id="container">

    <div id="banner">
    <div class="banner_toplinks">{{toplinks}}</div>
    <div class="banner_phone">{{topbanner}}</div>
    <div class="searchform">{{searchform}}</div>
    </div>

    <div class="menuholder">
    <div class="navigation">{{navmenu}}</div>
    </div>

    <div id="leftcolumn">
    <div id="hotelpartners">{{hotelpartners}}
    <div id="hotelscroller">{{hotelscroller}}</div>
    </div>
    <div id="lefthand_advert1">{{sideflash1}}</div>
    <div id="lefthand_advert2">{{sideflash2}}</div>
    </div>

    <div id="rightcolumn">
    <div id="bookahotel">{{bookahotel}}
    <div id="bookahotelholder">{{bookahotelholder}}</div>
    </div>
    <div id="specialoffers">{{specialoffers}}
    <div id="specialoffersholder">{{specialoffersholder}}</div>
    </div>
    <div id="newhotels">{{newhotels}}</div>
    <div id="bookerstoolkit">{{bookerstoolkit}}</div>

    </div>

    <div id="maincontent">
    <div id="topcontent">{{homeflashmovie}}</div>
    <div id="dailynews">{{dailynews}}
    <div id="dailynewsholder">{{dailynewsholder}}</div>
    </div>

    <div id="flashbox">{{flashbox}}</div>

    <div id="divholder">
    <div id="left_bottom">{{left_bottom}}</div>
    <div id="middle_bottom">{{middle_bottom}}</div>
    <div id="right_bottom">{{right_bottom}}</div>
    </div>

    </div>
    <div class="clearing"></div>
    <div class="footerbar">{{footerbar}}</div>
    <div class="expotelfooter">{{expotelfooter}}</div>


    </div>

    </body>

    </html>

    Originally Posted by loonychune
    I just tested your css using a strict DTD and no DTD for a single div, i.e.

    Code:
    <div id="content"></div>
    and didn't have any problems....

    You might need to post your markup if bals28 suggestion doesn't fix things..
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Sorry for coming in late You said
    so I swapped it for an HTML Transitional doctype
    . That doesn't mean your page is out of quirksmode. Because when in quirksmode, IE6 doesn't recognize margin:0 auto;. The fix for this is to get the page out of Quirksmode either by adding an HTML 4.01 Strict doctype (Google if you need help) or you could use margin-left:auto;margin-right:auto; instead

    Cheers

    Comments on this post

    • Arty Ziff agrees
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    164
    Rep Power
    19
    Thanks... will give that a go.

    Originally Posted by Skipt
    Sorry for coming in late You said . That doesn't mean your page is out of quirksmode. Because when in quirksmode, IE6 doesn't recognize margin:0 auto;. The fix for this is to get the page out of Quirksmode either by adding an HTML 4.01 Strict doctype (Google if you need help) or you could use margin-left:auto;margin-right:auto; instead

    Cheers

    Comments on this post

    • Skipt agrees

IMN logo majestic logo threadwatch logo seochat tools logo