CSS3 rollover issue in Firefox

Problem

So Im trying to create a menu with simple rollovers using CSS:

img.fade {
  opacity: 1;
  -webkit-transition: opacity .08s linear;
}

img.fade:hover {
  opacity: 0;
}

Html:

<a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/home_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/home_btn.png" class="fade" /></span></a>

     <a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/explore_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/explore_btn.png" class="fade" /></span></a>

     <a href="#" class="main_menu_option"><span style="position: relative;"><img src="img/dives_btn_hover.png" alt="#" class="fade"  ><img style="position: absolute;  left: 0px;" src="img/dives_btn.png" class="fade" /></span></a>

Works OK in safari/chrome but Firefox is having some alignment issues that I can't seem to fix. Any ideas?

Check out the issue here (make sure to view with firefox)

alt text

Problem courtesy of: Thomas

Solution

The original image (yellow) is inline, while the overlaid one is block, the inline one gets slightly different positioning due to the extra spacing inline images get below, I think it has something to do with baseline spacing or something.

In any case, it seems that giving the wrapping span display block fixes the issue. Although I can't attest as to what that does in the other browsers, I just did a quick Firebug hack.

If that doesn't fix it, or messes up in other browsers, you basically have to redo the whole thing slightly so that both images are either block, or inline (or inline-block, maybe, but the point is they have to have the same display style).

Btw, must say, very nice site design :)

Solution courtesy of: ilia

Discussion

  • -webkit- prefixes are for Webkit based browsers (safari, chrome).
  • -moz- prefixes are for Gecko browsers (Firefox).
  • -o- is for Opera.
  • -ms- is for Internet Explorer. (I think it's IE8+ only though)

These are usually used for experimental CSS properties and they are usually in CSS draft (currently CSS3 mostly)

Some of them though, don't have the prefix anymore even if they are still in the draft.(example: border-radius doesn't need the prefix in current released Webkit browsers, and in Firefox 4, but still needed in Firefox 3.6)

Your best solution, and for future compatibility is to always use the prefixed ones, than put the normal property at the end.

Example:

img.fade {
    -webkit-transition: opacity .08s linear;
    -moz-transition: opacity .08s linear;
    -o-transition: opacity .08s linear; /* Haven't tested if it's supported in Opera though */
    /*If it is supported in the IE9 beta and need the prefix, u can also add -ms-transition: opacity .08s linear;*/
    transition: opacity .08s linear;
}
Discussion courtesy of: Dan

Your transition has the -webkit- vendor extension:

-webkit-transition: opacity .08s linear;

So Firefox won't recognize it, because Firefox runs on Gecko, not WebKit. Try adding -moz-transition and see what happens (I've not played with CSS transitions yet myself).

Discussion courtesy of: BoltClock

This recipe can be found in it's original form on Stack Over Flow.