• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 504
  • Last Modified:

CSS Image Rollovers and Firefox Issue

I created image rollovers with CSS and HTML. Works great in IE, I can see the images however in Firefox, the images are missing. I think it has something to do with the HTML code since I've not putting any text in between ....../></a> in firefox, however when I put text in, then I can see the images. I'm not sure what I'm missing, probably a fairly easy fix but I'm not seeing it.

See example here: http://www.chaoticcancellation.com/MDATests/buttons2.htm

Thanks in advance for any help.
CSS Code:
.presidio {
    display: inline;
    width: 65px;
    height: 30px;
    background: url("images/presidio-gold.jpg") no-repeat 0 0;
    outline: none; /* hide dotted outline in Firefox */
.presidio:hover {background: url("images/presidio-white.jpg") no-repeat 0 0;}
HTML Code: 
<a href="#" class="presidio"/></a>

Open in new window

  • 4
2 Solutions
heres a quick little example I put together for you.  This works best across all browsers.  Youll create 2 images and stick them together as one.  Look at the code for examples

Sorry, heres the link:

you can see this better on another page Im currently building for a client.  Look at my left hand menu for the examples:  


The idea is to put both images together as 1 image (the active image on top, and the roll over image on bottom)  then the css moves the image up however many pixels you specify.  so its like taking a picture frame (you can only see whats inside the frame) and sliding the picture Up behind the frame to reveal a second picture.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

PS...other people may tell you onmouseover javascript is an option, but its really not a good one.  It takes like half a second to load the image in IE and FF

Another option (but also not a good one) is to say on the .image:hover css (background: another_image.jpg).  This doesnt work well as it takes a whole second to load in IE, but is instant in FF.
David S.Commented:
The width and height properties aren't supposed to apply to normal inline elements (they do apply to <img> elements which are inline by default). IE is not ignoring them like it should there. Give ".presidio" display:block or float:left.

I agree with, unassassinable. Changing the background-position on hover is much more efficient.
chaotic1Author Commented:
Thank you both, it worked by adding float:left;  and removing display: block.

Unassassinable thanks for the idea about putting both images in one, I never really grasp that idea until I saw your example, my only problem with that idea in this case, its a little jumpy and my client wants it to be really smooth transistion

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now