IE Issue with extra white space

I have been working on this site for about a month now. Recently I had to make a change to the site and expand the overall width of the #wrapper container to 900px. When I did this the IE version of the site added on extra white space to the right hand side of the container. I undid all of the changes I made and the problem it still there. I have tried IE only conditional comments, the * HTML hacks, and the forward slash \ hacks. None of these fixed the problem either in the 900px or the smaller version. Does anyone have any ideas of how to fix this?

Here is the CSS for the layout of the containers.


body {
margin-top: -1px;
padding: 0px;
font: 62.7% "century Schoolbook", Arial, Helvetica, sans-serif;
background: #FFFFFF url(../images/GESBackground.gif) repeat center top;
text-align: center;
}

h1, h2, h3, h4, p, ul, ol {
margin: 0px;
padding: 0px;
}

a img {
border: none;
}

/* LAYOUT */

#wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 7px;
border-left: 1px solid #000066;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
background: #FFFFFF url(../images/GESColumnBackground.gif) repeat-y right top;
text-align: left;
}

#banner {
width: 900px;
background: url(../images/GESBanner.gif) no-repeat right top;
height: 90px;
float: left;
}
#nav {
float: left;
width: 150px;
clear: left;
}
#main {
float: left;
width: 569px;
margin-right: 2px;
margin-left: 2px;
margin-bottom: 5px;
padding-right: 9px;
padding-left: 8px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
display: inline;
}
#news {
float: right;
width: 158px;
border-bottom: 1px dashed #CCCCCC;
background: url(../images/GESAdsBackground.gif) no-repeat left bottom;
}

#legal {
border-top: 1px dashed #999999;
font-family: "Century Schoolbook";
font-weight: lighter;
color: #990000;
padding: 15px 5px 10px;
clear: both;
}
#pagenumber {
padding-left: 10px;
font-weight: bold;
color:#000000;
}
#rotatingbanner {
width: 900px;
padding-left: 75px;
clear: both;
margin-top: 2px;
}
#rotatingbanner .rotate {
padding: 0;
margin-left: 0;
display: inline;
text-decoration: none;
}
#topspacer {
margin-top: 1px;
border-bottom: 1px dashed #CCCCCC;
}

 

Can we see the html markup as well or at least the relevant part?

 

Well, I THINK you might be seeing overpadding from the excessive use of floats on elements that frankly - I don't THINK need to be floating... Though it could also be that you aren't nulling the margins on enough elements.

But without the corresponding HTML it's hard to say - there's a bit of 'don't tug on that, you don't know what it's attached to'.

AHA - was reformatting/condensing it to make sense of it, noticed THIS:
#rotatingbanner {
width:900px;
padding-left:75px;

Your container is 900px... that 75px padding makes the rotatingbanner part 975px width total, larger than your container (at least in standards compliant browsers - if you have IE in quirks mode all bets are off). Frankly, I'd not even state a width on that since the default behavior of block level elements is to expand to fit. That is most likely your culprit, and if I'm guessing at your HTML correctly yanking that one width declaration might clear things up. (I'd still like to see your HTML just to be sure on things like proper doctype)

Oh, and I REALLY advise against going that small on the default font size - If you chose that 62.7% because of the "equals 10px" nonsense be aware that breaks on large font machines anyways, so you might as well use a USEFUL font size like 80% or so.

 

Thanks deathshadow for the tips. You were right about the padding and the width statement for the rotating banner. I switched to padding to margin and got rid of the width declaration and everything works fine now. Thanks for the help again.