I've been trying to create a similar style as used on http://www.msn.com (when you search for images the thumbnails have a border around them which changes on hover) For some reason I can't get it to work in Firefox.

Please see my code below:


<html>
<head>
<style type="text/css">
<!--
#pic a{border: 5px solid #CCCCCC;}
#pic a:hover {border: 5px solid #FF0000;}
-->
</style>
</head>
<body>
<div id="pic">
<a href="#"><img border="0" src="<A href="http://www.mpfamily.com/Sponge-Bob.jpg"></a">http://www.mpfamily.com/Sponge-Bob.jpg"></a>
</div>
</body>
</html>

Works fine in IE but wierds out in Firefox. Any thoughts?

Thanks!