I am a bit baffled by this problem and have stumped others with it. I am using an unordered list to display some images for a masthead and the main nav. The image below is a screen shot of the spacing problems (highlighted due to light colors). I have also included the code below that I'm using to create everything. I have tested it in IE and Firefox with the same problem and have tried every option to clear the margin & padding. Any help or feedback would be very much appreciated.
CSS:
* { margin: 0; padding: 0; } body { font: 62.5%/1.6em Arial, Helvetica, sans-serif; text-align: center; background: #043464; color: #000; } img { border: none; } #wrapper { margin: 0 auto; text-align: left; width: 800px; background: #FFF; } #mastHeadLeft { float: left; width: 48px; } #logo { float: left; } #logo li { list-style-type: none; } #mastHeadText { float: left; } #mainNav { clear: both; width: 800px; } #mainNav li { float: left; list-style-type: none; } #mainNav li a:link, #mainNav li a:active, #mainNav li a:visited { display: block; width: 111px; height: 21px; text-align: center; background: #FFF url(../images/nav_bg.jpg) no-repeat; padding: 4px 0 0 0; color: #043464; font-weight: bold; text-decoration: none; font-size: 1.3em; } #mainNav li a:hover { color: #FFF; background: #043464; }
HTML:
<div id="wrapper"> <div id="mastHeadLeft"><img src="images/banner_left.jpg" alt="" width="48" height="114" /></div> <div id="logo"> <ul> <li><img src="images/logo_top.jpg" alt="" width="110" height="19" /></li> <li><a href="index.html"><img src="images/logo.jpg" alt="| RH | Home" width="110" height="76" /></a></li> <li><img src="images/logo_bottom.jpg" alt="" width="110" height="19" /></li> </ul> </div> <div id="mastHeadText"><img src="images/banner_text.jpg" alt="" width="198" height="114" /></div> <div id="mastHeadRight"><img src="images/banner_right.jpg" alt="" width="444" height="114" /></div> <div id="mainNav"> <ul> <li><img src="images/nav_bar_left.jpg" alt="" width="114" height="25" /></li> <li><a href="#">Who Am I?</a></li> <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li> <li><a href="#">Portfolio</a></li> <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li> <li><a href="#">For Hire</a></li> <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li> <li><a href="#">Resume</a></li> <li><img src="images/nav_spacer.jpg" alt="" width="4" height="25" /></li> <li><a href="#">Contact Me</a></li> <li><img src="images/nav_bar_right.jpg" alt="" width="115" height="25" /></li> </ul> </div> <div id="content">Main Content...</div> <div id="footer">Copyright © 2006 | RH | RayHauck.com</div> </div>