Foros del Web » Creando para Internet » CSS »

Listas en IE y firefox

Estas en el tema de Listas en IE y firefox en el foro de CSS en Foros del Web. Tengo la siguiente lista para crear un menu en XHTML: Código: <div id="IMenu"> <ul> <li class="COpcion"><a href="index.htm"><h1 id="IOpcion1Menu"><span>Opcion 1</span></h1></a></li> <li class="COpcion"><a href="index.htm"><h1 id="IOpcion2Menu"><span>Opcion 2</span></h1></a></li> <li ...
  #1 (permalink)  
Antiguo 04/04/2005, 15:53
 
Fecha de Ingreso: noviembre-2004
Mensajes: 92
Antigüedad: 13 años
Puntos: 0
Listas en IE y firefox

Tengo la siguiente lista para crear un menu en XHTML:

Código:
<div id="IMenu">
<ul>

<li class="COpcion"><a href="index.htm"><h1 id="IOpcion1Menu"><span>Opcion 1</span></h1></a></li>

<li class="COpcion"><a href="index.htm"><h1 id="IOpcion2Menu"><span>Opcion 2</span></h1></a></li>

<li class="COpcion"><a href="index.htm"><h1 id="IOpcion3Menu"><span>Opcion 3</span></h1></a></li>

<li class="COpcion"><a href="index.htm"><h1 id="IOpcion4Menu"><span>Opcion 4</span></h1></a></li>

<li class="COpcion"><a href="index.htm"><h1 id="IOpcion5Menu"><span>Opcion 5</span></h1></a></li>

<li class="COpcion"><a href="index.htm"><h1 id="IOpcion6Menu"><span>Opcion 6</span></h1></a></li>

</ul>
</div>
Aplico FIR para cada id IOpcion?Menu, pero sobre la etiqueta a y a:hover para conseguir el rollover:

Código:
#IMenu a:hover {
	BACKGROUND: none;               /* Para que funcione en IE */
	text-decoration: none;
}

#IMenu a h1#IOpcion1Menu {
	background-image: url(Imagenes/Opcion1_Off.jpg);
	background-repeat: no-repeat;
	height: 14px;
	width: 112px;		
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

#IMenu a:hover h1#IOpcion1Menu {
	background-image: url(Imagenes/Opcion1_On.jpg);
	background-repeat: no-repeat;
	height: 14px;
	width: 112px;		
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

#IMenu h1#IOpcion1Menu span {
   display: none;
}
En Firefox funciona de lujo, y las imagenes aparecen una debajo de la otra, pero el IE aparece una separacion entre cada imagen.

¿Es debido a que para IE cada li tiene un tamaño mínimo y mis imagenes son más pequeñas?

¿Como se puede eliminar esta separacion?
  #2 (permalink)  
Antiguo 04/04/2005, 23:34
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
1) A no puede contener a H1
2) H1 tiene un tremendo margen. Proba con h1 {margin:0px;}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:15.