jonfoster
Member
Hi,
I'm struggling to sort the alignment of checkboxes and radio buttons on a form in IE7. I've tried changing stuff in the CSS but can't for the life of me find what's causing the problems.
The form is here - http://www.isbham.org/contact-us/
Or if you don't have access to IE8 - heres a screenshot - http://communiq.co.uk/files/Picture1.png
Would appreciate any ideas!
Thanks
Jon
Do the fields display properly in your form preview? I haven't seen this issue in some time and I'm assuming it's a style/inheritance issue from your theme.
jonfoster
Member
Thanks Kevin - I'll check the form preview when I have access to IE7 later on.
The only CSS thats being used that doesn't start with gform or gfield is list-style: none; - which I'm kind of presuming won't make a difference...
Jon
Hi Jon, it looks like you have maintenance mode or something similar set for your site, so I can't see what theme you are using, or test this fix myself. Take a look at this thread:
Is there something similar in your theme that would affect your checkbox and radio button alignment?
jonfoster
Member
Hi Chris,
Have just give the stuff in that post a try and still no joy!
Any chance you can take a look? Happy for you to log-in to site with user: gf pass: na56JE&ubraD
Also - it displays fine in preview mode, so guessing it's something in the theme I'm not seeing.
Thanks
Jon
I'll take a peek at it. Is the problem in IE7, IE8 or both? Thanks
Jon, in IE8 on Windows XP I am getting a JavaScript error now and cannot see the form. Here's the screenshot:
http://minus.com/meplSvS
Here's the JavaScript error:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 21 Jul 2011 16:53:12 UTCMessage: 'FrontEndEditor' is undefined
Line: 8
Char: 3
Code: 0
URI: http://www.isbham.org/wp-content/plugins/front-end-editor/aloha-plugins/wpSaveCancel/plugin.js?ver=0.9.3
Jon, try adding this to the end of your style.css after all the other Gravity Forms CSS:
[css]
body .gform_wrapper .gfield_checkbox li input, .gform_wrapper .gfield_radio li input{
display:block;
float:left;
clear:left;
padding:0;
margin:0;
height:1.6em;
}
body .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label{
float:left;
padding:0;
margin:0;
margin-left: 10px;
}I'm not certain what is causing this checkbox and radio button alignment issue (Google returns lots of conflicting solutions) but this worked for me in IE and did not adversely affect Chrome or Firefox. Please test it out and let me know how it works for you.
Thanks.
Glad that worked out for you. Let us know if you need anything else.