470,647 Members | 1,212 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,647 developers. It's quick & easy.

Image Hover problem in firefox

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
2 2891
1,892 Expert 1GB
Can you provide either the full code or a link so we can test in each browser.
Feb 28 '07 #2
7,435 Expert 4TB
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.

Similar topics

5 posts views Thread by Chris Beall | last post: by
6 posts views Thread by killerkatt | last post: by
15 posts views Thread by Applebrown | last post: by
1 post views Thread by Frostillicus | last post: by
8 posts views Thread by JLahm | last post: by
7 posts views Thread by KiwiBrian | last post: by
7 posts views Thread by Cate Archer | last post: by
11 posts views Thread by timmyb | last post: by
reply views Thread by warner | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.