Please visit my site using IE7:
http://mechanismm.com

You'll notice 2px spaces between the nav buttons. These do not appear in
Safari or Firefox. I don't understand why IE7 is having problems.

My HTML is laid out like this:



<div id="left">
<div id="logo"><h1><span>Selected Works MechanismM</span></h1></div>

<!--start navigation NAVIGATION div's-->

<div id="nav">
<div id="ac_shadow"></div>

<div id="nav_top">
<ul>
<li id="recent_work"><span>Recent Works</span></li>
<a href="prints/" ><li
id="print"><span>Prints</span></li></a>
<a href="photography/" ><li
id="photography"><span>Photography</span></li></a>
<a href="video/" ><li
id="video"><span>Video</span></li></a>
<a href="interactive/" ><li
id="interactive"><span>Interactive</span></li></a>
<li id="boiler">
<span>Student artists and designer based in LA and San
Francisco. All artwork copyright 2008.</span></li>
<a href="about/" ><li id="about"><span>About
Me</span></li></a>
<a href="#" onclick="emailForm();"><li
id="contact"></li></a>
</ul>
</div>

</div>
<!--end NAVIGATION div's-->
</div>
<!--end LEFT div's-->




CSS:

#nav {
width:300px;
background-image:url(nav_bg.png);
background-repeat:repeat-y;
display:inline;
}

#nav_top {
margin-top:26px;
width:288px;
float:right;
}

#ac_shadow {
margin-top:26px;
background-image:url(shadow.png);
width:12px;
height:48px;
float:left;
}

#nav li {
list-style-type:none;
}

#nav li span {
display:none;
}

/* ++++++ NAV ITEMS +++++++ */

#recent_work {
background-image:url(recent.png);
background-position:0 -72px;
width:288px;
height:36px;
}
/*
#recent_work hover {
background-position:0 -36px;
}
*/

#print {
background-image:url(print.png);
width:288px;
height:36px;
}

#print:hover {
background-position:0 -36px;
}