Dotted lines do not look right in IE

I have the following CSS:

#idListLeft {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#idListLeft li {
    background-color: #3A3A3A;
    border-top: dotted 1px #ffffff;
    display: block;
    margin-left: 10px;
    color: #A2A2A2;
    font: bold 9px/37px Verdana, Arial, Tahoma, Georgia;
    text-decoration: none;
    text-transform: uppercase;
    width: 155px;
}
#idListLeft li a {
    color: #A2A2A2;
    font: bold 9px/37px Verdana, Arial, Tahoma, Georgia;
    text-decoration: none;
    text-transform: uppercase;
}

Code (markup):

Basically, I want to create dotted lines between list items instead of regular lines. This looks perfect in Firefox. Each dot is 1 pixel wide(?). But, in IE, this looks pretty horrendous. Each dot takes up like 3 or 4 pixels. How can I fix this? Is there a way to fix this only using CSS?

 

IE doesn't support 1 px dotted lines. You can either use 2 pixel lines, or possibly make the anchor block level, and use background images on both the li and anchor to replicate the effect.

 

thats correct...
use dotted image to create the effect on all browsers...