title: Spans, buttons, and IE7 float bugs
body: <p>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 <code>&lt;span&gt;</code>, 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. </p>
  
  <p>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 the 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. <code>xp-b-left</code> defines the left side of the button and <code>xp-b-right</code> the right side of the button. </p>
  
  <p><img src="https://i.stack.imgur.com/v3VSV.png" alt="Button appearance with all three components"></p>
  
  <p>This is how the button looks like on IE7:</p>
  
  <p><img src="https://i.stack.imgur.com/ShBqt.png" alt="enter image description here"></p>
  
  <p>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):</p>
  
  <p><img src="https://i.stack.imgur.com/bwK9n.png" alt="enter image description here"></p>
  
  <pre><code>&lt;span class="xp-b-submit xp-b-submit-flt xp-l-il xp-b-right"&gt;
      &lt;span class="xp-b-leftSide"&gt;
      &lt;!----&gt;
      &lt;/span&gt;
      &lt;a href="#" class="xp-t-bold" id="flightSubmitLink"&gt;
          Search
      &lt;/a&gt;
      &lt;span class="xp-b-rightSide"&gt;
      &lt;!----&gt;
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS for the button:</p>
  
  <pre><code>.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;
  }
  </code></pre>