No me funciona mi menú CSS en IE 7

Distriker · #1 (**permalink**) 27/04/2009, 12:23

Hola a todos, tengo este menú en mi página web y el problema es que en IE 7 no se ve, pero el problema es peor ya que para que se vea bien en el IE 7 tengo esto:

Código HTML:

<!--[if lte IE 6]><a href="#" class="nivel1ie">Blog<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Y esto en el CSS:

Código css:

Ver originaltable.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

El menú entero es este:

Código HTML:

<div id="menu">

<ul>
  <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Consolas</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Consolas<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
        <li><a href="#">PSP Fat/Slim/3000</a></li>
        <li><a href="#">NDS</a></li>
        <li><a href="#">XBox/Xbox 360</a></li>
        <li><a href="#">PC</a></li>
        <li><a href="#">Otras consolas</a></li><br />
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

  <li class="nivel1"><a href="#" class="nivel1">Juegos</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Juegos<table class="falsa"><tr><td><![endif]-->
    <ul class="dos">
        <li><a href="#">Guías</a></li>
        <li><a href="http://www.google.es">Manuales</a></li>
        <li><a href="#">Analisis</a></li>
        <li><a href="#">Trucos</a></li>
            </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Foro</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Foro<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Blog</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Blog<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Servicios</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Servicios<table class="falsa"><tr><td><![endif]-->
    <ul class="cinco">
        <li><a href="#">GameServers</a></li>
        <li><a href="#">Radio</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul>
</li>


</div>

¿Cuál es el problema?

Saludos

Triby · #2 (**permalink**) 27/04/2009, 13:06

El problema es que las configuraciones condicionales se aplican solo para IE versiones 6 y anteriores, cambia todos los <!--[if lte IE 6]> por <!--[if lte IE 7]> a ver si se soluciona.

Distriker · #3 (**permalink**) 27/04/2009, 14:52

Hola Triby, ha pasado algo horroroso, observa.

Ya cambie eso como dijistes.

Saludos

Triby · #4 (**permalink**) 27/04/2009, 15:14

Cita:

Iniciado por Distriker

... para que se vea bien en el IE 7 tengo esto...

Ups! definitivamente, vuelve a ponerlo con 6 en vez de 7 y muestranos como queda. Seguramente algun otro estilo dentro de la pagina esta afectando la presentacion del menu, porque viendo el que hizo Mikmoro funciona en cualquier navegador.

Newbie001 · #5 (**permalink**) 27/04/2009, 15:35

cual es el problema con IE que tuviste que hacer todas esas chanchadas? estoy seguro que se puede arreglar de una forma mas simple

Distriker · #6 (**permalink**) 22/05/2009, 11:30

Cita:

Iniciado por Triby

Ups! definitivamente, vuelve a ponerlo con 6 en vez de 7 y muestranos como queda. Seguramente algun otro estilo dentro de la pagina esta afectando la presentacion del menu, porque viendo el que hizo Mikmoro funciona en cualquier navegador.

Hola Triby, mira mi hoja de estilos al completo:

Código css:

Ver originalbody {
    text-align: center ;
  }
    
        /* Propiedades de la cabecera */
 
#cabecera {
    background-color: #41A6C2 ;
    margin-bottom: 5px;
        border: 5px  91F0FF solid;
          }
            
        /* Propiedades del contenido */
 
#contenido {
    width: 1024px ;
margin: 0 auto 0 auto ;
    background-color:  #666666 ;
    border:5px solid #052B02 ;
    }
    
        /* Propiedades del sidebar-derecho */
    
#sidebar-izquierda {
      background-color:#33FF00;
      border:5px solid #2D2D2D;
      float:left;
      margin:3px;
      padding:5px;
      width:115px;
      }
            
                /* Propiedades del sidebar-izquierda */
 
#sidebar-derecha {
    border:5px solid #2D2D2D;
    width: 115px ;
    float: right ;
        margin: 3px ;
    padding: 5px ;
    background-color: #33ff00;
  }
    
    /* Propiedades del centro */
 
#centro {
    border:5px solid #2D2D2D ;
    width: 702px ;
    background-color: #91F0FF ;
    float: left ;
    text-align: left;
    margin-left: 15px ;
    margin-right: 15px ;
    margin-bottom: 15px;
        }
 
#centro p {
margin-left: 10px;
margin-right: 5px; 
}
 
#centro h1 {
margin-top: 10px ;
font-size: 24px ;
text-align: center ;
color: Navy ;
}
 
#centro h2 {
font-size: 20px ;
text-align: center ;
color: Green ;
}
 
#centro h3 {
margin-left: 15px ;
font-size: 16px ;
text-align: left ;
color: Blue ;
}
 
#centro p {
color: #990000 ;
}
 
    /* Propiedades del pie */
 
#footer {
    background-color : #33ff00 ; 
    clear : both;
    font-style : italic;
    text-align : center;
        width : 1024px ;
  }
 
        /* Propiedades del menú */
 
#menu {  text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
position: relative;
}
#menu ul { list-style-type: none;}
 
#menu ul li.nivel1 { float: left;
width: 150px;
margin-right: 2px;
position: relative;
}
 
#menu ul li { float: left;}
 
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
border-bottom: solid 1px #6CC;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 716px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
#menu ul li ul li a {width: 140px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: 0px;}
ul.dos {left: -152px;}
ul.tres {left: -304px;}
ul.cuatro {left: -456px;}
ul.cinco {left: -608px;}
 
/*Enlaces en general (exeptuando los de las sidebar*/
#centro a:link {
color: red ;
text-decoration: underline
}
 
#centro a:hover {
background-color: #ffcc00 ;
font-style: italic ;
}
 
#centro a:visited {
color: #ff3333 ;
text-decoration: none ;
}

Cita:

Iniciado por Newbie001

cual es el problema con IE que tuviste que hacer todas esas chanchadas? estoy seguro que se puede arreglar de una forma mas simple

Si la sabes didla ;).

Saludos

Distriker · #7 (**permalink**) 22/05/2009, 11:43

Ya se cual era el fallo, bastante sencillo por cierto

, es el tipico despiste.

Mira, había algunos <!--[if lte IE 7]> de esta manera <!--[if lte IE 7>, lo que producía ese extraño fallo, pero bueno, solucionado.

Y como siempre me pasa a mi, soluciono algo para que me ocurra otra cosa, ahora lo que pasa es que se ve doble el menú, observa (con IE 7).

¿Qué pasa ahora?

Saludos

kseso? · #8 (**permalink**) 22/05/2009, 12:16

Creo que puede ser porque estás utilizando <!--[if lte IE 7]>, esto es, para las versiones iguales o menores a ie7, por lo que te muestra tanto el contenido de:

Código html:

Ver original<li class="nivel1"><a href="#" class="nivel1">Juegos</a>

como:

Código html:

Ver original<!--[if lte IE 7]><a href="#" class="nivel1ie">Juegos<table class="falsa"><tr><td><![endif]-->

Solución: cambiar el condicional a "versiones más pequeñas que ie7", esto es <!--[if lt IE 7]>
Comentarios condicionales
Un saludo

Distriker · #9 (**permalink**) 22/05/2009, 12:24

El unico apropiado para lo que estoy haciendo sería este <!--[if lte IE 7]> ya que me interesa que en IE6 también se vea bien.

¿Algún otro?

Saludos

kseso? · #10 (**permalink**) 22/05/2009, 12:54

Cita:

Iniciado por Distriker

El unico apropiado para lo que estoy haciendo sería este <!--[if lte IE 7]> ya que me interesa que en IE6 también se vea bien.
¿Algún otro?
Saludos

Distriker, ¿viste la página del enlace?

lte7: menor o igual que ie7 (ie7 queda incluido)
lt7: menor que ie7 (ie7 queda excluido)
lte6: menor o igual que ie6 (ie6 queda incluido)

el que debes utilizar es <!--[if lte IE 6]>

Para mayor seguridad, pilla uno de los muchos menus de Mikmoro y fíjate en el html ( y busca la necesidad de los cc para ie6: la pseudoclase :hover sólo la aplica a los enlaces).

Un saludo

Distriker · #11 (**permalink**) 22/05/2009, 13:08

A ver, veamos, el que tu dices (<!--[if lte IE 6]>) sería IE 6 o menor, pero, a mi me hace falta el del 7 también.

El menú este es de Mikmoro.

Saludos

kseso? · #12 (**permalink**) 22/05/2009, 13:16

Déjame un momento que verifique con la fuente...
Sí, creo que es el http://araudi.net/Desplegables/menu_desplegable2.html

fíjate en sus comentarios:

Código html:

Ver original<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
        <li><a href="#">Opción 1.1</a></li>
        <li><a href="#">Opción 1.2</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

Distriker · #13 (**permalink**) 22/05/2009, 13:18

Claro, eso es lo que yo tenía al principio, pero seguía sin verse en IE 7. Me dijo Calizz, que podría ser algo del CSS, a mi antes no me daba problemas pero no se, puede que haya algo que yo no esté viendo en mi CSS que tenga mal.

Saludos

Mikmoro · #14 (**permalink**) 22/05/2009, 15:35

Veamos. En realidad es simple y ya te lo han dicho kseso? y triby: ¿por qué el mio original si va bien en IE6 y 7 y el tuyo no? es tan fácil como el juego "busca las 7 diferencias": sólo tienes que comparar.

Lo más evidente es que donde yo pongo <!--[if lte IE 6]> tu pones <!--[if lte IE 7]>.
¿Por qué? ni idea. ¿Por qué debe ser con el 6? porque IE7 entiende el :hover sobre el elemento LI, y no necesita de ese comentario condicional para funcionar, de manera que al ponerlo como tú lo has hecho se está volviendo loco, leyendo primero el código original y luego el del comentario, y lo mismo con la CSS.

Como tampoco parece que hayas modificado muchísimo sobre el original, yo te recomiendo que lo vuelvas a coger desde cero, lo vuelvas a modificar, pero eso sí, como repito siempre: "una modificación - una comprobación", una sola cada vez, y podrás ver qué ocurre con cada cambio para evitar disgustos al final.

P.D.: hacía tiempo que no nos veíamos, ¿no?

Distriker · #15 (**permalink**) 22/05/2009, 16:46

Ok, Mikmoro, me voy a poner en ello.

Pero te sigo diciendo que lo puse en 7 ya que en el 6 a mi no se me veía pero voy a ver.

Saludos y gracias.

P.D. Hai, bastante tiempo.

Edito:

Hola Mik, he estado mirando pero no encuentro cual puede ser el fallo, lo unico que se es que añadiendo esto:

Código css:

Ver original* { margin: 0px;
padding: 0px; outline: 0;
}

Solamente tiene el error por un lado y siempre de la misma anchura, observen.

Saludos