floating in list causes trouble in IE6 and IE7

I have a toggle list that causes trouble in old IE browsers, tried to fix it for c开发者_开发知识库ouple of hours but I failed again and again. Please check out the jsfiddle code:

http://jsfiddle.net/vny63/

structure is similar to this:

<li class="toggle">
    <a class="left" title="gallery">gallery</a> (English)
    <span class="right float_right">3</span>
    <ul style="display: none;">
       <li class="space_left">
        lot of stuff here
       </li>
    </ul>
</li>

It is working well in IE8 and Firefox3

IE6 has a thing where floats only work if you mark them as:

display: inline;

But I'm on mobile and can't really test right now.

Edit: IE6 has several "things".

solved here: http://jsfiddle.net/vny63/11/ :

HTML:

<h1>float_left only</h1>
<div id="content" class="first"><ul><li class="toggle"><a title="Welcome" class="left">Welcome</a><span class="right float_right">1</span><ul class="sub" style="display: none;"><li class="space_left"><a title="Runter" href="index.php?parameter=admin/down/articles/1" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=home/welcome" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/1" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/1" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/1" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="comment-test" class="left">comment-test</a><span class="right float_right">2</span><ul class="sub" style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/41" class="up">Hoch</a> • <a title="Runter" href="index.php?parameter=admin/down/articles/41" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=comment-test" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/41" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/41" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/41" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="gallery" class="left">gallery(English)</a> <span class="right float_right">3</span><ul class="sub" style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/43" class="up">Hoch</a> • <a title="Anzeigen" href="index.php?parameter=gallery" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/43" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/43" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/43" class="delete">Löschen</a></li></ul></li></ul></div>

<h1>float_right to article titles</h1>

<div id="content" class="second"><ul><li class="toggle"><a title="Welcome" class="left float_left">Welcome</a><span class="right float_right">1</span><ul style="display: none;"><li class="space_left"><a title="Runter" href="index.php?parameter=admin/down/articles/1" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=home/welcome" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/1" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/1" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/1" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="comment-test" class="left float_left">comment-test</a><span class="right float_right">2</span><ul style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/41" class="up">Hoch</a> • <a title="Runter" href="index.php?parameter=admin/down/articles/41" class="down">Runter</a> • <a title="Anzeigen" href="index.php?parameter=comment-test" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/41" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/41" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/41" class="delete">Löschen</a></li></ul></li><li class="toggle"><a title="gallery" class="left float_left">gallery (English)</a> <span class="right float_right">3</span><ul style="display: none;"><li class="space_left"><a title="Hoch" href="index.php?parameter=admin/up/articles/43" class="up">Hoch</a> • <a title="Anzeigen" href="index.php?parameter=gallery" class="view">Anzeigen</a> • <a title="Bearbeiten" href="index.php?parameter=admin/edit/articles/43" class="edit">Bearbeiten</a> • <a title="Nicht veröffentlichen" href="index.php?parameter=admin/unpublish/articles/43" class="unpublish">Nicht veröffentlichen</a> • <a title="Löschen" href="index.php?parameter=admin/delete/articles/43" class="delete">Löschen</a></li></ul></li></ul></div>​

CSS:

* {
    border: 0;
    color: #333;
    font: 100 11px 'trebuchet ms';
    list-style: none;
    margin: auto;
    outline-style: none;
    padding: 0;
    text-align: left;
}

h1 {font-size:16px; margin-bottom:10px;}

div {
    overflow: hidden;
}

.space_bottom, .space_vertical {
    margin-bottom: 10px;
}

.space_left, .space_horizontal  {
    margin-left: 10px;
}

.space_right, .space_horizontal {
    margin-right: 10px;
}

.space_top, .space_vertical {
    margin-top: 10px;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.first li {background:green}
.second li {background:red;}
a.left {float:left;width:80%}
.sub {clear:left}
​

JS:

$(document).ready(function() {
    $('li.toggle ul,fieldset.toggle ul').hide();
    $('li.toggle a,fieldset.toggle legend').click(function() {
        $(this).parent().siblings().children('.toggle ul').hide();
        $(this).siblings('ul').toggle();
    });
});