title: IE8 negative margin issue
body: <p>I have a layout issue in IE8 only where a negative margin does strange things.</p>
  
  <p>I have tried to use some of the fixes I have found in this forum, but to no avail. It is Friday night after all!</p>
  
  <p>The page is here: <a href="http://community.thelandtrust.org.uk/wordpress/" rel="nofollow">http://community.thelandtrust.org.uk/wordpress/</a></p>
  
  <p>The culprit is the search field on the right hand side, which has a negative margin to allow the button to sit over it on the same line.</p>
  
  <p>It works fine in all but IE8. In IE8, with a right margin of -80px the button is over the field but there is a large space to the right. With a right margin of -40px the button is on the next line, and still with a large space to the right.</p>
  
  <p>I have noticed that it seems to be the same distance from the right each time. Is it a clearing issue?</p>
  
  <p>Thanks in advance for any help you can offer!</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;form action="http://community.thelandtrust.org.uk/wordpress/" id="search-form" class="search-form" method="get"&gt;
      &lt;div&gt;
          &lt;input type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." id="search-text" name="s" class="search-text"&gt;
          &lt;input type="submit" value="Go" id="search-submit" name="submit" class="search-submit button"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>input,textarea {
      background:#f7f9e0 url(images/Input_gradient.jpg) repeat-x top left;
      border:none;
      -moz-border-radius:20px;
      border-radius:20px;
      vertical-align:middle;
      min-height:20px;
      width:94%;
      font-family:Arial, sans-serif;
      font-size:1em;
      padding:10px 20px;
  }
  input.button,input#submit {
      background:#e6e99d url(images/Button_gradient.jpg) repeat-x bottom left;
      height:40px;
      width:auto;
      min-width:40px;
      font-weight:700;
      cursor:pointer;
      float:right;
  }
  input.button:hover,input#submit:hover,#primary-menu li a:hover {
      background:#c7cc5c;
  }
  form#search-form{
      overflow: hidden;
  }
  input.search-text {
      margin-right: -80px;
      width: 200px;
      float:left;
      font-size: 1.2em;
  }
  input.search-submit {
      background:url(images/Button_arrow_40px.png) no-repeat 0 0 transparent!important;
      width:40px;
      text-indent:-1000px;
      font-size: 0;  
      display:block; 
      line-height: 0;
      float:right;
      clear:right;
  }
  input.search-submit:hover {
      background-position:0 -40px!important;
  }
  </code></pre>