472,807 Members | 4,448 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,807 software developers and data experts.

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 3066
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

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

Similar topics

by: Chris Beall | last post by:
I'm displaying an image that is also a link against a black background. In Netscape 7.1, the current background color is displayed as a horizontal bar below the image. This allows :hover effects...
by: killerkatt | last post by:
I am new to CSS and would like to know if there is a way to make this happen with CSS: image1 and image 2 are laid out at the top of the page. when the mouse hovers over image1, a paragragh or...
by: Applebrown | last post by:
I've got a couple of errors on my site that I'm not sure how to fix. I'm using simple CSS for both text rollovers and my horizontal navbar, and here's what happens. First, the site: ...
by: Frostillicus | last post by:
Does anyone know how to get around the problem IE seems to suffer from whereby an image within an anchor tag ignores the :hover pseudo element for the anchor in which it lives? Firefox is fine but...
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
by: KiwiBrian | last post by:
On a web page I have a graphic for a Shopping Cart Submit button. It is within a form and working fine. I would like to perform an image swap to an identical graphic of a different colour when I...
by: fredo | last post by:
I've studied Eric Meyer's pure css popups, version two: http://meyerweb.com/eric/css/edge/popups/demo2.html which pops up an image when I roll over a text link. Now I want to pop up a large...
by: Cate Archer | last post by:
I want to have a border around an image that changes color when the mouse hovers over it. The following code works perfectly in FireFox but not in Internet Exploiter. The text link changes color...
by: timmyb | last post by:
I have an image that is supposed to be in a centered div in the center of a page. It looks fine in IE7. But in Firefox, the image is pushed way over to the right. ...
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
by: lllomh | last post by:
How does React native implement an English player?
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.