SObre el estupido IE y los sprites

Porque cuando tengo un css asi

Código :

body{
margi:0px;
}
.sprite{background:url(images/sprite.png) no-repeat;padding:0 0 0 18;}
.balloon-left { background-position: 0 0; width: 16px; height: 16px; } 

y un html

Código HTML :

<a href="#" class="sprite balloon-left ">El link</a>

En Firefox Chrome Sfari y Opera, sale bien, osea :
[] El link
Donde [] es el icono del sprite.

Y en IE (es el unico en el que pasa esto
sale:

[1]El
[2]link

[] son imagenes la 1 es la que deberia aparecer y la 2 es la esta abajo en la imagen del sprite pero se ve aparte de que si el texto es más grande pone un salto de linea y hace que se vean mas imagenes que estan más abajo. ¿Estoy imprementando mas el spirte o hay algo mal en otra cosa gracias?

yo aca no tengo IE, no sabría si lo que estoy pensando es lo cierto o no, pero hice una prueba y pasó lo que estas exponiendo aca. El problema se da porque le estas dando un ancho a la cada del <a> muy corto: width: 16px; height: 16px; es un tamaño muy pequeño, y el texto necesariamente salta de linea, por eso queda

El
link

Si no se pone la propiedad display:block de la etiqueta <a>, en los navegadores no se va a aplicar el width ni el height, por lo que el texto va a quedar en una sola linea, pero parece ser que en IE no pasa eso.

Yo diría que para solucionar eso elimines el width y height, o que le des un width mayor.

gosunkugi escribió:

lol se me fue mal el dedo, quise decir "la caja"

hora otro comportamiento con el mismo html dentro de un php tiene el mismo comportamiento que en ie pero en todos los demas con el extra de que no respetan el padding en ninguno y se ve encimado

hola dan12, si no te respeta el padding... finalizando los espacios que des por ejemplo padding:10px 0 0 20px
Agrega la declaracion !important;

Por ejemplo tu padding quedaria: #midiv o .miclass {padding:10px 0 0 20px !important;}

Tal vez asi te funcione.

Saludos.