Spry UI 1.7 "Featured Content" Slideshow: Non-functioning buttons IE9

Question

Hey guys!
So I'm about finished with a website that I've been working on for some time now. One of the last things I did was customize a Spry Content Slideshow widget to be implemented into the homepage. It went well; things are pretty much exactly how I want them...tested the site (locally) this morning, and it worked great in Chrome, pretty good in Firefox...and for the most part, worked fine within IE9. Until I went to test links. In the first two browsers, the links worked fine, but IE9 has, for some reason, shifted the actual, clickable part of the button just to the right of the button. Here's a brief snippet of the code that covers the two buttons on slide #1:
                      <a href="nate.html">
                      <button type="button"><span><span><span>Nate</span></span></span></button>
                      </a>   
                      <a href="kate.html">
                      <button type="button"><span><span><span>Kate</span></span></span></button>
                      </a> </div>
Again, the buttons themselves don't actually work, but there's a thin strip, probably 1-2 pixels wide, and as tall as the button, directly to the right that are active within IE9. It's as if the link got compressed into that 1x30 pixel space somehow...I can't figure it out!
Any ideas on how to make IE recognize the actual buttons as the link, instead of that random little sliver next to them?  Thanks in advance for any help, and let me know if you need more details!
-Casey

Answer 1

Add an onclick event as follows
<a href="nate.html" onclick="window.location=this.href;return false;"><button type="button"><span><span><span>Nate</span></span></span></button></a>    <a href="kate.html" onclick="window.location=this.href;return false;"><button type="button"><span><span><span>Kate</span></span></span></button></a>
Gramps