Getting rid of weird whitespace in IE

My homepage loads fine in chrome and firefox but there is a large whitespace when loaded in IE. I don’t see where the problem is, can someone help me fix it? You can see the problem at http://glumbo.com (scroll down a bit)

Thanks in advance

Hi,
IE does not like the 20px left margin on .cattable , it will work fine in FF & IE if you use padding instead.

You are also having problems with the 90px line-height on .bargain
Remove that line-height and use top-padding instead to get the text below the BG image. You will need to adjust the height also since padding adds to the height.

Try this :


.bargain {
float:left;
[COLOR=Blue]height:40px;[/COLOR][COLOR=Red]/*65px*/
/*line-height:90px;*/[/COLOR]
margin:5px 0 0;
[COLOR=Blue]padding-top:40px;[/COLOR]
text-align:center;
}

.cattable {
[COLOR=Red]/*margin:0 0 0 20px;*/[/COLOR]
[COLOR=Blue]padding:0 0 0 20px;[/COLOR]
}

Thanks for the help guys, I’m still a noob with CSS

The table that starts with the word “Electronics” has a width set of 100%, but its .cattable class has left margin of 20px. That margin is making it too wide, and it is dropping in IE, while the other browsers are being overly kind to you.

So, probably the best thing to do is what you’ve done in the previous div. Remove the 20px margin from the cattable table and instead wrap that table in a div that has margin-left:20px. That way you can keep the table at 100% width, which is needed due to the flexible layout.

EDIT: oops, Rayzur beat me. I should have refreshed the page first!