Foros del Web » Creando para Internet » CSS »

Problema hoja de estilo de lista con explorer

Estas en el tema de Problema hoja de estilo de lista con explorer en el foro de CSS en Foros del Web. Hola a todos!! Ante todo daros la enhorabuena a todos los participantes del foro. Os he descubierto hace poco y me habeis sacado de muchas ...
  #1 (permalink)  
Antiguo 30/10/2008, 13:33
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Problema hoja de estilo de lista con explorer

Hola a todos!!

Ante todo daros la enhorabuena a todos los participantes del foro. Os he descubierto hace poco y me habeis sacado de muchas dudas. Es la primera vez que escribo.

Os explico, estoy haciendo un menu desplegable en horazontal, y que luego se despliega en vertical. Hay ya solución en el foro para ello, pero mi problema no es el menu desplegable, sino la barra horizontal. No consigo que explorer coja todo el ancho que yo quiero de la lista.

Como una imagen vale mas que mil palabras:
En firefox:



En explorer




El codigo css:

Código:
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 800px; /*For KHTML*/// Anchura maxima de menu
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
  width: 133px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
El resto de codigo es para los demás niveles que me funcionan correctamente

Y el html
Código:
<tr> <td width="800" align="center">
  <ul id="navmenu-h">
              <li><a href="index.htm">Inicio</a></li>
              <li><a href="productos.htm">Productos</a></li>
              <li><a href="#">Servicios</a> 
                <ul>
                  <li><a href="servicios_serv_tec.htm">Servicio Técnico</a> 
                  <li><a href="servicios_asesoramiento.htm">Asesoramiento</a></li>
                  <li><a href="servicios_instalaciones.htm">Instalac. Completas</a></li>
                </ul>
              </li>
              <li><a href="#">Atención al Cliente</a> 
                <ul>
                  <li><a href="cliente_post_venta.htm">Servicio PostVenta</a></li>
                  <li><a href="#">Presupuesto</a></li>
                </ul>
              </li>
              <li><a href="trabajos.htm">Trabajos Realizados</a></li>
              <li><a href="contacto.htm">Contacto</a></li>
  </ul>

       </td> </tr>

Lo mismo es un pego, pero no doy con la tecla. Perdonad lo extenso del mensaje, pero sino es que no se como explicarlo.

He estado buscando el problema en todas las discursiones y no he encontrado la solución concreta, si es así y ya esta resuelta perdonadme, pero no la habia visto.

Gracias de antemano.
  #2 (permalink)  
Antiguo 30/10/2008, 13:39
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: Problema hoja de estilo de lista con explorer

Supongo que se debe al display inline de los "li":

ul#navmenu-h li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
width: 133px;
}

Pero te lo digo a bote-pronto. Si no es eso (cambiarlo por display: block;), miraremos mejor.

Y no te disculpes por lo extenso de la consulta: ojalá todas fueran así de detalladas y claras
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 30/10/2008, 13:47
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema hoja de estilo de lista con explorer

Que va tio, ya lo habia pensado, pero no es esa la solución.

Gracias por la ayuda.
  #4 (permalink)  
Antiguo 30/10/2008, 13:53
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: Problema hoja de estilo de lista con explorer

Lástima. El caso es que hará falta ver más código, porque con el trozo que has puesto no se reproduce el error, vamos, que poniendo sólo eso sale bien.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 30/10/2008, 14:09
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema hoja de estilo de lista con explorer

Como que te sale todo correcto!!??. En Internet explorer te sale bien!!???

En el Explorer 6 desde luego no funciona, a ti si!?
  #6 (permalink)  
Antiguo 30/10/2008, 14:16
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: Problema hoja de estilo de lista con explorer

Esto es solamente el extracto de código que has puesto, añadiendo únicamente un fondo a los "li" porque si no no se ve nada, sólo las palabras de los enlaces sin ningún tipo de fondo:

http://www.araudi.net/forosdelweb/jaime11.html

Y estoy casi seguro de que el problema está en los "a", que no tienen display:block o algo así, aunque no sé porque no se ve (no los has puesto).
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 30/10/2008, 14:50
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema hoja de estilo de lista con explorer

Perdona tio, pero al cortar y copiar codigo se me ha ido una parte del código , que desastre

Te pongo la hoja de estilo al completo y me dejo de pego. Perdona la molestia.

Código:
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 800px; /*For KHTML*/// Anchura maxima de menu
  list-style: none;
  height: 24px;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: block;
  list-style: none;
  position: relative;
  height: 24px;
  width: 133px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 133px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #3F2F6D;
  color: #FFF;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #FD0003;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #3F2F6D;
  color: #FFF;
}

/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #FD0003;
  color: #FFF;
}
Como puedes ver, el "display:block;" está ya.
  #8 (permalink)  
Antiguo 30/10/2008, 18:00
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: Problema hoja de estilo de lista con explorer

Bien, tenía que ser algo de los enlaces. El problema está aquí:

ul#navmenu-h a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #3F2F6D;
color: #FFF;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

Supongo que esta hoja de estilo está heredada de alguna otra parte, porque veo que está adaptada a tu menú, pero con algún pequeño error.

Si hay float y no hay width, no ocupará todo el ancho, sino sólo el ancho del contenido.

Elimina lo que te señalo y se arreglará.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 31/10/2008, 07:20
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema hoja de estilo de lista con explorer

Gracias Mikmoro!!! Me ha sido de gran ayuda tio.

Un saludo.
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 21:03.