Need Help with CSS Issue

[Globie]

Hi Everyone. We have a website that looks just right in Firefox, but in IE6 and 7, the spacing is just completely off.

Can someone please help with this???

In IE6 there is too much extra white space at the bottom. In IE7, there is too much at the top. You can see the extra space under the heading "Monthly Specials for November".

I've spent hours trying to figure out how to make it look right in IE but it's just not working. Everything is great in FireFox.

http://www.mycupcoffee.com

[stevesh]

I probably shouldn't help a competitor but it looks to me like most of that white space is at the bottom your header background image.

Also, your header image is 180px high, while your #logoWrapper is only 156px high.

I'd strip the white space off the bottom of the image, then adjust the #logoWrapper height.

If you have to get rid of or move the Bookmark thing, that wouldn't be a bad thing.

Also, if you add display:none; to #logo, it'll get rid of that red 'X' in your header in IE.

[stevesh]

Also, I don't think this is what you wanted to do:

#special_items{
width:95%;
border:1px solid black;
position:relative;
margin:0px auto 0px auto;
/*for ie6*/
margin: 900px 0 0 0;

}

[Globie]

A competitor!!! Well thanks for being a nice guy about it.

I will look at getting rid of that X in IE. That was going to be my next question.

I know what you mean by the:

#special_items{
width:95%;
border:1px solid black;
position:relative;
margin:0px auto 0px auto;
/*for ie6*/
margin: 900px 0 0 0;

I had to put the /*for ie6*/ to get the content into the "Specials for November" box. It looks the way it should except for all the extra space. If that 900px wasn't there, all of that content would be at the very top.

I just don't know what else to edit to get rid of it.