Align Submit Button with Radio Input

[tessarian]

I just CANNOT make it line up nicely? valign align vertical align line height padding/margin top I'm getting stuck on something that should be simpleAny help please?I do not wish to use tables if at all possible ... for 2 reasons, one the extra amount of markup is incredible as I will be having about 50 of these on the one page ... and two it is much more difficult to get my PHP neatly in there and all my ids in there with all that extra mark up ...* for easy readability I've removed most the irrelevant PHP HTML and CSSHTML

.form{font-family:Verdana, Arial;font-weight:700;line-height:30px;padding-left:5px;position:relative;top:0;z-index:2}

**Here's the Link http://goo.gl/rgIYx

[chokk]

I'm not exactly sure how you want it to look. Can you be more specific?And what has the .onoff class got to do with the form css?

[jeffman]

For starters, make sure you've reset the whole document:

* {   padding: 0;   margin: 0;}

For line-height to help you vertically align things, the height must be the same as the line-height. So your form element should have these values in addition to the ones you've got already:

.form {   height: 30px;   line-height: 30px;}

Other than that, the alignment of form elements is often best controlled by the font-size value, not the height of the element, which can have unexpected results. Try using the same font-size for all the inputs. You may have to try several to find a reasonable compromise.You probably also want to surround your text in label tags or at least span tags so that you can control their font-size as well. Then something like this will be useful:

.form * {   font-size: 8pt;}

Don't even think of trying to get the radio buttons to line up exactly with the other elements. They will always be a few pixels off. Every browser uses a slightly different vertical offset, and it could easily change with the next release. So far as I know, there is no universal solution for that. And realistically, no one much cares.

[tessarian]

@chokk:) The onoff class had nothing to do with it ... just forgot to take that out ... oopswhat i was looking for was just more of straight line overall if you see http://goo.gl/rgIYx the "submit"/"!!!" is sitting lower than the whole line ... If i were to draw a straight line under the text it would go right through ... so ideally i'd liek it to move up a little so that it's more in a straight line with the text ... @Deirdre's Dad!Thank you you definitely set me in the right direction!In the end what i ddi was removed my line height, (and general height) and put a vertical-align:middle on the submit button style.I know that's totally not what you gave examples of but your little example had me fiddle my way to perfection so thank you!Now how do I mark this as resolved?