Why is the image border offset in Firefox?

I am working on a non-profit site that has a press information page. I am using thumbnail photos as links to the larger images for download.

For the thumbnail images I set the border to 4px white in the off state and then 4px gray in the hover state. I works nicely in Safari but is slightly offset in Firefox in the hover state.

Here is the html:

<div id="press-photos">
  <a class="pic" href="_downloads/nativity-1-full.jpg"><img src="_images/nativity-1-thumb.jpg" alt="nativity-1-thumb"/></a>
  <a class="pic" href="_downloads/nativity-2-full.jpg"><img src="_images/nativity-2-thumb.jpg" alt="nativity-2-thumb"/></a>
  <a class="pic" href="_downloads/nativity-3-full.jpg"><img src="_images/nativity-3-thumb.jpg" alt="nativity-3-thumb"/></a>
  <a class="pic" href="_downloads/nativity-4-full.jpg"><img src="_images/nativity-4-thumb.jpg" alt="nativity-4-thumb"/></a>
</div>

Here is the CSS:

#press-photos                       { clear: left; border: 1px solid #7c0924; background-color: #fff; } 
#press-photos a.pic:link,
#press-photos a.pic:visited {  
            width: 216px; 
            height: 145px; 
            margin: 20px; 
            display: block;
            border: 开发者_JAVA百科4px solid #fff; 
            text-decoration: none;
            color: transparent;
            }
#press-photos a.pic:hover,
#press-photos a.pic:active  { 
            width: 216px; 
            height: 145px; 
            margin: 20px;
            border: 4px solid #cbcbcb; 
            color: transparent; 
            }

Question is: how do I get the border to line up properly in FF?

Thanks.

img { border:0px; }

All of the thumbnails have a border, and that is what is displacing them.

This happens because the a tag has a width and height lower than img size.