Padding on link with an image affecting position of parent element(s) - html

Question

I'm working on a new design for my website to see what I like (touch and feel).
My top navigation bar is great so far, except for this issue.
When you hover over the links with just text, everything is fine.
Top-padding is added to make it look like the navigation tabs "move"/"grow".
However, when I hover over a navigation link with one of my images (Paypal, Twitter, YouTube) in it, the top-padding is applied, but it affects the position of the main parent element. This is in the latest version of Chrome and Firefox for Windows 7.
BODY is not the affected parent, but #main (as defined in my CSS) "moves"/"grows" as well.
The URL is http://rickyyoder.x10.mx/new/ and here is the code:
#main{
width:94%;
max-width:880px;
margin:12px auto;
background:#fff;
box-shadow:1px 1px 4px #000;
border-radius:4px;
padding:2px 2px 8px 2px;
}
#nav{
position:relative;
top:-0.8em;
background:#fff;
border-radius:4px;
padding:2px;
display:inline-block;
}
#nav a{
color:#000;
display:inline-block;
padding:1px 1em 1px 1em;
border-radius:0 0 4px 4px;
box-shadow:0px 2px 2px -2px #fff inset, 0px -4px 16px -6px #aaa inset;
-webkit-transition:background 0.5s, padding-top 0.25s;
-moz-transition:background 0.5s, padding-top 0.25s;
vertical-align:top;
}
#nav a:hover{
padding-top:4px;
background:#eee;
}
#nav a:hover img{
-webkit-transition:-webkit-filter 1.5s;
}
#nav a:hover img{
-webkit-filter:hue-rotate(360deg);
}
Is there any way I can avoid this, but still have a "moving"/"growing" effect on these links as well as the textual links?
Thanks in advance.

Answer 1

You can solve the problem adding height to the nav
#nav {
position: relative;
top: -0.8em;
background: #fff;
border-radius: 4px;
padding: 2px;
display: inline-block;
height: 50px;
}