background on a:hover extends beyond borders

i was going to put a link to the site, but im shy hehe...

so i'll just describe the problem, i have a photoblog and the markup is like this:

<ul>
   <li><a class="image" href="image.jpg"><img src="thumb.jpg" /></a></li>
   <li><a class="image" href="image.jpg"><img src="thumb.jpg" /></a></li>
   <li><a class="image" href="image.jpg"><img src="thumb.jpg" /></a></li>
</ul>

Code (markup):

and the style is like this:

a {
  background-color: inherit; 
  text-decoration: none; 
  }
a:link { 
  color: #3B3B3B; 
  border-bottom: 1px dashed; 
  }
a:visited { 
  color: #999; 
  border-bottom: 1px dashed; 
  }
a.image { border: none !important; }
a.image:hover { border: none !important; }
a:hover { 
  color: #3B3B3B; 
  background-color: #E6E6E6; 
  border-bottom: 1px solid !important;
  }
a.image:hover { background-color: #E6E6E6; }
img { 
  padding: 5px; 
  background-color: inherit; 
  margin-bottom: 10px;
  border: 1px solid #3B3B3B;
  }

Code (markup):

so here's how it works:

IE - this is what i was after: when you hover over the image, the background of the image changes color within the border

FF - now what i want: when you hover over the image, the background of the image and the 10px margin outside the bottom border changes color.

hoping someone could help me out with this little problem and if i have to have to have to post a link, I will... thanks!