svogt
July 19, 2012 at 10:18 am
Tags: cross browser compatibility, empty text node, IE, internet explorer V8, unnecessary whitespace
I have been testing for cross browser compatibility, and formidable pro works great on all browsers I tested EXCEPT internet explorer v8. I must include v8 because a significant number of my users still have it, otherwise I would just drop it. The forms look great except for in IE V8. The form fields have extra space between them due to an “empty text node” (as seen when browsing with their developer tools.
Any ideas how I can fix this problem?
July 19, 2012 at 11:19 am
Can you provide a link to your form so I can take a closer look? IE is always a pain (as I am sure you know). But I am happy to take a look and see what I can find.
July 19, 2012 at 12:35 pm
Go to clipperband.org/enrollment-form click the "add new student" button. That form has extra white space between the rows.
The enrollment form will require you to log in. Use marc test4321
If you check it out with the IE developer tools, it works great in IE9, but when you change to ie8 browser mode with ie8 document standard there is extra whitespace between the rows. If you click the arrow to "inspect" the form fields go to "address 1" and click on it the html is displayed in the window on the lower left. For the div containing the label and the input field, you will see:
<div class="frm_form_field form-field frm_required_field frm_top_container frm_full" id="frm_field_389_container">
<label...>
<input...>
text - empty text node ***This is the culprit I believe
It looks great in every other browser and in iE9 it is acceptable. (I don't even want to mention ie7, I am not supporting that) I would drop ie8 if I could but I have too many users who still use it.
Any ideas?
Thanks.
July 19, 2012 at 12:48 pm
There is some code in your theme's style.css file that is behind this. Line 664 has some bottom margin on all input fields...The other browsers are ignoring this. I would go ahead and delete or comment out that margin: 0 0 24px 0; found on that line to resolve the issue.
July 19, 2012 at 1:00 pm
It worked!!! I am doing the happy dance! Now it looks good every where we need it to look good.
Topic closed.