ie6 messes up my layout

[pelaej]

Here's the site that I am working on: hoosickstreetbeverage.com (http://www.hoosickstreetbeverage.com)
To see the issues that I'm having with it you will have to look at it in ie6. The top two images on this site have a space underneath them, and they shouldn't, and the bottom image looks like it's been moved up slightly.

Here's the css:


#insideContainer{
text-align: center;
width: 800px;
margin: 0 auto;
}
#header {
height: 100px;
width: 800px;
}
#topCurve {
height: 24px;
width: 800px;
}
#bottomCurve {
height: 24px;
width: 800px;
position: relative;
}


and here's the html:



<div id="insideContainer">

<div id="header">
<h2>Header: Hoosick Street Discount Beverage Center</h2>
<p>The best place for all of your beverage needs.</p>
<img src="images/navBar_home.jpg" alt="Header Image and Navigation" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="312,82,379,97" href="about.html" alt="About Us Link" />
<area shape="rect" coords="402,82,477,97" href="selection.html" alt="Beer Selection Link" />
<area shape="rect" coords="496,83,562,98" href="info.html" alt="Beer Information Link" />
<area shape="rect" coords="582,82,663,163" href="specials.html" alt="Weekly Specials Link" />
<area shape="rect" coords="690,81,750,97" href="contact.html" alt="Contact Us Link" />
</map>
</div><!-- end header -->

<div id="topCurve">
<img src="images/topCurve.jpg" alt="Top Curve" />
</div><!-- end topCurve -->

<div id="content">


I've tried a few different things with the css but nothing works. I would really appreciate any help!!:)

[coothead]

Hi there pelaej,

try adding this rule to your stylesheet...


img {
display:block;
}

Further reading:-
Eric A. Meyer article (http://devedge-temp.mozilla.org/viewsource/2002/img-table/)
coothead

[pelaej]

It worked!!! Thank you coothead!!!!

[coothead]

No problem, you're very welcome. ;)