Problem with floated divs in ie

HTML & CSS
1

hi

i m trying to create a search form and this is it’s html code :

<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="&#1576;&#1581;&#1579; &#1601;&#1610; &#1575;&#1604;&#1605;&#1608;&#1602;&#1593;" class="search_button" />                            </div>

                            </form>                        
</div>

                    </div>

and this is it’s css code:

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

now my problem is in ie6 and ie7

ie6 make the #search_form div width 100% and ie7 make the form content go out the #search_form div

i tried to discover the problem but i didn’t succeed

how to solve this problem ?

2

Hi,

Yes that is an old IE6/7 float bug. It is triggered when the floated parent does not have a width while having floated children. The parent will expand to 100% width.

To fix it you can use inline-block on the child elements instead of floats, that will also allow you to use vertical-align as well. :wink:

Something like this should get you pointed in the right direction.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
.form-content {
    float: right;
    /*height: 2.1em;*/
    position: relative;
    z-index: 3;
    margin: 1em 0 0;
    padding: 0.2em;
    background: url('../images/images_collection_3.png') repeat-x scroll 0 0;
    border: 1px solid #C1CAD2;
}
.form-content form {
    margin: 0;
}
.search_button {
    display: inline-block;
    vertical-align: middle;
    height: 1.8em;
    background: #FCC530 url('../images/images_collection_1.png') repeat-x right -1672px;
    border: 1px solid #BD9E43;
    cursor: pointer;
    font: bold 1em/1.2 arial;
}
.search_text {
    display: inline-block;
    vertical-align: middle;
    width: 30em;
    height: 1.5em;
    padding: 0.3em;
    border: 1px solid #7B7B7B;
}
</style>

</head>
<body>

<div class="form-content">
    <form action="http://localhost/mozaic_site/news/search" method="post" accept-charset="utf-8">
        <div>
            <input type="submit" name="search" value="Submit" class="search_button">
            <input type="text" name="search_text" value="" maxlength="100" size="50" class="search_text">
        </div>
    </form>
</div>

</body>
</html>
3

thank you that solved my problem