ie6 messes up my layout

**pelaej** · 08-15-2009, 02:53 AM

Here's the site that I am working on: 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:

Code:

#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:

Code:

<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!!