Alguien me explica por qué IE me hace esto?

AlZuwaga · #1 (**permalink**) 04/07/2006, 13:46

Hola, tengo algo muy simple:

Código:

<a href="http://.../" class="banners"><img src="1.jpg" alt="" width="150" height="50" border="0" /></a>
<a href="http://.../" class="banners"><img src="2.jpg" alt="" width="150" height="50" border="0" /></a>


.banners {
	display: block;
	width: 154px;
	padding-top: 2px;
	padding-bottom: 2px;
	background-color: #E1E1E1;
	text-align: center;
	margin-bottom: 5px;
	/* EL BORDE LO PUSE PARA VER SI ERA UN PROBLEMA CON LOS MARGENES QUE COLAPSAN */
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
}
.banners:hover {
	background-color: #FCA000;
}

Lo pueden ver aquí: http://personal.alzuwaga.com.ar/ (son los banners de la derecha)
Si se fijan con IE, este tiene un comportamiento extraño... como que se mueven las imágenes.
¿Cuál es el problema? ¿Y la solución? :)

Gracias

AlZuwaga · #2 (**permalink**) 04/07/2006, 15:00

Edité el código de arriba, decía margin y era margin-bottom: 5px

Bueno, en vez de un margin-bottom le puse un margin-top de 5px y funciona... ¿raro o no?

ngl_80 · #3 (**permalink**) 04/07/2006, 15:45

oye master..
el css que tienes en el sitio dice lo siguiente en la parte del
.banners:

.banners {BORDER-TOP: #000000 1px solid; DISPLAY: block;
PADDING-BOTTOM: 2px;

MARGIN: 0px 0px 5px;

WIDTH: 154px; PADDING-TOP: 2px; BACKGROUND-COLOR: #e1e1e1; TEXT-ALIGN: center}
.banners:hover {BACKGROUND-COLOR: #fca000}

Lo UNICO que necesitas hacer es:
corregir la indicacion de margenes que esta incompleta, ya que el iexplorer
la esta "interpretando" como mejor cree que debe estar..

o sea:

MARGIN:0px 0px 0px 5px;

Solo tienes que agregarle el tamaño..
no recuerdo la definicion, pero
creo que debes revisar cual es la regla para
el número de atributos al especificar bordes,
si es uno aplica a todos
si son dos.. etc..

Saludos desde Merida Yucatan.. Espero te sirva de algo

AlZuwaga · #4 (**permalink**) 04/07/2006, 15:55

Qué raro, porque yo veo esto en el CSS:

Código:

	margin-bottom: 5px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;

ngl_80 · #5 (**permalink**) 04/07/2006, 16:10

ahhh

...

yo revise la version de las.. mm caramba!.. como a las tres de la tarde (creo)
antes de que pusieras la correccion de los margenes:

las dos definiciones son iguales;
solamente que la que tu pones es más específica, cualquiera de las dos esta bien, ya que ambas son aceptadas en las reglas del css (w3c)
ahh.. entonces la respuesta llegó tarde

jejeje.. disculpa

pero no importa, lo importante es que ya funciona y ya sabemos porque

saludos

AlZuwaga · #6 (**permalink**) 04/07/2006, 16:19

Pero no he tocado nada del archivo de muestra!
O sea, siempre estucvo así:

margin-bottom: 5px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;

que es como yo lo deseo, pero así no funciona bien con IE

pero para que funcione sin inconvenientes en ie debo ponerlo así:

margin-bottom: 0px;
margin-top: 5px;
margin-right: 0px;
margin-left: 0px;

Y realmente me gustaría controlar a gusto y piacere el margen inferior... no el superior.

en realidad, es casi lo mismo... pero al menos me gustaría saber si es algún bug conocido o qué. Igual, como puse un css para IE, voy a dejarlo funcionando como yo quiero para FF y a el otro le pongo que tome el margen superiuor en vez del inferior.

Gracias