Foros del Web » Creando para Internet » HTML »

No me funciona mi menú CSS en IE 7

Estas en el tema de No me funciona mi menú CSS en IE 7 en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/04/2009, 13:23
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
No me funciona mi menú CSS en IE 7

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 original
  1. table.falsa {border-collapse:collapse;
  2. border:0px;
  3. float: left;
  4. position: relative;
  5. }

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #2 (permalink)  
Antiguo 27/04/2009, 14:06
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: No me funciona mi menú CSS en IE 7

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.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 27/04/2009, 15:52
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

Hola Triby, ha pasado algo horroroso, observa.

Ya cambie eso como dijistes.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #4 (permalink)  
Antiguo 27/04/2009, 16:14
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: No me funciona mi menú CSS en IE 7

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.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 27/04/2009, 16:35
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: No me funciona mi menú CSS en IE 7

cual es el problema con IE que tuviste que hacer todas esas chanchadas? estoy seguro que se puede arreglar de una forma mas simple
  #6 (permalink)  
Antiguo 22/05/2009, 12:30
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

Cita:
Iniciado por Triby Ver Mensaje
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 original
  1. body {
  2.     text-align: center ;
  3.   }
  4.    
  5.         /* Propiedades de la cabecera */
  6.  
  7. #cabecera {
  8.     background-color: #41A6C2 ;
  9.     margin-bottom: 5px;
  10.         border: 5px  91F0FF solid;
  11.           }
  12.            
  13.         /* Propiedades del contenido */
  14.  
  15. #contenido {
  16.     width: 1024px ;
  17. margin: 0 auto 0 auto ;
  18.     background-color:  #666666 ;
  19.     border:5px solid #052B02 ;
  20.     }
  21.    
  22.         /* Propiedades del sidebar-derecho */
  23.    
  24. #sidebar-izquierda {
  25.       background-color:#33FF00;
  26.       border:5px solid #2D2D2D;
  27.       float:left;
  28.       margin:3px;
  29.       padding:5px;
  30.       width:115px;
  31.       }
  32.            
  33.                 /* Propiedades del sidebar-izquierda */
  34.  
  35. #sidebar-derecha {
  36.     border:5px solid #2D2D2D;
  37.     width: 115px ;
  38.     float: right ;
  39.         margin: 3px ;
  40.     padding: 5px ;
  41.     background-color: #33ff00;
  42.   }
  43.    
  44.     /* Propiedades del centro */
  45.  
  46. #centro {
  47.     border:5px solid #2D2D2D ;
  48.     width: 702px ;
  49.     background-color: #91F0FF ;
  50.     float: left ;
  51.     text-align: left;
  52.     margin-left: 15px ;
  53.     margin-right: 15px ;
  54.     margin-bottom: 15px;
  55.         }
  56.  
  57. #centro p {
  58. margin-left: 10px;
  59. margin-right: 5px;
  60. }
  61.  
  62. #centro h1 {
  63. margin-top: 10px ;
  64. font-size: 24px ;
  65. text-align: center ;
  66. color: Navy ;
  67. }
  68.  
  69. #centro h2 {
  70. font-size: 20px ;
  71. text-align: center ;
  72. color: Green ;
  73. }
  74.  
  75. #centro h3 {
  76. margin-left: 15px ;
  77. font-size: 16px ;
  78. text-align: left ;
  79. color: Blue ;
  80. }
  81.  
  82. #centro p {
  83. color: #990000 ;
  84. }
  85.  
  86.     /* Propiedades del pie */
  87.  
  88. #footer {
  89.     background-color : #33ff00 ;
  90.     clear : both;
  91.     font-style : italic;
  92.     text-align : center;
  93.         width : 1024px ;
  94.   }
  95.  
  96.         /* Propiedades del menú */
  97.  
  98. #menu {  text-align: center;
  99. font-size: 0.7em;
  100. width: 820px;
  101. margin: 20px auto;
  102. position: relative;
  103. }
  104. #menu ul { list-style-type: none;}
  105.  
  106. #menu ul li.nivel1 { float: left;
  107. width: 150px;
  108. margin-right: 2px;
  109. position: relative;
  110. }
  111.  
  112. #menu ul li { float: left;}
  113.  
  114. #menu ul li a {display: block;
  115. text-decoration: none;
  116. color: #fff;
  117. background-color: #399;
  118. border: solid 1px #fff;
  119. padding: 8px;
  120. position: relative;
  121. }
  122. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
  123. color: #000;
  124. position: relative;
  125. border-bottom: solid 1px #6CC;
  126. }
  127. #menu ul li a.nivel1 {display: block!important;display: none;
  128. }
  129. #menu ul li ul {display: none;
  130. }
  131. #menu ul li a:hover ul, #menu ul li:hover ul {display: block;
  132. position: absolute;width: 716px;border: solid 1px #fff;border-top: none;background-color: #6CC;
  133. }
  134. #menu ul li ul li a {width: 140px;
  135. padding: 6px 0px 8px 0px;
  136. border: none;
  137. background-color: #6CC;
  138. }
  139. #menu ul li ul li a:hover {
  140. position: relative;
  141. text-decoration: underline;
  142. border-bottom: none;
  143. }
  144. table.falsa {border-collapse:collapse;
  145. border:0px;
  146. float: left;
  147. position: relative;
  148. }
  149. ul.uno {left: 0px;}
  150. ul.dos {left: -152px;}
  151. ul.tres {left: -304px;}
  152. ul.cuatro {left: -456px;}
  153. ul.cinco {left: -608px;}
  154.  
  155. /*Enlaces en general (exeptuando los de las sidebar*/
  156. #centro a:link {
  157. color: red ;
  158. text-decoration: underline
  159. }
  160.  
  161. #centro a:hover {
  162. background-color: #ffcc00 ;
  163. font-style: italic ;
  164. }
  165.  
  166. #centro a:visited {
  167. color: #ff3333 ;
  168. text-decoration: none ;
  169. }

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #7 (permalink)  
Antiguo 22/05/2009, 12:43
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #8 (permalink)  
Antiguo 22/05/2009, 13:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: No me funciona mi menú CSS en IE 7

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
  1. <li class="nivel1"><a href="#" class="nivel1">Juegos</a>
como:
Código html:
Ver original
  1. <!--[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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 22/05/2009, 13:24
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #10 (permalink)  
Antiguo 22/05/2009, 13:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: No me funciona mi menú CSS en IE 7

Cita:
Iniciado por Distriker Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 22/05/2009, 14:08
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #12 (permalink)  
Antiguo 22/05/2009, 14:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: No me funciona mi menú CSS en IE 7

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
  1. <li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
  2. <!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
  3.     <ul class="uno">
  4.         <li><a href="#">Opción 1.1</a></li>
  5.         <li><a href="#">Opción 1.2</a></li>
  6.     </ul>
  7. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  8.   </li>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 22/05/2009, 14:18
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

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
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #14 (permalink)  
Antiguo 22/05/2009, 16:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: No me funciona mi menú CSS en IE 7

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?
  #15 (permalink)  
Antiguo 22/05/2009, 17:46
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: No me funciona mi menú CSS en IE 7

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
  1. * { margin: 0px;
  2. padding: 0px; outline: 0;
  3. }

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

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.

Última edición por Distriker; 22/05/2009 a las 19:12
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 16:34.