Hi, i'm pretty new to CSS and html so please go easy on me.

I'm trying to make a menu for a microsite, the idea is that when you hover over the images in the menu they glow. To do this i have set up the following in css

***CSS Document***
a.wallpaper_button {background:url(images/wallpaper_container.gif);}
a.wallpaper_button:hover {background:url(images/wallpaper_container_on.gif);}

a.screenshot_button {background:url(images/screenshot_container.gif);}
a.screenshot_button:hover {background:url(images/screenshot_container_on.gif);}

a.downloads_button {background:url(images/downloads_container.gif);}
a.downloads_button:hover {background:url(images/downloads_container_on.gif);}

div.menu_wallpaper {position:absolute; left:17px; top:220px; height:50px; width:200px; background-color:transparent;}
div.menu_screenshot {position:absolute; left:17px; top:270px; height:50px; width:200px; background-color:transparent;}
div.menu_downloads {position:absolute; left:17px; top:320px; height:50px; width:200px; background-color:transparent;}

I have then done the following in the html document
<div class="menu_wallpaper"><a class="wallpaper_button" href="wallpapers.php" target="_blank"><img src="images/overlay.gif"></img></a></div>
<div class="menu_screenshot"><a class="screenshot_button" href="screenshots.php" target="_blank"><img src="images/overlay.gif"></img></a></div>
<div class="menu_downloads"><a class="downloads_button" href="downloads.php" target="_blank"><img src="images/overlay.gif"></img></a></div>

The overlay image in that <a> element above is a transparent gif, now in ie it displays the menus correctly and works as i wanted but when i get to firefox it is only displaying half of the menu image.

Any ideas?

Hi, Andrew.   I'm just posting up a quick welcome.   I'm slightly blearyeyed today (having been woken by an 03:00 phone call!) so not seeing very straight, but I might start by looking for overlapping elements and then go on to simplify my css down to a single hover over element and see if I could track it down that way.

Failing that ... I'll have a look tomorrow morning when I'm that much fresher.

I like the sound of a single hover over element, how would this work if each image in the menu needs a different image to appear when you hover over a link in the menu? Does this make sense? Ugh, my brain is turning to mush. Thanks for the quick reply by the way, i know how busy you are.



I've fixed it by using javascript mouseovers. The code below now displays all the menus correctly across ie and firefox.

<div class="menu_wallpaper">
   <a href="wallpapers.php" onMouseOver="document.getElementById('img_wallpaper').src = 'images/wallpaper_container_on.gif';" onMouseOut="document.getElementById('img_wallpaper').src = 'images/wallpaper_container.gif';">
     <img id="img_wallpaper" src="images/wallpaper_container.gif"></img>
   </a>
 </div>

---