Question

I have a problem with a few div boxes displaying an overflowing/repeating image only in Internet Explorer 8. It works fine in Chrome & Firefox.

Link to an image of the Problem:http://img220.imageshack.us/img220/2209/cssproblem.png

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 & HTML code I’m using:

HTML: (Note: I have removed all the form elements inside the box because I removed it, and the problem still remained)

    <div class="introtext">
            <h1>Where to Search?</h1>
    </div><!--introtext -->

    <div class="qms_search_container">

        <div class="qms_search_header">
            <h2 class="qms_search">What to Search?</h2>
        </div><!--#end qms_search_header-->

        <div class="qms_search_box" align="left">


            <!--Form Stuff -->


        </div><!--#end qms_search_box-->

    </div><!--#end qms_search_container-->
</div><!--#end intro_banner-->

CSS:

    .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;
     }

I’ve been stuck on this problem for so long now, Any help would be much appreciated!

Thanks,
Danny.

Answer 1

From the link you posted samvaughton.com/search, you have invalid HTML around the problem area in IE. If you check in the IE developer tools, <div class="introtext"> does not seem to be closed properly, so the right hand content is interpreted to be in the same div. Once you have fixed your invalid HTML, make sure that the float:right qms_search_container appears before the left hand side in the markup. This should resolve your <=IE8 issue I think.