CSS Image Rollovers and Firefox Issue

Posted on 2009-02-21
Last Modified: 2012-06-27
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:

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

Question by:chaotic1
    LVL 9

    Expert Comment

    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

    LVL 9

    Expert Comment

    Sorry, heres the link:
    LVL 9

    Accepted Solution

    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.
    LVL 9

    Expert Comment

    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.
    LVL 42

    Assisted Solution

    by:David S.
    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.

    Author Comment

    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now