проблема с плавающими div в ie6 и ie7

Question

Я пытаюсь создать форму поиска, и это HTML-код:

<div id="search_form">

<div class="form-content">

    <form action="http://localhost/mozaic_site/news/search" method="post" accept-charset="utf-8">                            <div class="text-form">

            <input type="text" name="search_text" value="" autocomplete="off" maxlength="100" size="50" class="search_text" />                            </div>

        <div class="button_from">

            <input type="submit" name="search" value="بحث في الموقع" class="search_button" />                            </div>

    </form>                        
</div>

и это код CSS:

#search_form {
float:right;
border: 1px solid #C1CAD2;
position: relative;
z-index: 3;
margin-top:1em;

}
.form-content {
padding: 0.2em 0.2em 0.22em 0.22em;
background: url('../images/images_collection_3.png') repeat-x scroll 0 0 transparent;
border: 1px solid #fff;
height: 2.1em;
position: relative;
}

.button_from {
float:right;
background-color: #FCC530;
border: 1px solid #BD9E43;
margin-right: 0.3em;
overflow: hidden;
padding: 0;
}

.search_button {
background: url('../images/images_collection_1.png') repeat-x right -1672px;
border: 0 none;
cursor: pointer;
font-weight: bold;
height: 1.8em;
overflow: visible;
font-size: 108%;
}

.text-form {
float:right;
}
.search_text {
height: auto;
width: 30em;
border-color: #7B7B7B #7B7B7B #CBCCCE #CBCCCE;
border-style: solid;
border-width: 1px;
height: 1.5em;
padding: 0.3em 0.2em 0.33em 0.25em;
}

теперь моя проблема в ie6 и ie7

ie6 делает ширину div #search_form 100%, а ie7 заставляет содержимое формы выходить из #search_form div

Я пытался обнаружить проблему, но мне не удалось

как решить эту проблему?

Answer 1

Если приведенный нами пример HTML находится где-то посередине страницы, то это может быть из-за пропущенного </div>.Вы также, возможно, не скопировали его, так что, возможно, нет.

Скорее всего, ваш #search_form div перемещен, то есть из нормального потока документа, но ваши .form-content и другиене.Возможно, это сбивает с толку IE?

Попробуйте добавить .form-content div.

Answer 2

Самый простой способ, который я знаю, это добавить эту строку кода в head (при условии, что все остальные HTML верны, и это только проблема css)

<!--[if IE 7]><link rel="stylesheet" href="YourStyle.css" type="text/css" media="screen, projection"/><![endif]-->

Затем в YourStyle.css отредактируйте CSS, чтобы работать только для IE7. Это не повлияет на другие CSS, поскольку они не будут прочитаны, если IE 7 не браузер

Я на 95% уверен, что он работает и в IE 6 [if IE 6]