incompatibilidad con IE6

[frasko01]

Hola amigos

Tengo un problema con un menú hecho con imágenes, en firefox o cualquier otro navegador se ve así:


Pero en IE6 se ve así:


El código que he usado es:

Código HTML:

<div class="menu">
	        <a href="index.php" id="empresa"></a>
                <a href="noticias.php" id="noticias"></a>
                <a href="obras.php" id="obras"></a>
                <a href="calidad.php" id="calidad"></a>
                <a href="#" id="galeria" class="s"></a>
                <a href="prensa.php" id="prensa"></a>
                <a href="contacto.php" id="contacto"></a>
			</div> 

[CSS]
.menu{
padding-left:70px;
max-height:120px;
}
.menu a {
display:block;
border:none;
background-repeat:no-repeat;
width:120px;
height:9px;
margin-top:6px;
}

.menu a:hover { background-position: 0 -9px; text-decoration: none; }
.menu .alt { display:none; }
.menu a.s { background-position: 0 -9px; }
.menu a#empresa { background-image: url(../imagenes/empresa.gif) }
.menu a#noticias { background-image: url(../imagenes/noticias.gif) }
.menu a#obras { background-image: url(../imagenes/obras.gif) }
.menu a#calidad { background-image: url(../imagenes/calidad.gif); height:19px; }
.menu a#calidad:hover { background-position: 0 -19px; text-decoration: none; }
.menu a#calidad.s { background-position: 0 -19px; }
.menu a#galeria { background-image: url(../imagenes/galeria.gif) }
.menu a#prensa { background-image: url(../imagenes/prensa.gif) }
.menu a#contacto { background-image: url(../imagenes/contacto.gif) }
[/CSS]

¿Habría alguna forma de arreglarlo?

He probado miles de formas con los CSS pero no hay manera.

Gracias de antemano.

Saludos.

[kseso?]

Supongo, por la diferencia de color, que estás utilizando sprites para las imágenes. ¿Cierto?

Prueba a hacer el menú como se debería. Con una lista (ul/li/a)
Los tamaños se los asignas a los 'li' así como los márgenes para lograr la separación. Y los fondos y su :hover a los enlaces ('a')

Y si son sprites, deberías dejar algo más de separación entre las imágenes.

Pero como falta código, quizás haya otras definiciones que le afecten por la herencia. Si pudieses poner un enlace a la página, seguro que alguien encuentra una respuesta más certera.

Un saludo

[frasko01]

La web está en:
http://www.colmeneroyrodriguez.com/c...mopa/index.php

Voy a probar a hacerlo con listas a ver si funciona.

Gracias

[frasko01]

Ya está.

Sólo faltaba ponerle "overflow: hidden"

[kseso?]

Edito por tardón y andar embaído.
Efectivamente, el tema está en que te muestra la parte inferior del sprite.

Prueba como te decía:
Dale la anchura y altura a 'li' en px, los 'a' con anchura y altura de 100%.

Bien por tí, entonces.

Aunque en este caso, yo personalmente no optaría por esa forma de poner las imágenes vía css, pues son relevantes. En caso de no cargar el css o las imágenes, los visitantes se quedan sin menú.

Si pones las imágenes como fondos, al menos incluye un 'span' con el texto correspondiente y aplica un 'tex-indent' con un valor negativo lo suficientemente bajo como para sacarlo del campo de visión.
O mejor, coloca las imágenes vía 'src' con su 'alt' y 'title' correspondientes, lo mismo pero en texto dentro de su 'span', con posición absoluta (las 'a' y las imágenes con relativa) y el texto lo escondes debajo de la imagen aplicando un 'z-index' mayor a la imagen que al 'span'.

Pero sólo es una sugerencia.

Un saludo