July 26, 2004

Newbie HTML/CSS tip: An old bane of the web developer is how many browsers move to the next line when they encounter a closing form tag. The inconsistency of this behavior causes many to resort to opening forms as high as possible and closing them as low as possible, or wrapping forms in tables, or whatever. CSS to the rescue! To inline a form:

<form action="..." style="display: inline;">...</form>

comments...

This can be applied in the reverse as well. For example, instead of wrapping your tag in a or

to force it to be on its own line, apply "display: block;" to the style. tags, begone!

Or, in your CSS declarations:

form {margin:0; padding:0}

Sorry Dan, that doesn't have the intended effect. It brings the next line closer to the bottom of the form, but does not render subsequent elements on the same line as the form block. I wanted:

Beginning. End.

to appear as:

Beginning. [Middle] End.

(I dislike Movable Type's comment cleaner. I'll fix it later...)

Should be:

Beginning. ^form^^input type="submit" value="Middle"^^/form^ End.

(where ^ is lt/gt).