Cross Browser Formatting Issues « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

bwalklet
Member

It seems that I can't get my form right across browsers.

http://www.searchandperch.com/sportstrong/spring-league-registration/

There are 2 main issues:

-The submit button is only where it's supposed to be (below the consent checkbox) in Chrome and Safari. Firefox and IE it is to the far right. It's currently set to float: center, because floating left moves the button outside of the form container. I'd like it to be below the consent box in all browsers if possible.

-IE 7 and older put the fields in complete disarray. I want it to look as it does in other browsers, and I've already troubleshooted using the following tutorial: http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict

Any ideas on how to resolve these two issues would be appreciated greatly. Thanks!

Posted 12 years ago on Thursday April 12, 2012 | Permalink
Rob Harrell
Member
Man, your theme is pulling in a lot of generic element CSS, for example:
```
[css]
input {
background: black;
color: black;
cursor: pointer;
float: right;
padding: 4px;
}
```
That float right there is probably causing a majority of your issues. You might want to consider hiring someone to achieve the layout you want. By default Gravity Forms is pretty bulletproof cross-browser in terms of styling. We go to great lengths to ensure that as best we can.
Posted 12 years ago on Thursday April 12, 2012 | Permalink
bwalklet
Member

Nice. Taking that out fixed the button issue.

Now the IE7 issue seems to be the only remaining one. I'll play with some of my custom css to try and fix it.

Using Thesis btw.

Thanks for your help!

Posted 12 years ago on Thursday April 12, 2012 | Permalink
bwalklet
Member

So it looks like the best I could do was make the line with the emails have an extra field...so I added a 3rd email option. This seems to have fixed the alignment issues significantly. So for whatever reason, having a line of fields with the gf_half classes, followed by a line of fields with the gf_third classes resulted in extreme sloppiness in IE7.

Is this a thesis issue? My own CSS customization issues? Or perhaps a GF thing (I trust it is unlikely)?

Posted 12 years ago on Thursday April 12, 2012 | Permalink