CSS form ie7 bug with margin left and float - html

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