Button Text dissapears using overflow:visible within IE7

Question

In Internet Explorer, there is unnecessary padding that occurs to the left and right within the button when the button name is large. As a result of this, the known solution is to add "width: auto" and "overflow:visible" to the button style, but doing so will inadvertently make the text in the button disappear when the user scrolls the page down and then back up.

I would very much like to use the style I've included so the padding stays removed, but more importantly resolve the issue with the button text disappearing. It's really an odd one!

I've created this DEMO page for you to test the code where it's happening: http://jsbin.com/uhuze3

Note: You'll need IE7 to see the issue, so for those who don't have it, I create this video for you to see the issue. http://screencast.com/t/MTg0NzY2Zj

Answer 1

I was able to resolve this and improve the code a bit.

You can see the code here: http://jsbin.com/uhuze3/4

This was the old code: http://jsbin.com/uhuze3