problemita con el hover en ie6

Como soluciono que mi menu en estado de reposo se ve bien y el hover se ve tambien bien.. en ie7 y firefox... pero en ie 6 el hover se me descuadra mucho....veanlo porfa http://menuleft2.educalogos.net/ yo se que puede ser una breve linea pero es un cliente importante y me pide que se vea en ie6

Si puedes, sube un screenshot, pues no tengo el IE6.
Si no... no se... intenta con lo típico (si no lo has hecho ya):

• ponerle el ancho fijo, y no dejar que lo adopte según su contenido.
  
• ponerle "overflow:hidden" (para que no crezca nunca, y bajo ninguna circunstancia, de tamaño)
  
• ponerle "margin:0px;padding:0px;" (o los que sean apropiados para tu menú)
  
• ponerle "position:relative;top:0px;left:0px;" (para que estén bien colocados)

Estas cuatro cosas, juntas, suelen funcionar muy bien.
Si pones un screenshot del problema, quizá lo pueda ver mejor.

Viejo men.. disculpa mi ignorancia pero no tengo donde subir los screenshots pense que se podian subir aqui como cualquier archivo pero no encuentro como... te los puedo mandar al correo?

Pues, yo lo veo igual en IE6, IE7. Firefox, Safari (para Windows) y Opera. Lo único que el texto no está centrado en el menú (en ninguno de los casos) pero lo exactamente igual en todos los exploradores.

fernandopitecus escribió:

Has trabajado en la página de CCOO y no conoces http://imageshack.us/, desde aquí te declaro mi admiración.


Bueno, sube a imageshack los screenshot, y veremos a ver, aunque si The Fricky! lo ve igual en todos los navegadores...

Observando tu hoja de estilo me percaté que tienes lo siguiente:

Código :

#menu li a {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color: #333333;/*Letra Menu*/
   font-size:11px;
   font-weight: lighter;
   text-decoration: none;
   background: url(../img/menu_principal/nav-separator.gif) top right no-repeat;
   padding-top:10px;
   padding-bottom:15px;
   padding-left:5px;
   padding-right:5px;
   display:block;
}

#menu li a:hover {
    background-image:url(../img/menu_principal/boto-ver.jpg);
   background-repeat:repeat-x;
   height:13px;
   color:#FFFFFF;
}

Omití unas líneas, aquí el detalle es que tu estado normal y el estado hover no tienen las propiedades que deberían tener en común, es decir, cuando está en estado normal tiene un diseño y cuando está en hover debe tener otro, pero a pesar de estas diferencias ambos deberían ser display: block, cosa que el hover no lo tiene.

te sugiero que hagas la siguiente modificación:

Código :

#menu li a, #menu li a:hover {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   color: #333333;/*Letra Menu*/
   font-size:11px;
   font-weight: lighter;
   text-decoration: none;
   background: url(../img/menu_principal/nav-separator.gif) top right no-repeat;
   padding-top:10px;
   padding-bottom:15px;
   padding-left:5px;
   padding-right:5px;
   display:block;
}
...

Esto puede ayudar a resolver el problema
¡Saludos!

M... puede que me equivoque... pero, tengo entendido, que, por defecto, la pseudoclase ":hover" hereda todas las propiedades del estado "normal". Por ello, sólo se necesitan cambiar las propiedades que deben presentarse diferentes. Las que sean compartidas, no hace falta definirlas explicitamente.

El consejo de cris_dpa será muy fácil probarlo (y rápido); si te funciona, ponlo, pues será una información muy útil para otros muchos problemas similares.

rizome tiene razón, las pseudoclases (hover, visited, link) heredan las propiedades de la etiqueta, así que no hace falta repetirlas en cada pseudoclase.

No estés tan seguro, es como usar text-align: center para centrar un div, en teoría debería funcionar, pero no es así. Uno se lleva muchas sorpresas en diseño web. Te aconsejo que lo intentes, no pierdes nada y asumir no es muy recomendable en esta caso.

Otra cosa que olvidé comentar, es que tienes varias clases que hacen referencia al mismo menú, haciéndolo muy ambigïuo, es muy probable que estés confundiendo al navegador.

¡Saludos!

cris_dpa escribió:

Ehm... si no me equivoco... "text-align" controla la alineación de los elementos de línea:

En 'mozilla developer center', se escribió:

Es decir, que "text-align" no podrá nunca controlar la alineación de una tabla, de un div, u otros elementos de bloque, sino sólo el texto (u otros elementos de línea) que estos contienen.

[quote=\"cris_dpa\"]No estés tan seguro, es como usar text-align: center para centrar un div, en teoría debería funcionar, pero no es así. Uno se lleva muchas sorpresas en diseño web. Te aconsejo que lo intentes, no pierdes nada y asumir no es muy recomendable en esta caso.[/quote]

The Fricky! no está inventando cris_dpa, si lo dice es porque ya tiene la suficiente experiencia para fundamentar lo que comenta. Lo que dice es correcto.

No quiero seguir con el tema, pero si lo digo es porque ya lo he experimentado (y varias veces). Otra cosa sería que haya conflictos entre atributos de id y/o clases que apunten al mismo elemento. Por otro lado, lo de text-align es utilizado como un hack para centrar elementos en IE (6 ó 5, ahora mismo ya no recuerdo), que no interpreta al margin:auto, pero su misión es, como bien dice rizome, definir la alineación del texto.