IE6 CSS layout problem

  • Resolved poper

    (@poper)


    20 years ago

    Hi
    My site layout should look like that screenshot:

    (in firefox and opera)
    But in IE6 looks like this (screenshot):

    I have no idea whats happening, I hope you can help me.
    This is the code:
    <?php
    get_header();
    ?>

    <body>
    <div id="caja">
    frame (the orange box)

    <div id="cabecera">Header</div>

    <div id="columna">Sidebar</div>

    <div id="contenedor">Content</div>

    </div>

    <div style="clear:both"></div>

    <?php
    get_footer();
    ?>

    and the CSS:

    #caja {
    width: 750px;
    border: 5px solid #FF8C00;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 10px;
    background-color: white;
    }

    #contenedor {
    padding: 5px;
    margin-left: 230px;
    background-color: transparent;
    border: 1px dashed #FF4500;
    }

    #columna {
    float: left;
    width: 200px;
    width: 210px;
    width: 200px;
    margin: 0;
    margin-right: 5px;
    padding: 5px;
    border: 1px dotted #228B22;
    }

    #pie {
    width: 750px;
    padding: 5px;
    border: 1px solid gray;
    background-color: #EFEFEF;
    font-size: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    margin-top: 0px;

    }

    Thanks a lot

Viewing 11 replies - 1 through 11 (of 11 total)
  • plodder

    (@plodder)

    20 years ago

    From a quick look is it the centering? If it is IE6 doesn’t calculate margin-left: auto correctly. Try something like:

    body {text-align: center;}
    #caja {text-align: left; /*to re-set text-alignment*/}

    also you can short hand the margins to margin: 5px auto 0;

    Does that help? If not let me know and i’ll try again.

    Thread Starter poper

    (@poper)

    20 years ago

    Thanks for the answer, unfortunely it doesn’t work. The problem is not only the centering but also the width of the “caja” DIV. The odd thing is that the “pie” DIV (the grey footer) renders OK in IE (and both DIVs share almost the same CSS code)

    plodder

    (@plodder)

    20 years ago

    The width issues are probably connected to the Box Model Hack
    see http://tantek.com/CSS/Examples/boxmodelhack.html for an explanation of what’s going on or google it for others.

    You really want to avoid hacks though as you could be storing up trouble especially when IE7 comes out. Avoiding this basically means setting padding: 0 and setting a margin on the child element(s).

    If you like i can have a go at that on the source you supplied?

    Thread Starter poper

    (@poper)

    20 years ago

    Thanks plodder. I’m going to check the link.
    One more odd thing: If I copy and paste the code from the page rendered by WP into a new HTML file it’s shown properly in IE6! but i doesn’t in localserver

    The code is here:
    http://personales.ya.com/poper/index.html —> HTML from a page rended by WP
    http://personales.ya.com/poper/style.css –> CSS
    Thanks a lot!

    Thread Starter poper

    (@poper)

    20 years ago

    And here are the template files i’m using for WP (no loop, just the layout): http://personales.ya.com/poper/cole3.rar (header, index, footer and style.css)

    plodder

    (@plodder)

    20 years ago

    Poper, got your files and i’ve started but unfortunately i have to go. Will post back later if that’s okay.

    Doodlebee

    (@doodlebee)

    20 years ago

    You can reset your margins by adding this to your stylesheet:

    * { margin:0;
    padding:0;
    border:0;
    }

    Then use a conditional comment to fix any other IE errors that pop up.

    plodder

    (@plodder)

    20 years ago

    I have made some ammendments to the CSS and posted example to:
    http://www.fiveyears.co.uk/cole3
    and
    http://www.fiveyears.co.uk/cole3/style.css

    I hope this is what you are after.

    neoricen

    (@neoricen)

    20 years ago

    Just as a heads up Plodders CSS displays fine in IE7

    Thread Starter poper

    (@poper)

    20 years ago

    Thanks a lot plodder, you rock!
    It works 🙂
    Thanks again!

    plodder

    (@plodder)

    20 years ago

    No problem, glad to be of assistance.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘IE6 CSS layout problem’ is closed to new replies.

Tags

  • 11 replies
  • 4 participants
  • Last reply from: plodder
  • Last activity: 20 years ago
  • Status: resolved