Question

I am trying to fix an extremely irritating problem with IE 8 and below.

It seems that IE is interpreting pixels differently to how FF and Chrome do.

I have put the site up here: http://www.therapyoracle.co.uk/new

If you scroll to the right, you will see that the div is bigger than it should be.

The width of the #page container is 1008px, the banner div is 1008px, there are two divs inside this banner div that are 600 and 408 pixels respectively. Now I only got a C in maths, but 600+408=1008 no? It looks fine in FF and Chrome.

I hate IE.

‘#page’ doesn’t have any borders though. Here is my CSS:

#page {
    margin:0 auto;
    width:1008px;
    background:white;
    padding:0px;
    min-height:100%;
    position:relative;
    margin-bottom:-22px;
    box-sizing:content-box;
}

#header {
    width:100%;
    text-align:center;
    background:#000000;
}
    #hCont {
        margin:0 auto;
        width:1000px;
        height:100px;
    }
    #hLogo {
        float:left;
    }
    #hContact p:first-child {
        font-weight:bold;
        font-size:16px;
        margin-bottom:8px;
    }


#navCont {
    width:100%;
    background:#6a8a3f;
    border-bottom:3px solid #1d2b00;
}

#nav {
    margin:0 auto;
    width:1000px;
    height:35px;
    font-size:17px;
    color:#382D07;
}
    #nav ul {
        padding:0;
        margin:0;
        list-style:none;
    }
    #nav li {
        float:left ;
        padding:6px;
        padding-right:25px;
    }

#banner {
    height:201px;
    width:1008px;

}
    #img {
        float:left;
        width:600px;
        height:201px;
    }
    .txt {
        float:left;
        width:408px;
        height:67px;
        padding:0;
    }
#opt1, #opt2 {
    width:407px;
    border-right:1px solid #1d2b00;
}
#right {
    float:right;
    width:250px;
}

Answer 1

Your problem is caused by differences in the used boxing model (MDN link). IE usually uses the border box model, whereas the others use a content box model.

So in IE the size of the content of #page is actually 1008px minus the border. As a solution you can either set the box-sizing css-property in IE8+ or set borders to zero.

For more information have a look at the above MDN link.