CODEWITHSUNDEEP
jquerycssinternet-explorer
jefffan24
jefffan24

Reputation: 1326

IE adding pixels to width

I'm making a site and on some pages IE is adding some pixels to make it have a horizontal scroll bar and on others it is not. I really can't figure out what is wrong here. Here is my CSS any help will be greatly appreciated (I'm using jQuery on the site if that effects your answer any).

html, body {
    padding: 0;
    margin: 0;
    border: 0;
    height:100%;
    min-height:900px;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;                
}
.north {
    height: 100px;
    margin-right:5px;
}
.south {
    height: 2em;
    background-color: #3F3F3F;
    border-top: 1px solid black;
    font-size:80%;
    color: rgb(200, 200, 200);
    width:100%;
    display:block !important;
    position:absolute !important;
    bottom:0px !important;
    left:0px !important;
}
.west {
    width: 200px;
    font-size: 0.78em;
}
.center {
    font-size: 80%;
    height:auto;
    min-width:300px;
}

Those multiple !important notation where a fix for some other stuff what wasn't working, but removing them doesn't fix the issue.

Upvotes: 0

Views: 498

Answers (1)

Sean
Sean

Reputation: 786

Likely margin in North. IE's box model is different from all other browsers. Try commenting that (and any other container padding & margin) and see if that solves the issue.

Also what's in the container might be blowing it up. IE doesn't respect widths and will expand the container to support the contents whereas other browsers won't. You can see if this is the case by adding "overflow: hidden" to the elements.

Also, learn to use your tools. Use the IE Developer tools (hit F12 in IE8) and then use the select by click (looks like a box with the pointer in it on the tool's toolbar) to put a border on the elements to see which one is the culprit.

Upvotes: 2

Related Questions