only 'half' border appears in firefox

Hi guys, I have a small image gallery where i have a main image and a few thumbnails underneath. On hovering on a thumbnail I've made the border on the link around the image change colour. I've sorted that bit but suddenly in firefox only the bottom half of the border is showing.
Oh dear! IE is working ok though. Can anyone help me out with this?
thanks v much. My CSS and HTML code is below.
beN
CSS:
a.previewThumb{
border:1px solid #CCCCCC;
margin:2px;
}
a:hover.previewThumb{
border: 1px solid #3584C6;
}
a.previewThumb img{
border:none;
}
HTML:
<!-- thumbnail images here! -->
<td align="center"><a class="previewThumb" href="#"><img src="images/bloc_merc_07_sml1.jpg" /></a><a class="previewThumb" href="#"><img src="images/bloc_merc_07_sml2.jpg" /></a><a class="previewThumb" href="#"><img src="images/bloc_merc_07_sml3.jpg" /></a></td>

Your border call is incorrect.

when you use the shorthand like you did here you need to do the border look and then seperately declare its width.

border:solid #CCCCCC;
border-width:top right bottom left;

the way you have it now is for a specific side such as

border-left:1px solid #CCCCCC;

__________________

Thanks, I have tried that but as I thought, it did not solve the problem. You can specify borders like I have quite happily. The issue is as i said with the border appearing around an a tag which has an img inside it; only the bottom half appears.

I have tried applying the border to just the image using 'a.previewThumb img' or 'a:hover.previewThumb img' which works in Firefox and solves that problem but then the hover effect stops working in IE.

Any other suggestions?

cheers,

beN

That has always given me problems *shrug* what can ya do.

__________________