CSS form ie7 bug with margin left and float

Question

This css code has troubles for ie7. In ie6 is a total absolute mess.
The problem is that the input textbox gets bellow label. Only work around is to float the div left but has problems then with sizing..

fieldset.label_side > label {
    width: 100px;
    position: relative;
    float: left;
    left: 0;
    padding: 18px 20px 8px;
    border-right: 1px solid #eee;
    clear: left;
    line-height: normal;
}
fieldset label{
        font-size: 13px;
    font-weight: bold;
    padding: 15px 20px 10px;
    margin-right: 10px;
    display: inline-block;
    color: #333;
}

fieldset.label_side > div {
    width: auto;
    margin-left: 140px;
    padding: 15px 20px;
    border-left: 1px solid #eee;
    clear: right;
      display: block;
}

.box-block fieldset input{    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

input.text{
    width: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border : solid #eee 1px;
    background-color: #fbfbfb;
    line-height: 32px;
   display: inline;
    height: 32px;
    padding: 0px 0 0 5px;

}

UPDATE

I found that the problem is because of the input width 100%.. I am looking how to fix it.

Answer 1

IE6 and IE7 don't play nice when the display is set to "inline-block";

Try adding the following to your label's CSS rule:

fieldset label{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

I would probably have a conditional sheet for IE browsers (usually how I deal with this problem). Here's a site that exlains the problem in better details than I ever could: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

May be you have to write vertical-align:top in your label & input . Write like this:

label, input{
 vertical-align:top;
}

Answer 3

One solution that may work (it works for me) is to apply negative margin at input (textbox) ... or fixed width for ie7 or to drop ie7 support.

I had the same problem and i hated to have extra divs for border etc!

So here is my solution which seems to work!

You should use a ie7 only stylesheet to avoid the starhacks.

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}