Aligning FORM input objects?

[brett]

I have two visible FORM input objects that i'd like to align next to
each other horizontally. However, the left side item is slightly lower
than the right. Is there any style I can apply that will keep them
aligned?

Here's the problem code:

<p><textarea name="comment" id="comment" cols="100%" rows="10"
tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5"
value="Submit Comment" />
<input type="hidden" name="comment_p ost_ID" value="21" />
</p>
<input type="button" value="Preview" onclick="" />

You can see the full page here:
http://www.cygen.com/blog/index.php/...-my-wordpress/

Thanks,
Brett

[Ben C]

On 2006-11-11, brett <ac*****@cygen. comwrote:

I have two visible FORM input objects that i'd like to align next to
each other horizontally. However, the left side item is slightly lower
than the right. Is there any style I can apply that will keep them
aligned?

Your "Submit Comment" button is a right float, in its own <p>,
followed by the Preview button which starts a new anonymous block box.

The gap is formed by the bottom margin of that <pand the top margin of
the "Preview" button.

So if you add 'style="margin-bottom: 0;"' to the <paround the Submit
Comment button, and 'style="margin-top: 0' to the Preview <input>
element, the gap disappears and the buttons are aligned. You've already
set margins of 0 on the Submit Comment button in the stylesheet.

This is the quick fix, but maybe it would be less haphazard to put both
buttons in a single div (div is better than p here I think).

In other words:

<div>
<input name="submit" ...
<input value="Preview" ...
</div>

With one of the inputs floated right (which you have) and then set
margin on both of them to the same thing (currently you have margin: 0
on one of the inputs) which will line them up.

[snip]

You can see the full page here:
http://www.cygen.com/blog/index.php/...-my-wordpress/

[brett]

<div>

<input name="submit" ...
<input value="Preview" ...
</div>

With one of the inputs floated right (which you have) and then set
margin on both of them to the same thing (currently you have margin: 0
on one of the inputs) which will line them up.

I've tried that but it is still not aligned:

<div style="margin: 0px">
<input name="submit" type="submit" id="submit" tabindex="5"
value="Submit Comment" />
<input type="button" value="Preview" onclick="" />
</div>

Where do you see the margin is set on one of them?

Thanks,
Brett

[Ben C]

On 2006-11-11, brett <ac*****@cygen. comwrote:

><div>
<input name="submit" ...
<input value="Preview" ...
</div>

With one of the inputs floated right (which you have) and then set
margin on both of them to the same thing (currently you have margin: 0
on one of the inputs) which will line them up.

I've tried that but it is still not aligned:

Worked for me.

><div style="margin: 0px">

Never mind about the margins on this div. They're 0 anyway.

><input name="submit" type="submit" id="submit" tabindex="5"
value="Submit Comment" />
<input type="button" value="Preview" onclick="" />
</div>

Where do you see the margin is set on one of them?

IIRC your style sheet (style.css) sets margin: 0 on one of the buttons.
So either set margin: 0 on both of them, or leave them both alone.

[brett]

Thanks a lot. I've corrected it.