How can I make a good-looking form?

Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn't believe it.

To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties.

In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well.

Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don't want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design?

BTW, my website is www.tryarg.com/WorldCup if you want to take a look at the form at the bottom to see what I am talking about.

What you need to accomplish is doable with css but not the way you were doing it. you can style the form, inputs etc all separately with css and even specify the width, height, background of those elements as well.

It breaks in Firefox 3 as well.

In your case I would set the form in a div with 1 div for the top corners, one div for the fill and one div for the bottom corners. Make an image of each form label and insert that image in column one with text-align:right; on it then the corresponding input in column two etc etc. I am assuming you have enough experience to figure this out from here. or since it is a form use a table if you want, judging by what you have and the fact it is a form that should be fine.

__________________