Problema con jquery/IE8

[urameshix]

Hola a todos,

Tengo un problema que no se como solucionar. Tengo un código jquery que lo que hace es desplegar y plegar unas categorías de la izquierda de mi página:

Código Javascript:

$("div.subnavegador").not('.selected').hide();
    $("a.desplegable").click(function(e){
      var desplegable = $(this).parent().find("div.subnavegador");
      $('a.desplegable').parent().find("div.subnavegador").not(desplegable).slideUp('fast');
      desplegable.slideToggle('fast');
      e.preventDefault();
   })
 

Y luego mi código HTML:

Código HTML:

<h3><a href="#" class="desplegable">Categoria1</a>
    
    <div class="subnavegador">
            <ul>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub3</a></li>
                <li class="last"><a href="#">SubN</a></li>      
            </ul>
    </div>
    
</h3>
 

Todo funciona correctamente, el problema es que en IE (curiosamente solo el 8), cuando pliego y despliego pasan cosas raras (no se respetan los margenes de espacio entre una categoría y otra y se juntan). Como no tengo ni idea de porque puede pasar esto, a ver si alguien ha tenido una experiencia parecida. Os dejo una imagen de como se ve en IE8.



Gracias a todos,

Un saludo!

[caricatos]

Tema movido desde javascript

[mayid]

Habría que conocer el CSS implicado. Probablemente el CSS destinado a las listas interiores esté afectando a las demás.

[urameshix]

Vale, te pongo todos los estilos que se usan en el primer post para que lo veas todo junto.

Edito: como veo que no lo puedo editar lo pongo aquí:

Código CSS:

#sidebar {
    float : left;
    width : 225px;
    overflow : hidden;
    margin-top : -5px;
    
}
 
#sidebar h3 {
    font : .95em "Trebuchet MS", arial, sans-serif;
    margin-top : 15px;
}
 
#sidebar h3 a.desplegable,#solo{
    background : url('imagenes/buttom.png') 0 0 no-repeat;
    width : 198px;
    height:30px;
    line-height : 30px;
    text-transform : uppercase;
    display : block;
    cursor : pointer;
    color : white;
    padding-left : 28px;
    overflow:hidden;
}
 
#sidebar h3 a.desplegable:hover,#solo:hover {
    background-position : 0 -40px;
    text-decoration : none;
}
 
#sidebar h3.active a {background-position : 0 -80px}
#sidebar h3.active a:hover {background-position : 0 -120px}
 
#sidebar div {
    margin-bottom : 15px;
    margin-top : 5px;
    font-size : .9em;
    background : #E7E7E7 url('imagenes/sidebar.png') top left no-repeat;
    overflow : hidden;
    height : auto;
}
 
#sidebar .subnavegador ul {
    background : url('imagenes/sidebar.png') -275px bottom no-repeat;
    overflow : hidden;
    height : 100%;
    padding : 10px 15px;
}
 
#sidebar .subnavegador ul li {
    line-height : 22px;
    background : url('imagenes/li.gif') 0 7px no-repeat;
    padding-left : 18px;
}
 
#sidebar .subnavegador ul li a {
    color : black;
    font-weight : bold;
}
 

Un saludo!

[tredio]

agrega aca #sidebar .subnavegador ul li

margin-bottom:15px;

[urameshix]

Tredio no entiendo el porque de margin-bottom:15px en el LI.

Eso en principio no me soluciona el problema.

Es que es algo raro, porque el CSS sin la interactuación del jquery se ve bien tambien en ie8, el problema es cuando le aplico el código de jquery que puse arriba, que se me junta como puse en la imagen, pero luego cuando paso el ratón por encima, curiosamente se vuelve a poner bien.

Un saludo