Comunidad de diseño web y desarrollo en internet online

SObre el estupido IE y los sprites

Citar            
MensajeEscrito el 07 Ago 2010 04:23 pm
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?

Por dan12

155 de clabLevel



Genero:Masculino  

México

firefox
Citar            
MensajeEscrito el 08 Ago 2010 03:52 am
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.

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 08 Ago 2010 03:54 am

gosunkugi escribió:

... un ancho a la cada del <a> ....

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

Por gosunkugi

Claber

251 de clabLevel

1 tutorial

Genero:Masculino  

Kuri - frontend dev - XueZhongWen!

safari
Citar            
MensajeEscrito el 08 Ago 2010 04:39 pm
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

Por dan12

155 de clabLevel



Genero:Masculino  

México

opera
Citar            
MensajeEscrito el 15 Ago 2010 10:42 am
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.

Por Merca-Tech

51 de clabLevel



 

msie7

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.