Form elements degrading poorly in IE7

[msaz87]

Hey All,

 

I'm putting together a form and have run into an issue with the CSS as it degrade with IE7. The inputs/selects and labels don't line up. See the examples below for what I mean:

 

IE7:

 

All other browsers (except IE6):

 

I can't figure out what in the CSS is causing the disruption... here's the relevant CSS:

form.form {
color:#515151 !important;
font-size:12px !important;
font-weight: normal;
}
form.form input.text {
width: 145px;
border: 1px solid #dfdede;
margin: 0 0 6px 0;
float: right;
}
form.form select {
width: 145px;
border: 1px solid #dfdede;
margin: 0 0 6px 0;
float: right;
}
form.form label {
width: 100px;
margin: 0 0 6px 0;
padding: 0 16px 0 0;
}

 

Any help is greatly appreciated -- thanks!

[coolpriya073]

hi,

 

Reset your styles, commonly referred as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

[msaz87]

hi,

 

Reset your styles, commonly referred as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser.

 

I tried adding a reset, but it doesn't look like it affected the appearance in IE7 whatsoever

[scootstah]

Try floating the label instead of the input.

[coolpriya073]

msaz87

 

can you tell us the code which you are using for the form