End Form Element Layout Issues With CSS

Raven

End Form Element Layout Issues With CSS

Seasoned web designers are all too familiar with form element margins. More often than not, the form element will break the layout on one of the major browsers, because of how the browser handles the default margins of that element. A common fix for handling the strange margin problems that occur is to move the form elements around in the HTML until the layout renders correctly.

Fortunately, CSS provides an extremely simple solution to the rogue margins of form elements. If you set the form element’s margin to zero in CSS, margins will no longer be an issue.

form { margin:0; }

It’s an easy fix to an ongoing and annoying problem in web design.

Related Posts Plugin for WordPress, Blogger...

Tell us what you think

4 Responses to “End Form Element Layout Issues With CSS”

  1. Jon Henshaw says:

    Todd, I recently noticed that approach on A List Apart‘s base CSS. Seems like a smart way to start. Thanks for the tip!

  2. Todd Levy says:

    If you really want to start at the top, begin your stylesheet with a universal selector…

    * {margin:0;padding:0;}

    …which will reset margins and padding on all elements.

    Hope someone finds this helpful.

    TL
    http://xboxradar.com

  3. Jon Henshaw says:

    Jim, that’s right. I actually wrote a post about that a little while ago.

    http://www.sitening.com/blog/2005/10/17/apply-css-styles-without-creating-ids-and-classes/

    I isolated the form element, because most people don’t know or remember that the form element can have properties, and can be controlled just like any other element.

  4. JimM says:

    Your solution also works very well with and elements as well. It just requires 1 more declaration. ul,ol {margin:0; padding:0;}

    It is great when the best solutions are the simplest.

    Jim

Leave a Reply

You must be logged in to post a comment.