CSS help: working with border of an image link

[stndn]

i was working on my site and found this small problem with CSS's border...

first of all, this is the page that has problem (with details on the problem as well)

now here is the problem:
on the top left of the navigation links, i have three images that i use for switching CSS styles.
I put borders (1px solid red) on all the images, then wrap them with <a> tags to make them clickable.

The borders make up perfect squares in opera.
However, when viewed on mozilla and msie, the following problems occur:
- mozilla: there will be extra pixels on top right, bottom left, bottom right, as soon as i mouse over the link image.
- msie 5.5: there will be extra pixels on bottom left at all time.

i have included the CSS style in the page linked above.

Please let me know if you have any suggestions on how to fix it. As my internet connection is limited, i will be checking this thread again in about a day (or soon as i can).

Thanks for the help.

 

[Barnaby W. Füi]

Hm, doesn't happen to me in firebird.

 

[stndn]

by the way, another note...
if i change the border to 2px, the problem is gone..
but then again, i don't want the border to be that thick, so....

 

[stndn]

actually... i just went to my site again.
it seems that the problem is not there if i view it from my web host..
however, when i try them out in my local machine, the problem is there.
maybe that's why it didn't show up on firebird....

bleh... now the problem gets more complicated ><;;
but then again, i guess as long as the rest of the world sees it as perfect squares, i shouldn't complain...