Summersault Weblog

If you've ever designed a website with a form and needed to fit that form within a tight area you've run into this problem. When a form tag is rendered in a browser there is extra space adding above (and sometimes below) the tag. Up until this point I've worked around this problem by putting the form tag outside of some table <td> tags. However, this isn't valid XHTML. I found a much better solution.

Cascading Style Sheets (CSS) can be used to achieve some amazing results with the smallest amount of work, and this problem can be added to the list of issues solved by using CSS. There are two ways to fix this issue with CSS, by using "inline" CSS, or by defining the style in an a CSS file. I'll give you examples of both.

Inline CSS
Inline CSS is a quick and easy way to implement a style. It's generally a good idea if you're creating a style that will only be used in one place or if you're making an exception to a style (e.g. you want one sentence in a paragraph to be red and bold and don't want to use font tags). The syntax is very simple and makes use of the "style" attribute, which is useable in most any HTML tag. It looks like this:

The contents of the "style" attribute are all CSS code and will render when you view the page in the browser.

Adding the style definition to an existing CSS file
If you already have a CSS, you can insert the line below and all of the pages on your site that reference this style sheet will automatically remove any space from above and below form tags.

That's it! Now, that didn't hurt too bad did it?

There are many different CSS attributes that you can add into this area, but I won't cover them here. If you'd like more information on CSS, here's a good site to check out.

This entry was posted on Wednesday, February 23rd, 2005 at 9:02 am and is filed under Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.