I am having difficulty with a horizontal menu. I am using images, and it is placing a small shadow/border on top and bottom of the images as you can see in the screenshot below (outlined in yellow to show the area with the border):

Here is my css script:
Code:
<style type="text/css">
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-image:url('../updated_nav_bar/right_bar.png');
background-size: 100% 45px;
background-repeat:no-repeat;
border-style:none; }
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
border-style:none;}
#nav li {
float: left;
border-style:none;}
#nav li a {
display: block;
padding: 0px 0px;
text-decoration: none;
font-weight: bold;
color: #069;
border-style:none;}
#nav li:first-child a {
border-style:none;}
#nav li a:hover {
color: #fff;
border-style:none;}
</style>
here is the code for the actual menu:
Code:
<div id="nav">
<ul>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/home.png" width="63" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/about_us.png" width="90" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/products_and_services.png" width="178" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/support.png" width="83" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/my_account.png" width="117" height="45"></a></li>
<li><a href="#"><img border="0" src="images/menu_buttons/stationary/contact_us.png" width="110" height="45"></a></li>
</ul>
</div>
Any help would be greatly appreciated.
Thanks!!!
Bookmarks