Grow your CSS skills. Land your dream job.

Gap between divs in IE

  • # April 18, 2009 at 8:24 am

    Hoping someone can help with what I’m assuming is a simple fix (not other website seems to have this problem so clearly millions have figured it out before…)

    Below is how my css appears in IE only – works fine in every other browser.

    [img]http://alternet.com.au/ie_problem.png[/img]

    Here is the html:

    Code:

    Here is the css:

    Code:
    @charset “utf-8″;
    * {
    margin: 0;
    padding: 0;
    }
    #body {
    font-size: 62.5%;
    background-image: url(../images/background.png);
    font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
    }

    .clear { clear:both; }

    #container_bg {
    margin: 0 auto;
    width: 919px;
    }
    #main_bg_top {
    background-image: url(../images/bg_top.gif);
    background-repeat: no-repeat;
    width:919px;
    height:7px;
    margin-top: 10px;
    }
    #main_bg_body {
    background-color: #e6e6e6;
    width:909px;
    padding: 5px;
    }
    #header {
    width: 899px;
    margin: 0 auto;
    }
    #header_top {
    background-image: url(../images/bg_header_top.gif);
    background-repeat: no-repeat;
    width: 899px;
    height: 6px;
    }
    #header_body {
    width: 887px;
    background-color: #FFF;
    border-right: solid #999999 1px;
    border-left: solid #999999 1px;
    padding: 5px;
    }
    #header_bottom {
    background-image: url(../images/bg_header_bottom.gif);
    background-repeat: no-repeat;
    width: 899px;
    height: 7px;
    }
    #main_bg_bottom {
    background-image: url(../images/bg_bottom.gif);
    background-repeat: no-repeat;
    float: left;
    width:919px;
    height:7px;
    }

    Thanks

    # April 18, 2009 at 10:25 am

    You need edit top background:
    background: url(link) no-repeat bottom;
    :D

    # April 18, 2009 at 10:32 am

    Try removing the padding from #main_bg_body and #header_body and applying it to the content of those divs instead.

    # April 18, 2009 at 6:02 pm
    "darkkiller" wrote:
    You need edit top background:
    background: url(link) no-repeat bottom;
    :D

    Thanks darkkiller, that works which I had toyed with however, can anyone explain why IE does this? I have given that div a specific height of 7px yet clearly IE has rendered the div to be much higher than that.

    Do divs in IE have to be a minimum height?

    Thanks

    # April 20, 2009 at 3:05 am
    "apostrophe" wrote:
    Try removing the padding from #main_bg_body and #header_body and applying it to the content of those divs instead.

    Thanks apostrophe, that did not work however I have found the fix… I need to set the font-size to 0 as IE auto-sizes teh div based on the font-size…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".