Page 1 of 1

[SOLVED] CSS form alignment problems

Posted: Thu May 13, 2010 1:05 pm
by batfastad
Hi everyone

I'm converting a whole bunch of forms on our intranet from tables to CSS and it's pretty satisfying getting rid of all the mark up.

I'm using a fieldset with a particular class to indicate that the contained rows should be aligned with my new CSS definitions.
Each form row is contained within a <p> element, with the label floated left of the input and the label given a width in ems.

The overall structure works great but I need some fine tuning.
Here's a test page: http://thenetzone.co.uk/cssfail/index.html

The problems:
1) The label has a green solid border and as you can see they're not vertically aligned within the outer paragraph element (denoted with the orange dashed border)
Is there a way to get my left-hand labels aligned centrally within the paragraph element?

2) Why is the "Address Private" label aligned to the base of the paragraph element and not the top like the ones to the left of the input fields?

3) I created a new class for some labels to denote if a form input is required. This class is called required and adds a small red triangle to the top right corner of the field label background.
I added some padding-right to this class so the label text is moved away from the right hand boundary of the label a bit so that it doesn't collide with the image.
But rather than pushing the text slightly to the left, it just increases the width of the label and pushes the input over a bit even though I've specified the width of the label again within the required class.
This problem can be seen in the top "Company Name" label.

Anyone got any suggestions as to what's going on with this?
Any other comments/suggestions on my CSS?

It all seems to validate and displays consistently in FF/IE 7

Cheers, B

Re: CSS form alignment problems

Posted: Thu May 13, 2010 2:24 pm
by kaszu
1,2)
Remove float from label and use inline-block and vertical-align

Code: Select all

fieldset.form_rows p label {
    vertical-align: middle;
    display: inline-block;
    
    /* float: left;  <- removed */
    ...old code...
}
input[type="text"], input[type="password"], textarea {
    vertical-align: middle;
}
3) Wrap label content inside SPAN and apply that triangle and padding to it

Code: Select all

<label class="required"><span>Company Name</span></label>

Code: Select all

label.required span {...}

Re: CSS form alignment problems

Posted: Fri May 14, 2010 5:43 pm
by batfastad
Wow that is completely excellent. Working perfectly now.
Thanks for the rapid help! :D

Cheers, B