A problem with CSS and IE8, Box has an overflow / duplicate image only in IE8! Please help!

Question

I have a problem with multiple div boxes displaying an overflow / repeating image only in Internet Explorer 8. It works fine in Chrome and Firefox.

Link to the problem image: http://img220.imageshack.us/img220/2209/cssproblem.png

I'm really not sure what is going on. Note. In the image above, I highlighted CSS classes that match their div. Here are some of the CSS and HTML that I use:

HTML: (Note: I deleted all form elements inside the field because I deleted it and the problem still remains)

<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 with this problem for a long time, any help would be greatly appreciated!

Thanks, Danny.

Answer 1

From the link you sent to samvaughton.com/search , you have the wrong HTML code around the problem area in IE. If you check the IE developer tools, the <div class="introtext"> doesn't seem to close properly, so the contents of the right hand are interpreted as the same div . After fixing your invalid HTML, make sure that float:right qms_search_container displayed in front of the left side of the markup. This should solve your problem <= IE8, I think.