Always I am facing alignment problem when I place form elements with or without table . Is there any solution to fix without using any hacks?
There is no need for hacks, but it does take some CSS knowledge if you are not using a table for positioning. If a table is screwing the form up visually, you are likely doing something wrong code-wise (and generally I wouldn't put a form in a table anyway). A form should generally look like this (the full accessible version): HTML4 pseudocode version: <form action="something" method="something"> <a block element, either fieldset or a div> <if fieldset, legend here> <optional wrapping element here> <label for="inputid1">Label 1: </label> <input type="text" name="something" id="inputid1"> </closing optional wrapping element> <optional wrapping element> <label for="inputid2">Label 2: </label> <input type="text" name="something" id="inputid2"> </closing optional wrapping element> <continue as needed...> </closing block element, either /fieldset or /div> </form> Code (markup): If done in XHTML, legend is required if fieldset is used. This means it can't be empty either. You can hide it with something like margin-left: -9999em or something. The ends of the inputs are closed XHTML way: with a space and a / For a traditional form where the labels line up on the left and the inputs are on the right, table-style, give the labels a width (preferably in em, along with the size of the form itself, so text-enlarge doesn't kill it) and float left, while the optional wrapping element (usually a div) clears that float. This keeps the inputs from riding up to the label above them if there's room. Google up "Tyssen Design" and "Legends of Style" for form styling tips.
In my experience, most of the problems I've encountered with form elements are caused by not having the elements reset (remove margins, padding and borders). Browsers tend to render form elements differently and apply their own amount of padding and margins by default.