Tangential Ramblings

I've changed the style of links when you hover over them, both those running down the right hand side and in-line links that appear within the body of posts. Now, they take the negative of the regular appearance, the white space appearing purple, and the purple text appearing white. I quite like this behaviour, as it's obvious to the user that they're about to go somewhere.

Because of their change in behaviour though, the links on the right jump around a little, specifically in IE. Before hovering, they're indented slightly into the grey area, which I like. If you hover over the link, it jumps to the left, flush against the panel's left edge. (Oddly enough, in Firefox 1.0.7, the unhovered links appear flush against the left edge of the panel.) I'm not an html or css expert, but I think this is the code that matters. Can anyone help in sorting it out?

First of all, in the stylesheet (style.css), I have the following lines:

A:link{ color: #660099; text-decoration: underline; }
A:hover{ color: #FFFFFF; background: #660099;}

In the same file, there are two pieces that define the side panel, as follows:

.side {
font-family:trebuchet ms, verdana, arial, sans-serif;
color:#333;
font-size: small;
font-weight:normal;
background:#EEE;
line-height:180%;
padding:2px;
}

.sidetitle {
margin:0px 0px 0px 0px;
font-family:georgia, verdana, arial, sans-serif;
color:#FFFFFF;
font-size:normal;
font-weight:bold;
background:#660099;
line-height:140%;
padding:2px;
margin-top:10px;
text-align:left;
letter-spacing: .2em;
}

Now for the panel.template file, which generates the side panel. The section that defines the categories section is as follows:

Can anyone help me resolve the jumping?