CSS code alignment "problems", image moves

[spellmeista]

I have been using the following script in a stylesheet:


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 1px solid #ccc;
}

.toggleborder:hover img{
border: 1px solid navy;
}

.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}

</style>

This code was put in the html+a link to the stylesheet:

<a class="toggleborder" href="http://www.dynamicdrive.com/style/">
<img border="0" src="media/button2.gif" width="163" height="57" />
</a>

The only problem is:http://www.mhwloeffenedu.cursistennet.nl/home.htm (css works perfectly)except the image moves a little bit. Obviously I don't want this to happen. Is there a way I can prevent this problem from occuring?

Thx in advance!

ps sorry for the smilies, i saw later that they also could be disabled!

[Snookerman]

Remove the highlighted:

<img border="0" src="media/button2.gif" width="163" height="57" />

Good luck!

[spellmeista]

Remove the highlighted:

<img border="0" src="media/button2.gif" width="163" height="57" />

Good luck!
http://www.mhwloeffenedu.cursistennet.nl/home.htm

I have done as you said but unfortunatelly it still moves!

Now I have this code:


<a class="toggleborder" href="contact/contact.htm">
<img src="pictures/logo_wb.gif"/>


Maybe you can help me out here?

[Snookerman]

Well I'm not sure what border you want the image to have when you don't hover over it, but if you want tog get rid of the jumping you have to specify something, e.g.:

.toggleborder img{
border: 1px solid #fff;
}
.toggleborder:hover img{
border: 1px solid navy;
}

Good luck!