CSS - 2-3 pixels off!

[bvgroote]

Another IE6 problem.

The site in question: http://www.benvangrootel.com/jandamarra/

If you view this site in IE6, the navigation pretty much lines up. Before I fiddled with it, the contact button on the right was pushed down below home. However now that it's lined up in IE6, the nav (contact us) when viewed in other browsers is a couple pixels off to the left.

I'm pulling my hair out here, how can I get it to line up in both? There has to be a way.

CSS for nav here:

@import url(reset.css);

h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
p { font-family: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; }

#container { width: 776px; min-height: 900px; background: url(../images/background.png) repeat-y; margin: 0 auto; padding: 12px 24px 80px 24px; overflow: hidden; }
#top { width: 776px; height: 341px; background-image: url(../images/top.png); }
#top h1, #top p { text-indent: -999em; }

#navigation { margin-top: 15px; width: 790px;}
#navigation li { float: left; display: block; width: 140px; height: 81px; margin-right: 18px; }
#navigation li a { display: block; width: 124px; height: 69px; padding: 6px 8px; text-decoration: none; text-transform: uppercase; font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.1em; line-height: 1.2em; background-image: url(../images/navigation.png); color: #FFFFFF; }


#navigation #home a { }
#navigation #home a:hover { background-position: 0 -83px; }
#navigation #home a:active { background-position: 0 -167px; }
#navigation #about-us a { background-position: -158px 0; }
#navigation #about-us a:hover { background-position: -158px -83px; }
#navigation #about-us a:active { background-position: -158px -167px; }
#navigation #tjp a { background-position: -317px 0; }
#navigation #tjp a:hover { background-position: -317px -83px; }
#navigation #tjp a:active { background-position: -317px -167px; }
#navigation #k-tour a { background-position: -476px 0; }
#navigation #k-tour a:hover { background-position: -476px -83px; }
#navigation #k-tour a:active { background-position: -476px -167px; }
#navigation #contact-us a { background-position: -635px 0; }
#navigation #contact-us a:hover { background-position: -635px -83px; }
#navigation #contact-us a:active { background-position: -635px -167px; }
#navigation li.no-marg { margin: 0 ; }


#column-left, #column-middle, #column-right { margin-top: 16px;   }
#column-left { width: 140px; float: left; background: #DDCCBB url(../images/left_bg.png) no-repeat; clear: left; margin-right: 17px; padding-bottom: 5px; }
#column-middle { width: 459px; float: left; margin-right: 20px; }
#column-right { width: 140px; float: left; background: #E7DBCB url(../images/left_bg.png) no-repeat; }

#footer { width: 160px; float: right; margin: 30px 0 0 0; }
#footer img { float: right; display: block; margin-bottom: 8px; }
#footer p { display: block; clear: both; font-size: .6em; text-align: right; color:#999; line-height:1em; }
#footer a { text-decoration:none; color:#666; }
#footer a:hover { text-decoration:underline; }

#end {
	width: 868px;
	height: 200px;
	background-image: url(../images/end.jpg);
	background-repeat: no-repeat;
	margin: 0 auto; padding: 12px 0px 80px 0; overflow: hidden;
}

Thanks in advance!

Ben

[bvgroote]

is it worth me just making 2 different sites? Put an if ie6 statement and have an entirely different one made? God I hate ie6

[bvgroote]

nopw my freaking menu isnt working in IE6 at all...there's supposed to be a drop down...kill me