Form Labels Bunch Up In Ie 7

[chibineku]

I was having trouble with inputs bunching up in IE7 and I sorted it with a simple margin: 5px 0; statement. Fine. The labels for the inputs are still bunching up though, and they don't sit in line with the inputs they are labelling. I've tried assigning them the same margin and different line heights, but to no avail. Well, that isn't true: when I give the labels margin: 5px 0; they line up right, but they indent for some reason, each one starting where the previous one stopped, like a flyout menu.Here is a link without the margin on the labels:http://sinaesthesia.co.uk/registration_form.html

[jeffman]

labels and inputs are inline elements. float and clear only apply to block elements. Defining them as block might do something.

[chibineku]

Perfeto, papa.edit: now, any reason password inputs ought to appear shorter than text inputs, despite having the same size?

Edited September 23, 2009 by chibineku

[jeffman]

When you use the size attribute, the length will be based on the font used. It could be that IE uses different defaults for password and text inputs. Try using CSS.

[chibineku]

Hm, I tried that, along with different font-weights and I can get it to expand, but never to the right size. It's not really that important, but I aim for consistency. If I set the size to 31 and not 30 for the password fields, it looks a hair's breadth off, which is better. But what selector can I use? I've read input [type=password] works, but it doesn't in IE7 and before anyway. I've also seen input.password, but that failed, too.Oh, since I'm applying the size at the element level, that declaration supercedes the stylesheet. Okay.

Edited September 23, 2009 by chibineku

[chibineku]

Okat, [type=password] does work, and I assigned it a fixed px width. Works now - fantastico. A week ago I had all but given up on making my site work in IE7, but I'm glad for that 'all but'