?
Solved

Avoid or prevent a line break after and before a <form> tag.

Posted on 2007-08-01
4
Medium Priority
?
4,890 Views
Last Modified: 2013-11-19
HTML <form> tag

Question:
How to avoid or prevent a line break after and before a <form> tag.

As we all know, after a <form> and </form> tag. A line break <br> is automatically created which causes a white space below the form. How can i prevent or remove the white space.
0
Comment
Question by:w3irdo
  • 2
4 Comments
 
LVL 28

Accepted Solution

by:
TName earned 150 total points
ID: 19612555
Styling the form with margin:0; padding:0;  should get rid of the white space in IE too, e.g.:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<div style="background-color:#ccc;">aaa</div>

<form style="border:1px solid #f00; margin:0; padding:0; "> xxx  </form>

<div style="background-color:#ccc;">bbb</div>
</body>
</html>
0
 

Author Comment

by:w3irdo
ID: 19612624
thanks alot.
It solved my problem of white space.

Question:
But it still goes to the next line this time without any white space. How can i prevent it from going to the next line. I want to place object besides (at the right) of the form.
0
 
LVL 28

Expert Comment

by:TName
ID: 19612976
To get rid of the line breaks, you could float the form, but remember that other elements, e.g. a div before or after the form, might also cause a linebreak, so you might have to float them too.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>

<div style="width:200px; background-color:#ccc; float:left;">aaa</div>

<form style="width:200px; border:1px solid #f00; margin:0; padding:0; float:left;">xxx</form>

<div style="width:200px; background-color:#ccc; float:left;">bbb</div>

</body>
</html>




0
 
LVL 9

Expert Comment

by:oheil
ID: 21169579
Same problem here but another solution using style="display:inline;" :


<form style="margin:0;padding:0;display:inline;" action="some_action.html">
<input style="margin:0;padding:0;display:inline;" type="submit" value="submit">
</form>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question