Stylesheets - Aligning FORM input objects?

Author

Aligning FORM input objects?

brett

2006-11-19, 7:35 pm

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_post_ID" value="21" />
</p>
<input type="button" value="Preview" onclick="" />

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

Thanks,
Brett

Ben C

2006-11-19, 7:35 pm

On 2006-11-11, brett <account@cygen.com> wrote:
> 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 <p> and the top margin of
the "Preview" button.

So if you add 'style="margin-bottom: 0;"' to the <p> around 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...t-my-wordpress/

brett

2006-11-19, 7:35 pm

> <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

2006-11-19, 7:35 pm

On 2006-11-11, brett <account@cygen.com> wrote:
>
> 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

2006-11-19, 7:35 pm

Thanks a lot. I've corrected it.