menu de css no me funciona en internet explorer 7

[rufus]

que el menu que he hecho con css no me funciona correctamente con el internet explorer 7.. las letras si se me cambian de color pero el fondo no..y en el mozilla firefox funciona perfectamente. este es el codigo que e usado:

Código:

	  <div id="menu">
	 
<ul class="menu2">

  <li><a href="index.php"><span>Bio</span></a></li>
    <li><a href="#"><span>noticias</span></a></li>
  <li><a href="#"><span>discografia</span></a></li>
  <li><a href="#"><span>fotos</span></a></li>
  <li><a href="#"><span>descargas</span></a></li>
  <li><a href="#"><span>videos</span></a></li>
  <li><a href="#"><span>booking</span></a></li>
  
</ul>
</div>

Código:

/*menu principal isaac maya*/

.menu2{/* margin-left:-22px; margin-top:25px;*/ padding-left:1px; padding-top:5px; width:152px; list-style:none;  margin-top:20px; background-color:#fee198;  }



.menu2 li{padding:0; margin:0 0 1px 0; height:30px; display:block; background-position:center; background-repeat:no-repeat; }

.menu2 li a{text-align:left;height:50px;
padding-top:10px; padding-left:13px; font:12px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('imagenes/frontal888.jpg') 0px 0px no-repeat; text-decoration:none;}

.menu2 li a:hover{background:url('imagenes/trasera888.jpg') 0px -5px no-repeat; color:rgb(255,255,255); color:#000000;}


.menu2 li a span{line-height:15px;}

#menu2 img{   padding-top:30px; padding-left:10px; }

[kaninox]

pues IE hasta la versión 8 creo no se en realidad, no reconoce la etiqueta hover para elementos de ese tipo, hasta donde se se puede hacer con javascript, o agregando algún hack css, como es de costumbre con nuestro amigo IE...
puedes optar también por onmouseover(); y onmouseout();

es lo que se me ocurre por el momento saludos...

[danneg]

mira no he intentado utilizar hover en ie7, pero en ie8 funciona muy bien,

lo que puedes acer es usar los atributos directamente en la etiqueta <a> que es donde todos los exploradores sin ecepcion lo reconocen,

el ie solo reconoce hover en esta etiqueta y la omite para las demas

[tunait]

Tema trasladado desde Web general

[nfo]

Desde que salio Ie 8, a mi me esta costando la vida centrar menus y cosas asi.... hace cosas muy raras la cosa esq consigo un buen aspecto en Ie7 y con ie8 me sale rarisimo... que asco de Ie8.

Lo que hago es usar un css para cada Ie

[kseso?]

Hola Rufus:
Ie7 sí reconoce la pseudoclase :hover en elementos distintos a los enlaces.

Lo que he observado son unas incongruencias y contradiciones en tu código:

/*menu principal isaac maya*/
.menu2 {/* margin-left:-22px; margin-top:25px;*/ padding-left:1px; padding-top:5px; width:152px; list-style:none;] margin-top:20px; background-color:#fee198; }
.menu2 li {padding:0; margin:0 0 1px 0; height:30px; display:block; background-position:center; background-repeat:no-repeat; }
.menu2 li a {text-align:left;height:50px;
padding-top:10px; padding-left:13px; font:12px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('imagenes/frontal888.jpg') 0px 0px no-repeat; text-decoration:none;}
.menu2 li a:hover {background:url('imagenes/trasera888.jpg') 0px -5px no-repeat; color:rgb(255,255,255); color:#000000;}
.menu2 li a span {line-height:15px;}
#menu2 img { padding-top:30px; padding-left:10px; }

list-style sólo lo puedes aplicar a elementos con "display:list-item", así que .menu2 no debería tenerlo. Generalmente se le aplica a los "li" de una lista (ul).

Alojas en los "li" unos elementos mayores que él mismo (li= 30px de alto y el enlace 50px, sin contar los padding. También declaras unos valores para un fondo que no existe. Mejor usar la forma abreviada para aaquellas propiedades que la admiten (como background, margin, padding...) y en vez de dar tamaño a los elementos de la lista (li) darle esas propiedades al enlace.

No se si acortaste el html, pero según lo que has puesto, el span es innecesario, al ser los enlaces texto puedes darle la latura de línea también a ellos. Pero al ser una sóla palabra, no sería necesario, el centrado vertical lo lograrías como te he comentado, sin altura en los "li" y con igual valor en el padding superior e inferior de los enlaces.

Oppssss, disculpa el rollo, me alargué más de lo que quería. No sé si con esto se arreglará tu problema, pero seguro que tampoco lo agrava.

Un saludo