« Interacting with XML and CSV Files Using SQL | Main | TheServerSide Features Talk By Macromedia Software Architect »

May 11, 2003

Git Rid Of Annoying Line Breaks From Form Tags

If you are very particular about your page layouts, the last thing you need are HTML elements like the <form> tag conspiring against you by adding arbitrary line breaks for no apparently reason (at least it seem arbitrary to me -- if anyone knows why the world the form tag behave like this, let me know). The old way to solve the problem was by putting your form tags between table rows or outside of table cells. It doesn't make for particularly well-formed or pretty HTML, but it made the problem go away. But what do you do if you are using cascading style sheet positioning, so you don't have any table tags to sweet extra line breaks under? All you have to do is drop the following line in your stylesheet, and you will never have to worry about it again:

form {margin: 0px 0px 0px 0px; }

Of course, you can also use this technique to add wanted and controlled spacing to your form, as well. The areas that the numbers represent are, in order, top, right, bottom and left.

Posted by cantrell at May 11, 2003 11:33 PM | References

Comments

Damn! it was that easy ...

do you know if this works in all browsers ?

Posted by: GriLLo at May 12, 2003 10:08 AM

I tested it on all browsers that I have handy, which are Mac IE, Safari, Mac Mozilla 1.2.1, Win IE 6.0 and Win Netscape 7.0. That's a pretty comprehensive list, and it works perfectly on them all.

Posted by: Christian Cantrell at May 12, 2003 10:21 AM

Thanks, man. I didn't know the old way. I think I can stop screaming now.

Posted by: dave spencer at June 25, 2003 03:44 PM

Nice one, - this has been bothering me for ages. works a treat.

Posted by: JB at September 15, 2003 06:24 PM

I actually go one further:

form { margin: 0px; padding: 0px; }

This had the best results for me in getting IE and NS4 to look similar... and there's no reason not to add in the padding, just in case..

Posted by: Marc Wallace at October 24, 2003 08:01 PM

I normally use

<span style="display:none"><form method="get" ... ></span>
...
<span style="display:none"></form></span>

It even removes the implicit <br>.
I suspect it is IE stuff though.

Posted by: florian fischer at November 5, 2003 11:07 AM

Court obviously didn't take his medicine today. In any case, thanks for a great tip! It was right in front of my face all along...

Posted by: Alex at February 12, 2004 09:43 AM

You don't need a unit of measure when you're declaring 0 (zero) as the value. { margin: 0; padding: 0;} It doesn't hurt, but it's not needed.

Posted by: Phil Truesdale at November 27, 2004 08:35 PM

Christian Cantell: I love you.

I just spend about an hour messing with the css file wondering why there was some blank space there. Finally I realize that it was the form tag in the html that was causing a line break!! (only in IE, not in mozilla or firefox)

Does somebody in the world knows why the hell a form tag cames with a
as a gift when you render it under IE?????

Your code just fixed the damm thing, and now it works like a charm.

sorry about the language, Im just so mad about the issue, I wasted an hour on it.

Thanks a lot!!

Posted by: Louis at June 9, 2005 03:58 AM

As I read the simple line of code, my screen went white, and bright aura was cast from my monitor. It filled the room and angels descended surrounding me with hope!

I said aloud, "My Lord, make that man a Guinness". But, then, my Microsoft autoText changed it to genius before I could recall my message.

So, I guess you'll have to live with that...

Thanks! Such a simple solution to a head-banging "bug".

-Dave

Posted by: Dave at July 23, 2005 08:29 AM

thanks.. simple solution. it's been giving me grief for quite some time now :)

Posted by: Sohail A. Rahim at March 5, 2006 09:08 AM

ok.. it cleared up most of the extra whitespace, but still left one break in there...

solved it by putting this in my stylesheet...

form {margin: 0px; padding: 0px; display: inline;}

.. alternatively, you could do the following..

<form style="display: inline"><input type....></form>

regards,
Sohail.

Posted by: Sohail A. Rahim at March 5, 2006 09:21 AM