I have been working on clearing up issues on a site that client asked me to help out on. Unfortunately the cutup was done with CSS and photoshop. If they weren't in such a hurry, I'd just do a totally new cutup. With that said, I'm having the hardest time figuring out the space that is occurring on the two tables on the right side of the page. One where the Search by make/model/ etc.. is at an the other where the Price comparison is at. It is fine in Firefox, Chrome, Safari, but it appears in IE7 (note.. the Price Comparison Table has it show up in all browsers still). I have messed around the code so much I think I'm loosing my mind so I need some new eyes to help me figure out what is wrong. I need that gap to disappear.
Additionally, in IE7 & IE8 the background image on the top Search by make/model.. doesn't appear, it puts in a color instead. I'm confused by that as well. It appears correctly in all browsers.
Any help that you can provide to me would be SOOO GREATLY appreciated.
One Note: This originally didn't have a doctype added to it and when I did, that's when these problems started occurring. It was always bad in IE but even in Firefox/Chrome the Price Comparison gap appeared in the table.
To remove the space in the price comparison table you can add the cellspacing and cellpadding attributes to the table element, like this:
<table cellspacing="0" cellpadding="0">
You'll also need to give the nested table below this (the one in the td with the class our_price_body) a pixel width in order to get the table body to line up with the header image. 302px seems to do it
To fix the gaps in IE7 (I see the top table with a gap already has cellpadding and cellspacing set) just set the header images to display:block and the gap will disappear.