title: Problem with CSS and IE8, Box has an overflowing/repeating image in IE8 only! Please help!
body: <p>I have a problem with a few div boxes displaying an overflowing/repeating image only in Internet Explorer 8. It works fine in Chrome &amp; Firefox. </p>
  
  <p><strong>Link to an image of the Problem:</strong><a href="http://img220.imageshack.us/img220/2209/cssproblem.png" rel="nofollow">http://img220.imageshack.us/img220/2209/cssproblem.png</a></p>
  
  <p>I'm really not sure what's going on.. Note. In the image above I have highlighted the CSS classes that match their divs. Here is some of the CSS &amp; HTML code I'm using:</p>
  
  <p><strong>HTML:</strong> (Note: I have removed all the form elements inside the box because I removed it, and the problem still remained)</p>
  
  <p></p>
  
  <pre><code>    &lt;div class="introtext"&gt;
              &lt;h1&gt;Where to Search?&lt;/h1&gt;
      &lt;/div&gt;&lt;!--introtext --&gt;
  
      &lt;div class="qms_search_container"&gt;
  
          &lt;div class="qms_search_header"&gt;
              &lt;h2 class="qms_search"&gt;What to Search?&lt;/h2&gt;
          &lt;/div&gt;&lt;!--#end qms_search_header--&gt;
  
          &lt;div class="qms_search_box" align="left"&gt;
  
  
              &lt;!--Form Stuff --&gt;
  
  
          &lt;/div&gt;&lt;!--#end qms_search_box--&gt;
  
      &lt;/div&gt;&lt;!--#end qms_search_container--&gt;
  &lt;/div&gt;&lt;!--#end intro_banner--&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    .introbanner { 
          background:url(../img/header_bg.gif) no-repeat bottom left #FFF; 
          width:700px; 
          height:230px; 
          padding:0 0 30px 0; 
          margin-bottom:10px; 
          overflow:hidden;
      }
  
      .introtext {
          width:194px; 
          float:left; 
          color:#FFF; 
          border-right:2px solid #FFF;
          height:206px; background:url(../img/intro_bg_left.gif) no-repeat top left #222935; 
          padding:12px;
      }
  
     .qms_search_container {
           float:right;
           width:456px;
           height:206px;
           padding:12px;
           overflow:hidden;
           background:url('../public/frontend/img/area_banner.jpg') no-repeat top left #ffffff;
  
     }
  
     .qms_search_header {
           width:430px;
           height:32px;
      }
  
  
      .qms_search_header h2 {
           margin:0 0 0 0; padding:0; color:#FFF; font-weight:100; font-size:20px; background-image:none; height:auto;
      }
  
  
       .qms_search_box {
            width:436px;
            height:164px;
            background:url(../img/qms_search_bg.png);
            padding:5px;
            overflow:hidden;
       }
  </code></pre>
  
  <p>I've been stuck on this problem for so long now, Any help would be much appreciated!</p>
  
  <p>Thanks, 
  Danny.</p>