Проблема с CSS и IE8, Box имеет переполнение / повторение изображения только в IE8!Пожалуйста помоги!

Question

У меня проблема с несколькими разделителями, отображающими переполненное / повторяющееся изображение только в Internet Explorer 8. Он отлично работает в Chrome и Firefox.

Ссылка на изображение Задачи: http://img220.imageshack.us/img220/2209/cssproblem.png

Я действительно не уверен, что происходит .. Примечание. На изображении выше я выделил классы CSS, которые соответствуют их div. Вот часть кода CSS и HTML, который я использую:

HTML: (Примечание. Я удалил все элементы формы внутри поля, потому что я его удалил, и проблема все еще остается)

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

Я застрял над этой проблемой так долго, любая помощь будет высоко ценится!

Спасибо, Дэнни.

Answer 1

По ссылке, которую вы разместили samvaughton.com / search , у вас есть недопустимый HTML-код вокруг проблемной области в IE.Если вы включите инструменты разработчика IE, <div class="introtext"> не будет закрываться должным образом, поэтому правый контент интерпретируется как тот же div.После того, как вы исправили неверный HTML-код, убедитесь, что * float:right qms_search_container отображается перед левой стороной в разметке.Это должно решить вашу проблему <= IE8, я думаю. </p>