hello peeps ive just joined the site today and have 2 seperate topics so ive made 2 posts this is my 2nd
im doing browser compatibilty testing on my prototype and i have a problem in chrome and safari. The css that ive written to give a navbar li and ul tags a hover ability works in all areas ive used it on IE and opera but not the above and i cant figure out why this would be, for example i have the typical nav bar at the top of the page with home button etc and the hover there works on all the browsers but ive also used the same tags to give other buttons hover ability ones placed below a pic gallery with a description (ie products that u can press to add to cart) and that works exactly as id planned in ie and opera but not in the above
here is the css and xhtml i used to do this feature im hoping u can tell me why it wont work on all
here is the navbar css
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: #AAAADD;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #AABBBB;
}
here is the gallery css in case its this thats causing the hover not to work on all
div.img {
border:1px solid #AAAADD;
height:auto;
width:auto;
float: left;
text-align:center;
}
div.img img {
display:inline;
border:1px solid #AAAADD;
}
div.img a:hover img {
border:1px solid black;
}
div.desc {
text-align:center;
font-size: 15px;
width:129px;
margin:1px;
background-color: #AAAADD;
color: blue;
}
div.desc a:hover {
color: white;
display: block;
background-color: #AABBBB;
}
and here is the xhtml for the navbar and 2 of the gallery hover bits
<div id="navcontainer">
<ul>
<li><a href="homepage.html">Home</a></li>
<li><a href="restaurants.html">Restaurants</a></li>
<li><a href="outdoors.html">Outdoor Activities</a></li>
<li><a href="indoors.html">Indoor Activities</a></li>
<li><a href="spas.html">Spa Treatments</a></li>
</ul>
</div>
<div class="img">
<a target="" href="orders.html">
<img src="images/cateyes.jpg" alt="Cafe Francais" width="101" height="90" />
</a>
<div class="desc"><strong>Cafe Francais</strong> £10.00 booking fee, refundable against cost of meal.<br><a href="orders.html">ADD TO SHOPPING CART</a></div>
</div>
<div class="img">
<a target="" href="orders.html">
<img src="images/infinity.jpg" alt="Bellissimo Italiano" width="101" height="90" />
</a>
<div class="desc"><strong>Bellissimo Italiano</strong> £10.00 booking fee, refundable against cost of meal.<br><a href="orders.html">ADD TO SHOPPING CART</a></div>
</div>
when makin this post i noticed that the css is for li ul and a tags but on the gallery hover part that i wanted iv only used an a tag so i thought this could be the issue but ive since enclosed that gallery hover part `add to shopping cart` in ul and li tags as well as the a href and it just added a dot and messed up the layout and still didnt have the hover effect
hope ya can help people
Before you post, read our: 
li and ul navbar hover problem in Chrome and Safari
