Help with layout in IE6

Discussion in 'CSS' started by BILL453468, Jun 24, 2008.

0
  1. #1
    This is the first shot I've given to using CSS to layout a website, and I'm in IE Hell.

    When I view my page in firefox, the entire layout is centered, just like I want it to be. but in IE6, the layout is left justified.

    Anyone, please, help!!!!

    Here is my HTML:

    <body>
    <div id="overall">
    <div id="hdr">
    </div>

    <div id="hdr-name">
    </div>

    <div id="lh-col">
    </div>

    <div id="rh-col">
    </div>
    </div>
    </body>

    And here is my css:

    body
    {
    margin: 12px 20px 12px 20px;
    padding:0;
    background: #ececec;
    color: #333333;
    }

    #overall
    {
    width: 840px;
    margin: 0 auto;
    }

    #hdr
    {
    width: 800px;
    height: 200px;
    margin: 0;
    border-width: 0 0 0 0;
    background: #00248F;
    color: #333333;
    }

    #hdr-name
    {
    width: 800px;
    height: 20px;
    margin: 0;
    border-width: 0 0 0 0;
    background: #809FFF;
    color: #0D1A40;
    text-align: center;

    }

    #lh-col
    {
    width: 160px;
    float: left;
    border: solid #333333;
    border-width: 0 0 0 0;
    background: #456DE6;
    color: #333333;
    margin: 0;
    height: 100%;
    }

    #rh-col
    {
    width:95%;
    background: #ececec;
    color: #333333;
    margin: 10px 10px 10px 10px;
    padding: 0;
    border: 10px 10px 10px 10px;
    font-family: Verdana;
    color: navy;

    }
     
    BILL453468, Jun 24, 2008 IP
  2. Cobnut

    Cobnut Peon

    Messages:
    184
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Bill, IE Hell is deep and wide, I'm afraid; you'd best start making a map :)

    I could be wrong, but I think IE6 is a little unreliable with the auto setting in margin (it needs to be in standards mode, I think), which is probably why it's failing. To get a centered site that works for all browsers I tend to use the following:

    #overall{width:840px;margin-left:-420px;left:50%}

    it's not as neat but it does work, and in all browsers.

    Jon
     
    Cobnut, Jun 25, 2008 IP
  3. BILL453468

    BILL453468 Member

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thanks Jon, but I think I've already got it.:D

    Two things I needed to add:

    body
    {
    text-align: center;
    }

    #overall
    {
    text-align: left;
    }

    This took care of it, thanks to info I found here:

    http://www.simplebits.com/notebook/2004/09/08/centering.html

    Now, its on to the next issue.....
     
    BILL453468, Jun 25, 2008 IP