I have tested my client’s website in Internet Explorer 7, and the result for the bookings/enquiries form is the ‘Do you require a discount?’ option box is displayed next to the ‘Numbers of Rooms’ text box, this is not supposed to happen. The problem starts at #si_contact_ex_field1_9. My client has seen the form whilst using Internet Explorer 7, and has noticed that the form fields not the labels move down the page from the top. These problems don’t happen in other browsers. The whole website is in WordPress so the form is a part of WordPress. Here is the form: http://www.tommosmotorlodge.com.au/website/bookings-rates/. Could someone please help me with this? Thanks in advance.
This is a screenshot of what I am seeing: http://i44.tinypic.com/2v00k8o.png.
This is a screenshot of what my client is seeing: http://i43.tinypic.com/dhg8h.jpg.
It’s not looking too great over here either, FF7/Linux. http://stommepoes.nl/tommos.png (temp image)
IE7 (and 6 for that matter) has always been pickier about floats fitting in containers than the other browsers. I suggest you give the div known as #col1 an ugly background colour. It appears the whole form is supposed to fit inside that 400px width, which of course isn’t happening with those wide inputs. IE seems to be letting the unbelievably wide inputs overflow outside the box, but when the next float comes around, IE7 can see there’s just no room for it and forces Float Drop. Also, it seems both your client and I have slightly larger fonts than you do in your screenshot, which likely helps things fit on your screen.
The divs wrapping each label and then each input with inline styles is going to be a nightmare anyway. How much would you have to fight WordPress to make that nicer?
Personally I would have only divs wrapping label-input pairs, and have the divs clear floated labels only. This should keep labels and inputs properly lined up, since as you can see they’re mismatching easily right now.
In the meantime, after adding ugly background colour to #col1, see if simply setting col1’s width to the same as the whole white area of the page helps IE7. I would also suggest using the “size” attribute in the HTML on those inputs to guide user input.
I don’t consider this use of “size” to be presentational because of this: if the data you’re expecting is only a few characters, then your input should reflect that. You could also use CSS instead, but since it involves expected data I like the size attribute. Size does not correlate to pixels or characters, so I always go a few characters-worth wider than I need. Safari for example sets size real tight to character-width, and it and Opera will especially do that if you keep that * {margin: 0; padding: 0;} since you’re stripping padding from all inputs.
So where you’re asking for number of people, nobody’s going to be typing a 80-character number in there. Set the size to something sane like 6. This will also affect the wrapping in IE7.
