Listas en IE y firefox

[iPunto]

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?

[Remo:Erdosain]

1) A no puede contener a H1
2) H1 tiene un tremendo margen. Proba con h1 {margin:0px;}