Image Hover problem in firefox

12 New Member

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_but ton {background:url (images/wallpaper_conta iner.gif);}
a.wallpaper_but ton:hover {background:url (images/wallpaper_conta iner_on.gif);}

a.screenshot_bu tton {background:url (images/screenshot_cont ainer.gif);}
a.screenshot_bu tton:hover {background:url (images/screenshot_cont ainer_on.gif);}

a.downloads_but ton {background:url (images/downloads_conta iner.gif);}
a.downloads_but ton:hover {background:url (images/downloads_conta iner_on.gif);}

div.menu_wallpa per {position:absol ute; left:17px; top:220px; height:50px; width:200px; background-color:transpare nt;}
div.menu_screen shot {position:absol ute; left:17px; top:270px; height:50px; width:200px; background-color:transpare nt;}
div.menu_downlo ads {position:absol ute; left:17px; top:320px; height:50px; width:200px; background-color:transpare nt;}

I have then done the following in the html document
<div class="menu_wal lpaper"><a class="wallpape r_button" href="wallpaper s.php" target="_blank" ><img src="images/overlay.gif"></img></a></div>
<div class="menu_scr eenshot"><a class="screensh ot_button" href="screensho ts.php" target="_blank" ><img src="images/overlay.gif"></img></a></div>
<div class="menu_dow nloads"><a class="download s_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

Subscribe Reply

3130

AricC

1,892

Recognized Expert Top Contributor

Can you provide either the full code or a link so we can test in each browser.

Feb 28 '07 #2

drhowarddrfine

7,435

Recognized Expert Expert

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

Similar topics

3473

Image background color wrong on N7.1 - Help?

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 that change the background color to have a visible effect, as this bar changes color. By default, it appears that the color is inherited from the body color, i.e. with no link style applied, the bar is black, and invisible against the background....

HTML / CSS

10045

Rollover makes text appear below image?

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 so of formatted text appears below, when the mouse leaves the image, the text disappears; when the mouse hovers over image2, a different body of text appears in

HTML / CSS

3059

CSS text and image rollovers: two issues

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: www.sunbadgeco.com/sunmetal/index.htm #1 { In IE6, rolling over an image in the navbar makes it "light" up. Clicking on the image takes you to another page (which is not finished). Then clicking the Back button keeps the image you just clicked on "lit" up,...

HTML / CSS

2720

Image within anchor tag not "hoverable"

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 when I hover my mouse of the link (with an image and some text) in IE, the :hover selectors take effect over the text but not the image. Thanks.

HTML / CSS

12792

image class with hover

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 and style, while the hover class has a different color and style. I have the entries: a:link .image { border-color: #151515; border-style: solid; border-width: 2px; }

HTML / CSS

8293

Image swap on a Form button

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 hover over the button. Can anyone show me how to do this, or point me to an implementation. My present code for the submit button is:- <input type="image" name="submit" src="images/addtocart1.gif"> This changes the cursor to a hand, and operates...

HTML / CSS

27482

css-only image popup when hover image link: is it possible?

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 image when I roll over a thumbnail. I've tried some things, but can't make it work. See here (Warning: adult matter):

HTML / CSS

17272

Image Links and Hover not working on IE

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 but the image link stays the same. Anybody know how I can make it work in IE? I saw a web site where the guy got it to work in both browsers. <html> <head> <title>TEST</title>

HTML / CSS

2154

help with image way off to the right

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. http://www.barmannphotography.com/index1-test.php I've tried adding display:block; directives to the div, to the div above it and to the containing div, to no avail. I've also tried clearing below the navigation bar and that hasn't

HTML / CSS

8057

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8491

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8470

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8142

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8329

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6813

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6010

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

1580

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1327

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General