title: Disappearing submit button in IE7
body: <p>Greetings. I'm having troubles with the following legacy code. It's fine in everything except IE7, where the submit button disappears. Space is still left for it on the page, but it doesn't show. I've tried various ways of forcing hasLayout, but without success. Any suggestions?</p>
  
  <p>XHTML (XHTML 1.0 Strict DOCTYPE):</p>
  
  <pre><code>&lt;div id="headerFunctionality" class="clearfix"&gt;
  &lt;div id="headerSearch" class="clearfix"&gt;
  &lt;form action="http://foo.com" method="GET"&gt;
  &lt;label for="q"&gt;Search&lt;/label&gt;
  &lt;input id="q" name="q" type="text" class="text" /&gt;
  &lt;input type="submit" id="btn_search" value="Search"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#headerFunctionality {
      float: right;
      display: inline;
      margin: 24px 14px 25px 0; 
  }
  
  #headerSearch{
      float: left;
      margin-left: 20px;
      width: auto;
  }
  
  #headerSearch label{
      position: absolute;
      top: -5em;
      color: #FFF;
  }
  
  #headerSearch input.text{
      width: 133px;
      height: 18px;
      border: 1px solid #999;
      font-size: 0.69em;
      padding: 2px 3px 0;
      margin: 0 6px 0 0;
      float: left;
  }
  
  /* Replace search button with image*/
  input#btn_search {
      width: 65px;
      height: 20px;
      padding: 20px 0 0 0;
      margin: 1px 0 0 0;
      border: 0;
      background: transparent url(../images/btn.search.gif) no-repeat center top;
      overflow: hidden;
      cursor: pointer; /* hand-shaped cursor */
      cursor: hand; /* for IE 5.x */
  }
  form&gt;input#btn_search { /* For non-IE browsers*/
      height: 0px;
  }
  
  input#btn_search:focus, input#btn_search:hover {
  
  background: transparent url(../images/btn.search.over.gif) no-repeat center top;
  </code></pre>
  
  <p>}</p>