posicion relativa de imagenes distintas en mozilla-IE

sintesk7 · #1 (**permalink**) 02/01/2006, 21:37

hola a todos,

Tengo un código de un menu que se me ve perfectamente en mozilla, pero no en IE.

el css es este:

Código HTML:

#topimg
{
	position: relative;
	right: 0px;
	top: 6px;
	z-index: 1;
	border: 0px;
	padding: 0px;
}

#bottomimg
{
	position: relative;
	right: 0px;
	top: -12px;
	z-index: 1;
	border: 0px;
	padding: 0px;
}

y el HTML es este:

Código HTML:

 <div id="sectionLinks"> 
<div id="topimg"><img src="menu_sup.gif" width="190" /></div>

		<a href="http:/miweb.com/menu1.php">menu1</a>
		<a href="http:/miweb.com/menu2.php">menu1</a>
	  	<a href="http:/miweb.com/menu3.php">menu3</a>

<div id="bottomimg"><img src="menu_inf.gif" width="190" /></div>
		</div>

lo que me ocurre es que las imagenes de la cabeza y del pie del menu (en los divs topimg y bottomimg) salen "movidas" con IE

para que se vea correctamente en IE debo editar el css así

#topimg { top: 3px; }

#bottomimg { top: -4px; }

¿Como puedo solucionarlo?
¿es posible asignar distintos "tops" para los diferentes navegadores?

Gracias por su ayuda

kazafun · #2 (**permalink**) 03/01/2006, 04:16

Un ejemplo:

#capa{
margin-left: 30px !important;
margin-left:40px;
}

La primera es ignorada por IE que realiza la segunda. Mozilla realiza la primera.

thunder.scripts · #3 (**permalink**) 03/01/2006, 11:21

IE ignora a !important? No sabía :?

Lo que también podés usar es el hack del guión bajo. Todas las propiedades que empiezen con _ sólo las interpretará el IE:

Código HTML:

#selector {
   _margin: 10px;
   margin: 20px;
}

Los navegadores de verdad le van a dar 20px de márgen, Ie sólo 10.

También podés poner todos los arreglos para el IE en una hoja de estilos aparte y cargarla usando los comentarios condicionales del IE: http://fedeblog.com.ar/?unique_post=220

Suerte
Fede

sintesk7 · #4 (**permalink**) 03/01/2006, 11:29

gracias a los 2, me habeis sido de mucha ayuda.

Buscando por la red he encontrado varios ejemplos al estilo de lo que proponeis.

Será cuestión de combinarlos segun las necesidades que tenga

Me refiero a las expresiones como:
!important
_width
/witdth
etc...

Saludos y gracias!

thunder.scripts · #5 (**permalink**) 03/01/2006, 11:40

Lo que yo prefiero son los comentarios condicionales, de esa forma te queda una hoja de estilos limpita y otra con todo lo "atado con alambre" para el IE.

Suerte
Fede

sintesk7 · #6 (**permalink**) 03/01/2006, 19:22

Revisaré lo de los comentarios condicionales

es que usando hacks de los navegadores me da la impresión de estar haciendo una chapuza

Gracias y Saludos!!

thunder.scripts · #7 (**permalink**) 03/01/2006, 19:37

En http://fedeblog.com.ar/?unique_post=220 lo expliqué lo mejor que pude. Básicamente se trata de insertar código dentro de comentarios html que sólo es interpretado por el IE (se puede especificar por qué versiones y todo).

Entonces, insertás la línea que llama a la hoja de estilos con los arreglos para el IE dentro de un comentario condicional de tal forma que sólo el IE la cargue, para el resto de los navegadores será un comentario más.

Cita:

es que usando hacks de los navegadores me da la impresión de estar haciendo una chapuza

Y sí... se hace lo que se puede para que los sitios se vean decentemente en IE, ojalá no por mucho.

Suerte
Fede

frijolerou · #8 (**permalink**) 04/01/2006, 10:42

Ojo con el uso de !important, con esa orden le dices al browser (excepto IE) que la propiedad a la que se le ha asignado (ej:color, font, etc.) no puede ser modificada por el usuario (por ejemplo si ha definido que su navegador utilice su propia hoja de estilos para visitar los sitios).