UL menu using CSS to set image backgrounds

Hi all,
The first menu item does not show with an image background and all of the others thereafter work fine.
This seems to be a quirk in IE6 but Firefox see's it as fine.

Does anyone have an idea why? There are some similar threads but none that seem to have the same problem. This is my doctype and the offending code is below:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<div id="menunavigation">
<ul>
<li><a href="#">About Biodiversity</a></li>
<li><a href="#">Action Plans</a></li>
<li><a href="#">Gardening for Wildlife</a></li>
<li><a href="#">Kids and Schools</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Useful Links</a></li>
</ul>
</div>

#menunavigation{
margin: 10px 0px 0px 0px;
width: 200px;
position: relative;
float: left;
list-style: none;
}
#menunavigation ul {
margin: 0px;
padding: 0px;
font-size: 100%;
font-weight: bold;
font-family: "Tahoma", sans-serif;
}

#menunavigation li { display: inline;}

#menunavigation a {
display: block;
text-decoration: none;
color: #000000;
padding: 15px 0px 15px 0px;
background-image: url(/images/design/oneleaf.gif);
background-position: 50%;
background-repeat: no-repeat;
}

#menunavigation a:hover{
color: #ffffff;
background-image: url(/images/design/threeleaves.gif);
background-position: 50%;
background-repeat: no-repeat;
}

Thanks for any advice or thoughs that you can think of!

UL menu using CSS to set image backgrounds

CSS set unordered list to create the menu

Dran

evilregis

Dran

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week