• Martes 24 de Mayo de 2022, 11:31

Autor Tema:  Controlar La Separación De Items En Una Lista  (Leído 2070 veces)

shadow_rev

  • Miembro MUY activo
  • ***
  • Mensajes: 398
  • Nacionalidad: co
  • Un SPARTAN no muere en combate
    • Ver Perfil
    • http://shadowrev.blogspot.com
Controlar La Separación De Items En Una Lista
« en: Lunes 8 de Octubre de 2007, 17:39 »
0
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?
Volará quien le ponga alas a sus sueños (Candidate for goddess)
Si el mal existe en este mundo, reside en el corazón de la humanidad (Edward D. Morrison - Tales of Phantasia)
Lo único que puedes cambiar del pasado, es lo que sientes por él en el presente (Lockon Stratos - Mobile Suit Gundam 00)
Ingeniero de Sistemas

e98alex

  • Nuevo Miembro
  • *
  • Mensajes: 3
    • Ver Perfil
    • http://www.estudio98.com
Re: Controlar La Separación De Items En Una Lista
« Respuesta #1 en: Miércoles 10 de Octubre de 2007, 19:55 »
0
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

shadow_rev

  • Miembro MUY activo
  • ***
  • Mensajes: 398
  • Nacionalidad: co
  • Un SPARTAN no muere en combate
    • Ver Perfil
    • http://shadowrev.blogspot.com
Re: Controlar La Separación De Items En Una Lista
« Respuesta #2 en: Martes 16 de Octubre de 2007, 18:24 »
0
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
Volará quien le ponga alas a sus sueños (Candidate for goddess)
Si el mal existe en este mundo, reside en el corazón de la humanidad (Edward D. Morrison - Tales of Phantasia)
Lo único que puedes cambiar del pasado, es lo que sientes por él en el presente (Lockon Stratos - Mobile Suit Gundam 00)
Ingeniero de Sistemas

shadow_rev

  • Miembro MUY activo
  • ***
  • Mensajes: 398
  • Nacionalidad: co
  • Un SPARTAN no muere en combate
    • Ver Perfil
    • http://shadowrev.blogspot.com
Re: Controlar La Separación De Items En Una Lista
« Respuesta #3 en: Martes 16 de Octubre de 2007, 19:06 »
0
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.
Volará quien le ponga alas a sus sueños (Candidate for goddess)
Si el mal existe en este mundo, reside en el corazón de la humanidad (Edward D. Morrison - Tales of Phantasia)
Lo único que puedes cambiar del pasado, es lo que sientes por él en el presente (Lockon Stratos - Mobile Suit Gundam 00)
Ingeniero de Sistemas