WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] IE6 CSS layout problem (12 posts)

  1. poper
    Member
    Posted 8 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

  2. plodder
    Member
    Posted 8 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.

  3. poper
    Member
    Posted 8 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)

  4. plodder
    Member
    Posted 8 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?

  5. poper
    Member
    Posted 8 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!

  6. poper
    Member
    Posted 8 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)

  7. plodder
    Member
    Posted 8 years ago #

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

  8. Doodlebee
    Member
    Posted 8 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.

  9. plodder
    Member
    Posted 8 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.

  10. neoricen
    Member
    Posted 8 years ago #

    Just as a heads up Plodders CSS displays fine in IE7

  11. poper
    Member
    Posted 8 years ago #

    Thanks a lot plodder, you rock!
    It works :)
    Thanks again!

  12. plodder
    Member
    Posted 8 years ago #

    No problem, glad to be of assistance.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags