HTML/CSS image hover - using different sized images

Question

So what I have is this website: http://www.gameplay-universe.uphero.com/ If you hover with the mouse on the social images on the footer, which are in a table, you'll see that smaller images change to bigger and move the layout. How to avoid/fix this? No matter of CSS/HTML/JS just I need to solve this. My code:

<table class="social" align="center" height="40" width="40">
<tr>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/rss-inactive.png" border="0" onmouseover="this.src='/resources-backups/rss-active.png';" onmouseout="this.src='/resources-backups/rss-inactive.png';" alt="rss-feeds" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/youtube-inactive.png" border="0" onmouseover="this.src='/resources-backups/youtube-active.png';" onmouseout="this.src='/resources-backups/youtube-inactive.png';" alt="youtube" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/twitter-inactive.png" border="0" onmouseover="this.src='/resources-backups/twitter-active.png';" onmouseout="this.src='/resources-backups/twitter-inactive.png';" alt="twitter" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/facebook-inactive.png" border="0" onmouseover="this.src='/resources-backups/facebook-active.png';" onmouseout="this.src='/resources-backups/facebook-inactive.png';" alt="facebook" />
</a>
</td>
<td style="white-space: nowrap; margin: 0 auto;">
<a class="myButtonLink" href="#later_to_add">
<img src="/resources-backups/google-plus-inactive.png" border="0" onmouseover="this.src='/resources-backups/google-plus-active.png';" onmouseout="this.src='/resources-backups/google-plus-inactive.png';" alt="google-plus" />
</a>
</tr>
</table>

Also can I have a fiddle with the code changed to the new standarts (HTML5, CSS3, etc..). Thanks in advance!

Answer 1

set these css attributes to the element holding the Images:

Position:relative;
height:(Here put in pixels the height of your element)px;

setting a height will force it to stay static to that height.

Answer 2

Give your table a min-height:

Change this line :

<table class="social" align="center" height="40" width="40">

To :

<table style="min-height:64px;" class="social" align="center" height="40" width="40" >

Answer 3

Give z-index to the <div>containing images.

Answer 4

I would just put padding or margin on the images, then remove the padding/margin on hover