|
|
Posted by Jukka K. Korpela on 12/27/05 22:34
Dirk Jagdmann <doj@cubic.org> wrote:
> the following simple html code always places "test text" on a new line
> below the form.
>
> <html><body><form>Input:<input/></form>test text</body></html>
That's to be expected, since a form element is a block element.
Usually people complain about the "empty line" between the form and the
subsequent text. The "empty line" is really just a default bottom margin for
a form, which is a less natural behaviour, but very common in browsers.
> How can I prevent this behaviour? Does some css magic do the trick?
To prevent just the "empty line", you could use
form { margin: 0; }
To prevent both the "empty line" and the line break, you could use
form { display: inline; }
However, it is generally best to put a form on a line of its own, and even
put each input field (together with its label) on a line of its own,
for ease of use and for accessibility. In fact, the default line break and
"empty line" are _insufficient_ for distinguishing a form from other content
on a page. Consider using something like
form { background: #ffe;
color: #efe;
padding: 0.1em 0.3em;
border: solid thin #ccd; }
Then you can suppress the margin if you like, since the margin is just a very
awkward attempt at achieving some visual separation.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
Navigation:
[Reply to this message]
|