By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,785 Members | 1,079 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,785 IT Pros & Developers. It's quick & easy.

Image Hover problem in firefox

P: 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. :-(
Feb 28 '07 #1
Share this Question
Share on Google+
2 Replies

Expert 100+
P: 1,892
Can you provide either the full code or a link so we can test in each browser.
Feb 28 '07 #2

Expert 5K+
P: 7,435
Preferably a link because we won't have the images.

I have a feeling we are going to find out the problem is in IE. Expanding boxes to contain the absolutely positioned elements. This is a bug in IE.
Feb 28 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.