What's the deal with my burger dots?

Why do my list burger dots render jacked up in IE, especially on the last three list items? They sit correctly on the baseline of the associated text in FF and Safari. Is this a consequence of IE not interpreting floats or inline items correctly? Regardless, any ideas on how to fix it? Thanks!

Note: I'm already using the <span> hack to add breathing room between the burger dots and the text in IE.

Site: http://www.imageworksdisplay.com/tobacco/

Relevant HTML:

<ul>
<li><h3>Information</h3><div class="menurule"></div>
<ul>
<li><a href="aboutour.php"><span>About Our Fixtures</span></a></li>
<li><a href="whyimageworks.php"><span>Why ImageWorks?</span></a></li>
<li><a href="testimonials.php"><span>Testimonials</span></a></li>
<li><a href="clientsets.php"><span>Client Set Gallery</span></a></li>
</ul>
</li>
</ul>

<ul>
<li><h3>Wood Fixtures</h3><div class="menurule"></div>
<ul>
<li><a href="woodpack.php"><span>Pack Fixtures</span></a></li>
<li><a href="#"><span>Carton Fixtures</span></a></li>
<li><a href="#"><span>OTP Fixtures</span></a></li>
</ul>
</li>
</ul>

<ul>
<li><h3>Metal Fixtures</h3><div class="menurule"></div>
<ul>
<li><a href="#"><span>Pack Fixtures</span></a></li>
<li><a href="#"><span>OTP Fixtures</span></a></li>
</ul>
</li>
</ul>

<ul>
<li><h3>Lighted Metal Fixtures</h3><div class="menurule"></div>
<ul>
<li><a href="#"><span>Pack Fixtures</span></a></li>
<li><a href="#"><span>OTP Fixtures</span></a></li>
</ul>
</li>
</ul>

<ul>
<li><h3>Accessories</h3><div class="menurule"></div>
<ul>
<li><a href="woodacc.php"><span>For Wood Fixtures</span></a></li>
<li><a href="metalacc.php"><span>For Metal Fixtures</span></a></li>
</ul>
</li>
</ul>

<ul class="bottomlinks">
<li><h3><a href="#"><span>Ordering Information</span></a></h3></li>
<li><h3><a href="#"><span>Contact Us</span></a></h3></li>
<li><h3><a href="http://www.imageworksdisplay.com/custom/"><span>Custom Fixtures</span></a></h3></li>
</ul>

Relevant CSS:

#sidebar ul {
list-style-type:none;
display:block;
}

#sidebar ul ul {
list-style-image:url("images/f30circle1.gif");
list-style-position: inside;
text-align:left;
}

#sidebar ul li, #sidebar ul ul li {
width:200px;
}

#sidebar ul ul li a {
text-decoration:none;
color:#000;
font-size:0.9em;
}

#sidebar a:hover {
color:#f30;
}

h3 {
margin:15px 0 0 0;
font-size:1.1em;
}

.menurule {
border-bottom:1px #666 solid;
width:100%;
margin:2px 0 10px 0;
}

#sidebar ul li a {
text-decoration:none;
color:#000;
}

.bottomlinks {
margin-top:10px;
list-style-image:url("images/f30circle1.gif");
list-style-position: inside;
}

.bottomlinks h3{
display:inline;
line-height:2em;
}

I wouldn't use it as a list-style-image. I would set it as a background image of the links.
#sidebar ul {
list-style-type:none;
display:block;
}

#sidebar ul ul {
list-style:none;
text-align:left;
}

#sidebar ul li, #sidebar ul ul li {
width:200px;
}

#sidebar ul ul li a {
text-decoration:none;
color:#000;
font-size:0.9em;
}

#sidebar a:hover {
color:#f30;
}

h3 {
margin:15px 0 0 0;
font-size:1.1em;
}

.menurule {
border-bottom:1px #666 solid;
width:100%;
margin:2px 0 10px 0;
}

#sidebar ul li a {
text-decoration:none;
color:#000;
background:url(images/f30circle1.gif) left center no-repeat;
padding-left:12px;
}

.bottomlinks {
margin-top:10px;
}

.bottomlinks h3{
display:inline;
line-height:2em;
}

Beautiful. Thank you. I will remember that for future reference.

As a follow-up question, I don't suppose there's any way to make the burger dots scale with the text (i.e. give them an em dimension)? It's not crucial; I'm just wondering.

You would have to place in the document as images to do that. You can't resize a background image yet in CSS.

since your Q is answerred already....
your title is great, burger dots :)