Separación entre elementos <li>

[thenine]

Hola, estoy teniendo un problema con IE8

tengo la siguiente distribución

Código HTML:

<ul>
    <li>Menu 1
    
    </li>
    <li>
       <div style="display: none;">
           <ul>
             <li>SubMenu1
             </li>
             <li>SubMenu2
             </li>
             <li>SubMenu3
             </li>
           </ul>
        </div>
    </li>
   <li> Menu 2
   </li>
    <li>
       <div style="display: none;">
           <ul>
             <li>SubMenu1
             </li>
             <li>SubMenu2
             </li>
             <li>SubMenu3
             </li>
           </ul>
        </div>
    </li>

.......
</ul> 

Pues bien, en Chrome y Firefox se ve perfecto pero en IE 8 se produce mucha separación entre los menus y queda un efecto muy feo.

Sabéis alguna forma de arreglarlo???

PD. Los menus ocultos se muestran mediante una función javascript

Salu2

[pzin]

Pues sino aportas el código CSS poco podremos saber del porqué pasa eso.

Iniciado por thenine

PD. Los menus ocultos se muestran mediante una función javascript

Esto no hace mucha falta ya que se puede hacer mediante CSS sin mayor problema.

[thenine]

Hola,
gracias por responder pero no entiendo para que necesitas el css.

Código HTML:

.div_subsecc {
    float: left;
    width: 180px;
    padding-left: 10px;
}
.div_subsecc_h 
{
    float: left;
    width: 170px;
    padding-left: 10px;
}

Este es el código CSS.

El primero abarca toda la estructura y el segundo es por cada DIV hijo.


El pulsar sobre cada menu ejecuta en javascript

Código HTML:

var OCULTO="none";
var VISIBLE="block";

...

        subti=document.getElementById("div_subsecc_"+id);
        if (subti!=null)
        {
               if(subti.style.display==VISIBLE)
               {
                subti.style.display=OCULTO;
                texto.style.fontWeight="normal"; 
               }
               else 
                subti.style.display=VISIBLE;              
        } 

Salu2

[alzacon]

gracias por responder pero no entiendo para que necesitas el css.

Creo que si no entiendes porque es necesario el css tenemos un problema, porque la hoja de estilo ayuda a ver el problema como tu lo ves (a falta de capturas de pantalla) y poder corregirlo.

Luego cuando dices mucha separación, yo no entiendo donde está la separación de la que hablas. Pero puede ser culpa de los valores por defecto que tiene para margin y padding, ¿tienes reseteadas estas propiedades?

[WorseMzg]

Iniciado por alzacon

Creo que si no entiendes porque es necesario el css tenemos un problema, porque la hoja de estilo ayuda a ver el problema como tu lo ves (a falta de capturas de pantalla) y poder corregirlo.

Luego cuando dices mucha separación, yo no entiendo donde está la separación de la que hablas. Pero puede ser culpa de los valores por defecto que tiene para margin y padding, ¿tienes reseteadas estas propiedades?

como dice arriba siempre es bueno resetear las medidas de algunos elementos como los a y los ul li

Código CSS:

li{
margin:0px;
padding:0px;
}
 

y acontando un poco lo del css, realmente ahora con css3 se pueden ahcer buenos menus desplegables si usar javascript que enrealidad para este tipo de cosas es un cacho

[Linton]

Iniciado por thenine

Los menus ocultos se muestran mediante una función javascript...

Copio de JavaScript Bible (séptima edición), página 47:

"We should ask JavaScript to perform only those functions that are outside the reach of core browser functionality such as HTML rendering and CSS styling. For example, navigation links should be marked up as functional hyperlinks regardless of whether JavaScript adds any spice to the mix. Multi-level menus, pop-up dialogs, and roll-over image changes can often be implemented using just HTML and CSS, and therefore work for a broader audience".

Los subrayados son míos

[wmdiseno]

Tienen razon lo que dicen: pzin, alzacon, Linton.

para checar el problema de la separacion entre elemento es esencial ver el codigo de css, el codigo de css es como tu hoja de estilo, valla! tu forma de reacomodar el menu, si no tienes sentido tendras que checar el manual de css, de desarrollo web y veo que tienes que tener un llamado de div.

intenta con esta explicación

Código HTML:

<ul>
div id='nombre del css'>
    <li>Menu 1
 
    
    </li>
    <li>
       <div style="display: none;">
           <ul>
             <li>SubMenu1
             </li>
             <li>SubMenu2
             </li>
             <li>SubMenu3
             </li>
           </ul>
        </div>
    </li>
   <li> Menu 2
   </li>
    <li>
       <div style="display: none;">
           <ul>
             <li>SubMenu1
             </li>
             <li>SubMenu2
             </li>
             <li>SubMenu3
             </li>
           </ul>
        </div>
    </li>
 
.......
</ul>
 

y de estilo css
intenta algo asi:

Código CSS:

@charset 'UTF-8';
/* Some stylesheet reset */
#aqui pone el nombre que se relaciona donde te puse ''nombre css" > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
 

con mismo div y mismo css, debe de funcionar (:

saludos!