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.
Probably best to get it looking right in FF (using the HTML Validator), if that doesn't work try: http://css-tricks.com/creating-a-unique-contact-for/
I just made a tropical form for a sub-sub-partner company (or whatever the hell it is): http://stommepoes.nl/Homeselling/SHL/abonnement.html The background image is on the form itself. The label-input pairs are sitting in divs, which are set to display: table (I used to just float them but then if we used Javascript to hide some fields until necessary, IE spit out the duplicate content bug... display: table will wrap the floated labels, and if the divs have Haslayout triggered (I used width) then they will also wrap floats as IE does that, the buggy bastard). Labels floated left and given a width in em (as is the whole form, very important). Inputs are not set width, so that does vary between browsers, but not by much, and I have plenty of room. Borders set on inputs looked great in FF. Too bad IE stuck padding and borders also on the radios and checkboxes. Opera set them on the checkboxes alone. Thus, I currently have a trasnparent-coloured checkbox in Opera. But it doesn't bother me as much as the extra code I needed to stop it. I was looking at some other forms here before making this one (the CSS is crappy, but only so that you can easily see the differences... do NOT copy it totally, it's bloated): http://www.designmeltdown.com/chapters/Forms/ Esp page 2. I got started in correct form building (and how to get around some browser issues) from Tyssen's page: http://www.tyssendesign.com.au/articles/css/legends-of-style-revised/ I'm embarassed by the awful code now, but I also did a funky trick for a submit button on a pizza site once... can also make a form have a little extra oomph! : http://stommepoes.nl/Pizzaatje/invoeren.html