Programación Web y Scripting > CSS / SASS / LESS

 Controlar La Separación De Items En Una Lista

(1/1)

shadow_rev:
Hola chicos

Estoy creando un menú vertical con imagenes a partir de listas y manejo de hojas de estilo. Pero IE me crea una separación incómoda que afecta el diseño de la página, que no ocurre con firefox.

Este es el fragmento de código de la lista, por cierto, está dentro de otro div:
<!--html--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><!--html1--><div id="menu">
    <ul>
      <li id="enlace_menu_inicio">
       <span><a href="index.html">Inicio</a></span>
     </li>
      <li id="enlace_menu_intro" >
       <span>Introducción</span>
     </li>
      <li id="enlace_menu_objetivos" >
       <span>Objetivos</span>
     </li>
     <li id="enlace_menu_unidades">
       <span>Unidades</span>
     </li>
      <li id="enlace_menu_evaluacion" >
       <span>Evaluación del Curso</span>
     </li>
      <li id="enlace_menu_biblio" >
       <span>Bibliografía</span>
     </li>
    </ul>
  </div><!--html2--></td></tr></table><div class='postcolor'><!--html3-->

y este es el fragmento de la hoja de estilos que aplica el menú:

--- Código: Text ---#barra_izq #menu {  position: absolute;  height: auto;  width: auto;  left: 1px;  top: 70px;  margin: 0px;  padding: 0px;}#barra_izq #menu ul {  list-style:none;  margin: 0px;  padding: 0px;} #barra_izq #menu #enlace_menu_inicio {  cursor:pointer;  background-image: url(imagenes/InterfazGrafica/enlace_inicio.jpg);  background-repeat: no-repeat;  width: 79px;  height: 19px;  margin: 0px;  padding: 0px;}/*...Igual para el resto de los items...*/ #barra_izq #menu span {  display:none;  margin: 0px;  padding: 0px;} 
He probado con modificar el alto de la linea y ajustando los margenes, pero consigo el mismo resultado en IE. ¿Alguien tiene alguna sugerencia?

e98alex:
Hola

¿Has probado a poner a 0 el padding y el margin de los <li>?


--- Código: Text ---#barra_izq #menu li {  padding: 0px;  margin: 0px;} 
Un saludo

shadow_rev:

--- Cita de: "e98alex" ---Hola

¿Has probado a poner a 0 el padding y el margin de los <li>?


--- Código: Text ---#barra_izq #menu li {  padding: 0px;  margin: 0px;} 
Un saludo
--- Fin de la cita ---
pues si..... mismo resultado

shadow_rev:
Bueno, ya encontré el problema....


--- Código: Text ---#barra_izq #menu span {  margin: 0px;  padding: 0px;  visibility: hidden;} Parece que los componentes con display:none en IE les crea ese espacio en el contenido de las listas.

Navegación

[0] Índice de Mensajes