How do I layout a form that will look the same in all major browsers

Hi

I have a form with -

13 text input fields
1 text area
2 radio buttons
4 buttons
1 check box
1 submit button
1 reset button,

each field is enclosed in div tags and each field has label text enclosed in span tags, for which I have created ids
and classes (I don't have a great deal of experience with CSS).

I made the form (web page) testing in IE7 which I eventually managed to get looking good,
but when I looked at it in Firefox everything was distorted.
I then duplicated the page and the ids and classes and tweaked everything to get it to look good in Firefox.
I then looked at both the IE7 and Firefox pages in IE6 and once again both pages were very distorted.
So I duplicated the Firefox page and the ids and classes (because it was the best looking of the two) and tweaked
it to get it looking good in IE6.

I originally posted this thread to the Javascript forum for advice on browser redirection so that I could load the
appropriate page in the appropriate browser.

I was subsequently advised to post the thread to the HTML/CSS forum in the hope of possible Hacks for IE being suggested,
meaning I will have one cross browser webpage (with a form) rather than three separate pages.

(I also found out from my previous posting not to do initial testing in IE7)

Any advice would be appreciated!

Regads Max

re: How do I layout a form that will look the same in all major browsers

Here is a nice article called Accessible, stylish form layout. There are example forms you can view as well. I would also suggest this article as well.

Hope that helps.

--Kevin

re: How do I layout a form that will look the same in all major browsers

Hi

Thanks for the links.
I now have a better understanding of cross browser CSS form layout!

Regards Max