IE7 border style dotted glitch

Here is a strange little glitch I just came across:

this css:

li{
    border-bottom:1px dotted #CCCCCC;
}
li#active{
    margin-top:2em;
    border-top:2px solid #000000;
}

works fine in IE6, FF and opera, but in IE7 the bottom border on the li identified as 'active' magically becomes dashed as opposed to dotted as previously specified.

Given that the only difference is the fact the active list item has a top border it had to be something to do with that. I changed the width of the top border from 2px to 1px and hey presto the bottom border reverted to being dotted again. Very odd, and quite annoying as the top border was supposed to be 2px thick.....But then it looked more strange having a single list item that had a dashed line under it rather than a dotted one.