SoloCodigo

Programación Web y Scripting => HTML => CSS / SASS / LESS => Mensaje iniciado por: shadow_rev en Lunes 8 de Octubre de 2007, 17:39

Título: Controlar La Separación De Items En Una Lista
Publicado por: shadow_rev en Lunes 8 de Octubre de 2007, 17:39

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

1. #barra_izq #menu {
2.   position: absolute;
3.   height: auto;
4.   width: auto;
5.   left: 1px;
6.   top: 70px;
7.   margin: 0px;
8.   padding: 0px;
9. }
10. #barra_izq #menu ul {
11.   list-style:none;
12.   margin: 0px;
13.   padding: 0px;
14. }
15.  
16. #barra_izq #menu #enlace_menu_inicio {
17.   cursor:pointer;
18.   background-image: url(imagenes/InterfazGrafica/enlace_inicio.jpg);
19.   background-repeat: no-repeat;
20.   width: 79px;
21.   height: 19px;
22.   margin: 0px;
23.   padding: 0px;
24. }
25. /*...Igual para el resto de los items...*/
26.  
27. #barra_izq #menu span {
28.   display:none;
29.   margin: 0px;
30.   padding: 0px;
31. }
32.  

He probado con modificar el alto de la linea y ajustando los margenes, pero consigo el mismo resultado en IE. ¿Alguien tiene alguna sugerencia?

Título: Re: Controlar La Separación De Items En Una Lista
Publicado por: e98alex en Miércoles 10 de Octubre de 2007, 19:55

Hola

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

Código: Text

1. #barra_izq #menu li {
2.   padding: 0px;
3.   margin: 0px;
4. }
5.  

Un saludo

Título: Re: Controlar La Separación De Items En Una Lista
Publicado por: shadow_rev en Martes 16 de Octubre de 2007, 18:24

Cita de: "e98alex"

Hola

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

Código: Text

1. #barra_izq #menu li {
2.   padding: 0px;
3.   margin: 0px;
4. }
5.  

Un saludo

pues si..... mismo resultado

Título: Re: Controlar La Separación De Items En Una Lista
Publicado por: shadow_rev en Martes 16 de Octubre de 2007, 19:06

Bueno, ya encontré el problema....

Código: Text

1. #barra_izq #menu span {
2.   margin: 0px;
3.   padding: 0px;
4.   visibility: hidden;
5. }
6.  

Parece que los componentes con display:none en IE les crea ese espacio en el contenido de las listas.