Css: Como Botar Efeito Em Links Com Imagem?

[::..Hunter..::]

tipo assim, quero que uma imagem no estado normal do link tenha uma borda 1px solid #ccc e no estado hover da imagem ela fique com borda 1px solid #333 e isso funcionar no firefox?

No IE funciona, a imagem ficam com a borda cinza e quando bota o mouse em cima fica na cor 333, mas no firefox não aparece a borda no estado normal e no estado hover ele só aparece embaixo.

Qual o segredo?

o css:

<style type="text/css">

<!--

a:link {border: 1px solid #ccc}

a:hover {border: 1px solid #333}

-->

</style>

e no link fica assim:

<a href="link1"><img src="imagem.jpg" width="145" height="207" order="0"></a>

no IE funciona, no firefox não.

[OSJunior]

Tente adicionar o código abaixo em seu script.

div {

-moz-box-sizing:border-box;

box-sizing:border-box;

}