All other browsers look fine but I am not sure why in IE11 that the little icon proceeding the word “Submit” on this page is overlapping. What do i need to do with the css to make an exception to correct this for IE users?
Many thanks,
Houston
You can blame your browser specific stylesheets and code. Band-aid fixing on good structured code will always fail eventually 
.
In browsers.css you have this IE specific rule.
.gform_wrapper.gf_browser_ie .gform_footer input.button {
padding: 3px;
}
Remove it.
1 Like
I have commented out the code and since I do not have IE11, I used Browserstack.com. I am still seeing the issue. 
Removing that for me in made browserstack fine.
Put in this rule. It’s set to 0px right now.
.gf_browser_ie.gform_wrapper .gform_footer input.button {
padding-left:14px
}
Really hard to debug when that page keeps getting new classes. If that doesn’t work then reset the padding in the first rule I told you, to 14px left padding.
The code is not commented out as far as I can see. Indeed it is there twice in two separate style.css files at line 565.
You seem to be duplicating 2 sets of CSS files!
If I remove the code in IE11’s developer window the submit starts working.
However you may need that code as its seems to be part of some validation plugin so you may be better of targeting the submit directly and giving it the 13px left and right padding it needs.
e.g.
.gform_wrapper.gf_browser_ie .gform_footer input#gform_submit_button_1 {
padding:6px 13px!important;
}
As Ryan said these browser hacks often cause more harm than good.
1 Like
Thank you guys. Much appreciated. It is now working.
I was using a child theme and using some css to override the css in the main theme. I guess with some mistakes.
Many thanks,
Houston
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.