PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Cross Browser Formatting Issues

  1. 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 7 years ago on Thursday April 12, 2012 | Permalink
  2. 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 7 years ago on Thursday April 12, 2012 | Permalink
  3. 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 7 years ago on Thursday April 12, 2012 | Permalink
  4. 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 7 years ago on Thursday April 12, 2012 | Permalink