Foros del Web » Creando para Internet » Diseño web »

incompatibilidad con IE6

Estas en el tema de incompatibilidad con IE6 en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/09/2009, 05:55
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
incompatibilidad con IE6

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.
  #2 (permalink)  
Antiguo 28/09/2009, 06:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: incompatibilidad con IE6

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/09/2009, 06:19
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: incompatibilidad con IE6

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

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

Gracias
  #4 (permalink)  
Antiguo 28/09/2009, 06:33
Avatar de frasko01  
Fecha de Ingreso: junio-2008
Mensajes: 200
Antigüedad: 9 años, 5 meses
Puntos: 3
Respuesta: incompatibilidad con IE6

Ya está.

Sólo faltaba ponerle "overflow: hidden"
  #5 (permalink)  
Antiguo 28/09/2009, 06:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: incompatibilidad con IE6

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 00:00.