Background-position en hover no funciona con Opera y FF

[Threepwood]

Hola!


Estoy trabajando coon una modificación del menu circular de metal-ize y tengo problemas con el efecto -hover de los iconos donde debe de aparecer un circulo verde de fondo.

Explico: tengo una imagen gif de 45x 90 con dos iconos: el estado normal y el hover. El codigo es el siguiente:

Código HTML:

 ul#menu a.menitem:link, ul#menu a.menitem:visited {
        background-position: left bottom;
        opacity: .7;
    }
    
    ul#menu a.menitem:hover, ul#menu a.menitem:active,  {
        background-position: left top;
        background-color: transparent;
        opacity: .9;
    }

Y el html es así:

Código HTML:

<ul id="menu">
    <li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li></ul> 

El probema es que el efecto si funciona en IE (el fondo se mueve) pero no en Opera ni Firefox... y bueno, el menu circular si se ve bien en todos los navegadores... no sé a que pueda deberse.

Alguna idea?

Gracias

[acoevil]

IE:

filter: alpha(opacity=50)

Firefox:

opacity: .5

Mozilla:

-moz-opacity:0.5

El siguiente ejemplo funciona en los dos navegadores:

<style type=”text/css”>
.ejemplo {width: 100%; background-color: red}
.opaco {filter: alpha(opacity=50); opacity: .5}
</style>

<p class="ejemplo">Ejemplo sin opacity.</p>
<p class="ejemplo opaco">Ejemplo con opacity a 50%.</p>
<p><img src="imagen.gif" width="100" height="109"><img src="imagen.gif" class="opaco" width="100" height="109"></p>


CREO QUE ESO ES LO QUE BUSCAS
SI LO QUE INTENTAS CON EL EFECTO OPACITY ES DIFERENTE LA SINTAXIS EN LOS 2 NAVEGADORES