Tamaño de un enlace vacío

[leeann699]

Hola! estoy utilizando una tecnica para que el servidor descargue menos imagenes, para eso, he dividido la barra de redes sociales y en cada li muestro un cacho, os pongo el ejemplo:
codigo

Código PHP:

  <div id="redes"> 
<ul> 
<li class="facebook" onClick="window.location.href('https://www.facebook.com/aimara.teatro')"><a href="https://www.facebook.com/aimara.teatro" title="facebook" target="_blank"></a></li> 
<li class="twitter" onClick="window.location.href('https://twitter.com/AimaraTeatro')"><a href="https://twitter.com/AimaraTeatro" title="twitter" target="_blank"></a></li> 
<li class="rss"><a href="#" title="twitter"></a></li> 
<li class="mail" onClick="window.location.href('mailto:[email protected]')"><a href="mailto:[email protected]" title="escribir mail"></a></li> 
<li class="youtube"><a href="#" title="youtube"></a></li> 
</ul> 
</div>  
   

css

Código PHP:

  #redes{width:250px; height:54px; position:absolute; right:150px;} 
#redes li{background-image:url(/img/redes.png); width:48px; height:48px; background-repeat:no-repeat; float: left; list-style-type:none; font-size: 0.9em; color:transparent;} 
#redes li:hover{cursor:pointer} 
#redes li a{ width:48px; height:48px;} 
.facebook{background-position:-2px -0px;background-repeat:no-repeat;} 
.twitter{background-position:-52px -0px;background-repeat:no-repeat;} 
.rss{background-position:-101px -0px;background-repeat:no-repeat;} 
.mail{background-position:-150px -0px;background-repeat:no-repeat;} 
.youtube{background-position:-200px -0px;background-repeat:no-repeat;}  
   

Asi en cada li me sale el cacho de la imagen, lo podéis ver en la web cómo queda:
www.aimarateatro.com.

El problema es que en explorer me funciona bien y en firefox no (algo que jamás me hubiera imaginado). El tema es que al tener un enlace vacío, en firefox no funciona cuando pinchas, es más, no hace nada! Lo he cambiado varias veces y puesto de distintas formas, pero solo funciona cuando meto algo dentro de la etiqueta <a > ¿Qué puede ser? Sé que hay gente que lo hace de esta forma, pero no consigo que funcione...

Seguro que es una chorrada que no consigo ver.

Gracias!

[caricatos]

Hola:

Parece una mala práctica... te has asesorado si hubiese penalizaciones "SEO"... tal vez no te importe por el momento, pero no tardarás en preocuparte... y la falta de "accesibilidad" no es nada recomendable...

No entiendo el sentido de la técnica...

Intentas depender de javascript con errores de sintaxis (href no es un método de location)...

Saludos

[Rafael]

A los links conviértelos a inline-block y elimina espacios en el código. Incluso los saltos de línea. A ver si con eso.

[leeann699]

Gracias Rafael, con el in-block funcionó!
Qué quieres decir que elimine los espacios y saltos de linea del código??

Caricatos, pues espero que no sea una penalización porque precisamente lo que busco era optimizar la página... se supone que entre la optimización de imagenes el unir varias es una de ellas (css sprites) y creo que leí que google tambien lo hacía... eso si, igual lo hace distinto? No sé si alguien sabrá...
http://www.posicionar-web.info/seo-a...-web-imagenes/

[ArturoGallegos]

Es muy buena practica usar sprites para las imágenes, a lo que se refiere Caricatos con una mala (yo diría pésima y horrorosa) practica, es el hecho de utilizar javascript para los links cuando no es necesario,

esto esta mal hecho:

Código HTML:

<li class="facebook" onClick="window.location.href('https://www.facebook.com/aimara.teatro')"><a href="https://www.facebook.com/aimara.teatro" title="facebook" target="_blank"></a></li>
 

debe ser

Código HTML:

<li class="facebook"><a href="https://www.facebook.com/aimara.teatro" title="facebook" target="_blank">Facebook</a></li>
 

el evento javascript no viene al caso, es innecesario y un enlace no debe estar vació, si no quieres que se vea el texto utiliza algo como

Código CSS:

.facebook{display:block;width:30px;height:30px;overflow:hidden;text-indent:-100px;background:url(...);}
 

text-indent lo que hace es mover el texto 100px hacia la izquierda y al ser un elemento con ancho de solo 30px el texto queda fuera, ya solo se le aplica overflow:hidden; para que no muestre lo que esta fuera de los limites.