IE7 cuts off text inside a Button element

Here's my button element:

<button type="submit" class="btn-submit"><span><strong>Let Me In, please!</strong></span></button>

and here's the CSS:

.btn-submit { margin: 0; padding: 0; border: none; font-family: Helvetica, Arial, sans-serif; font-size: 1.2em; line-height: 2em; font-weight: bold; color: #525252; background: none; }
.btn-submit span { display: block; float: left; height: 24px; margin: 0; padding: 0 0 0 5px; background: url(../images/btn-submit-left.png) no-repeat 0 0; }
.btn-submit strong { display: block; float: left; height: 24px; margin: 0; padding: 0 13px 0 8px; line-height: 2em; background: url(../images/btn-submit-right.png) no-repeat 100% 0; }

Problem is that in IE7 the "Let me in, please!" text is cut off - only "Let" shows up.

Removing the span and strong classes will display the text in its entirety, as will setting a width to the .btn-submit class. Problem is that I need the background images supplied by the span and strong classes, and I don't know how long the button text will be so can't assign a width to the .btn-submit class.

Any 开发者_开发问答help here is much appreciated. Thanks!

Is there any reason to specify height and float for .btn-submit span and .btn-submit strong ? If not I would suggest you delete them. This will fix the problem for ie7