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.

Weird CSS Issue Where Footer DIV is Rendering Mid-Form

  1. Hi,

    I have a weird issue on a multiple page form were the Gravity Form's Footer DIV (.gform_page_footer) is showing above/before and seemingly behind fields with condition logic and/or Ready Classes applied.

    As you use answer questions at the end of the form and initiate the conditional logic, the submit button gets moved down...however the footer DIV seems to remain stuck on the middle of the form.

    Seems like a CSS issue, any help would be greatly appreciated (after the holiday of course :) ).

    Thanks!

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  2. That URL returns a 404. Can you please post a working URL?

    Usually when a div floats up or down like that, it's due to invalid HTML somewhere in the page. If you used any HTML blocks in the form, that would be the first thing to check. You can also try validating your page at the W3C. That will help pinpoint any errors which will affect your layout.

    http://validator.w3.org/

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  3. Yep sorry about that. The client is currently working through some trouble DNS issues.

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  4. I see some weirdness in the HTML in this section:

    [html]
    <ul id='gform_fields_3' class='gform_fields top_label description_below'><li id='field_3_97' class='gfield      gfield_html gfield_html_formatted gfield_no_follows_desc' ><p style="font-size: small;">Please fill out this form to apply.</span>
    </p>
    <p style="font-size: small;">I understand that by filling out the PuroClean Employment Application I authorize the PuroClean Human Resources department to thoroughly investigate all statements contained in my application and resume (unless otherwise noted) and I hereby state the information given by me is true and complete to the best of my knowledge. I understand that any false statement or misrepresentation on this application is sufficient cause for refusal to hire or dismissal if I have been employed.</span></p>
    <p style="font-size: small;">I understand that PuroClean conducts employment physical examinations and drug testing and all job offers are contingent upon the results of such tests.</span></p>
    <p style="font-size: small;">I further understand that I will be required to sign this application if I am selected for an interview.</span></p>
    <p style="font-size: small;">PuroClean is an Equal Opportunity Employer.</span></p>

    You're closing spans which don't exist. Please make sure the HTML you add to the form is valid. I think that will take care of it.

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  5. Good catch. However after fixing those the issue is still occurring.

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  6. I'm not exactly why it's happening, but you can add this to your theme's stylesheet (or wherever your theme provider suggests adding custom CSS):

    [css]
    .gform_wrapper div.gform_page_footer {
        clear:both;
    }

    That should move the footer back down into position. After you do that, take a look at how the Add This block moves. I think that plugin is related to your problem.

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  7. That did the trick! Thanks!

    Posted 12 years ago on Monday September 3, 2012 | Permalink
  8. You're welcome.

    Posted 12 years ago on Monday September 3, 2012 | Permalink

This topic has been resolved and has been closed to new replies.