Problema hoja de estilo de lista con explorer

[jaime11]

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.

[Mikmoro]

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

[jaime11]

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

Gracias por la ayuda.

[Mikmoro]

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.

[jaime11]

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

En el Explorer 6 desde luego no funciona, a ti si!?

[Mikmoro]

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).

[jaime11]

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.

[Mikmoro]

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á.

[jaime11]

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

Un saludo.