12
Hi, i'm pretty new to CSS and html so please go easy on me.
I'm trying to make a menu, 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, i'd like not to change around with the code too much because i don't want to confuse myself but please please help. I've got to get this working by the end of the week. :-(
