ul中的IE7怪异间距

Question

So, I'm making this context menus, which looks great in all major browsers, even IE plays nice, right down until IE7.

I don't know why it has that weird spacing and was hoping someone could enlighten me.

Here's a JSFiddle

CSS

/* CSS Document */

*{
    zoom: 1;
}    

.context-menu-container{
    border: 1px solid #828790;
    padding: 2px;
    width: 100px;
    background-color: #f1f1f1;
    font-family: 'MS Sans Serif', Geneva, sans-serif;
    font-size: 12px;
    position: relative;
    margin-left: 5px;
    margin-top: 5px;
}

.context-menu{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
}

.context-menu li{
    position: relative;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 2px;
    margin: 0px;
}

.context-menu li.separator{
    height: 2px;
    border: 0;
    background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
    padding: 2px;
    margin-left: 26px;
}

.context-menu li.separator:hover{
    border: 0;
    background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
}

.context-menu li:hover{
    border: 1px solid #afd0f7;
    background: url(http://img860.imageshack.us/img860/3511/contextmenuhover.png) repeat-x;
}

.context-menu li.disabled, .context-menu li.disabled a{
    color: #8b8b8b;
}

.context-menu li.disabled:hover{
    border: 1px solid #d5d4d4;
    background: url(http://img823.imageshack.us/img823/31/contextmenudisabled.png) repeat-x;
}

.context-menu li a{
    line-height: 20px;
    height: 20px;
    text-decoration: none;
    color: black;
    display: block;
    cursor: default;
    padding-left: 30px;
    position: relative;
}

.context-menu a.delete{
    background: url(http://img268.imageshack.us/img268/9831/deleteqb.png) no-repeat 2px center;
}

.context-menu .vertical-separator{
    width: 2px;
    height: 100%;
    position: absolute;
    left: 25px;
    background: url(http://img836.imageshack.us/img836/6873/verticalseparator.png) repeat-y;
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;
}

.context-menu div.label{
    margin-left: 25px;
    padding-left: 5px;
    float:left;
}

HTML

<div class='context-menu-container'>
    <ul class='context-menu'>
        <div class='vertical-separator'></div>
        <li><a class='delete' href="#">Action</a></li>
        <li class='separator'></li>
        <li class='disabled'><a href="#">Action</a></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Action</a></li>
    </ul>
</div>

Answer 1

You need this, unsurprisingly because of an IE7 bug:

.context-menu li.separator {
    font-size: 0;
    line-height: 0;
}

http://jsfiddle.net/thirtydot/XLRWT/17/

Also, having a <div> as a child of a <ul> is invalid HTML. It may work in browsers, but it's still invalid .