SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question problem with floated divs in ie

    hi

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


    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="بحث في الموقع" class="search_button" />                            </div>
    
                                </form>                        
    </div>
    
                        </div>

    and this is it's css code:

    Code 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;
    }
    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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Something like this should get you pointed in the right direction.
    Code HTML4Strict:
    <!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. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you that solved my problem


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •