Spans, buttons, and IE7 float bugs

I am trying to create a button which is capable of resizing itself depending on the size of the text within it. The button is defined by the HTML text below. The whole button is defined as a <span>, and has three constituent components: the left curved portion of the button, the center body of the button (houses the text and expands accordingly), and the right curved part of the button. The right and left parts of the button are actually mirror images of each other.

The current code looks completely fine on Firefox and IE8, but when I view it on IE7, the right curved part floats to the right (this is correct), but the left and center float to the left of th开发者_如何学JAVAe panel that the button is in. This is not correct, and I wish to remedy this. However, trying to deal with this problem since it's IE related is a major pain for me. Can anyone suggest a solution or a work-around? Here is a picture for the button. xp-b-left defines the left side of the button and xp-b-right the right side of the button.

This is how the button looks like on IE7:

This is how the button looks like on Chrome, FF and IE8+ (no left float and no superfluous space between text and edges within button):

<span class="xp-b-submit xp-b-submit-flt xp-l-il xp-b-right">
    <span class="xp-b-leftSide">
    <!---->
    </span>
    <a href="#" class="xp-t-bold" id="flightSubmitLink">
        Search
    </a>
    <span class="xp-b-rightSide">
    <!---->
    </span>
</span>

CSS for the button:

.xp-b-submit-flt {
    background: url("../../images/new_blue_button.png") no-repeat scroll -22px 50% transparent;
}

.xp-b-submit {
    background-position: right -32px;
}

.xp-b-submit, .xp-b-leftSide, .xp-b-submit-large, .xp-b-submit-large .xp-b-leftSide, .xp-b-rightSide {
    background: url("../images/buttonBG.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
}

.xp-b-rightfloat {
    float: right;
}
.xp-b-leftSide {
    background-position: left -32px;
    float: left;
    height: 19px;
    width: 3px;
}

.xp-b-submit a#flightSubmitLink {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
}

.xp-b-submit a, .xp-b-submit input {
    color: #FFFFFF !important;
    font-size: 10px;
    padding: 5px 5px 4px 2px;
}

.xp-b-submit a, .xp-b-submit input, .xp-b-submit-large a, .xp-b-submit-large input {
    float: left;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.xp-t-bold {
    font-weight: bold !important;
}

.xp-b-rightSide {
    background-position: right -32px;
    float: right;
    height: 19px;
    width: 3px;
}

Ahh. I think i've had this problem. Try putting a   in the span.

<span class="xp-b-leftSide">
   &nbsp;
    </span>

I think ie7 has an issue with empty <span>s.