ul sub-menu issue in ie

Hi.
I was wondering if anyone could help me out.

I have a vertical menu which has child menu items, which i have created using unordered lists.
It is not a drop down menu, when a main menu item is clicked, the sub menu items appear (through php coding).

When viewing the menu in firefox and safari its fine, however in IE (7) the sub menu <ul> appears with a text sized gap above it.

[B]my code(XHTML 1.0 Transitional) is:[/B]

<ul id=”left-nav”>
<li class=”main-nav”><a class=”active” href=”#”>Engine &amp; Exhaust</a></li>
<li class=”sub-menu-containing-list-item”>
<ul class=”left-sub-nav”>
<li class=”sub-nav”><a class=”subcategory_active” href=”#”>Product Overview</a>
</li><li class=”sub-nav”><a class=”subcategory” href=”#”>Air Filtration</a>
</li><li class=”sub-nav”><a class=”subcategory” href=”#”>Lube/Fuel/Coolant</a>
</li><li class=”sub-nav”><a class=”subcategory” href=”#”>Hydraulic Filtration</a></li>
</ul></li>

<li class=”main-nav”><a class=”” href=”#”>Dust, Fume &amp; Mist</a></li>
<li class=”main-nav”><a class=”” href=”#”>Industrial Hydraulics</a></li>
</ul>

[B]my css is:[/B]

li.sub-menu-containing-list-item {
background-image:url(../images/bg-side-sub-nav.gif);
list-style:none;
vertical-align:top;
padding-top:0;
margin-top:0;
}

li.main-nav a
{
text-decoration:none;
color:#373636;
}

.left-sub-nav {
text-indent:none;
padding:0;
margin:0;
display:block;
vertical-align:top;
}

.sub-nav {
background-image:url(../images/bg-side-sub-nav.gif);
list-style:none;
width:136px;
display:block;
padding-left:10px;
padding-top:3px;
padding-bottom:3px;
margin:0;
}

.left-sub-nav {
text-indent:none;
padding:0;
margin:0;
display:block;
vertical-align:top;
}

a.subcategory, a.subcategory:visited, a.subcategory:active
{
text-decoration:none;
color:#007fae;
}

a.subcategory:hover
{
color:#003f56;
}
a.subcategory_active
{
text-decoration:none;
color:#003f56;
}
.main-nav
{
background-image:url(../images/bg-nav.gif);
list-style:none;
width:136px;
height:18px;
display:block;
padding-left:10px;
}

.main-nav:hover
{
background-image:url(../images/bg-side-nav-over.gif);
list-style:none;
width:136px;
height:18px;
display:block;
padding-left:10px;
}

any ideas would be most appreciated!
thanx ?

Also in #CSS _↴