What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Adding Lightbox code messes-up site lay-out

    Asked by kungo on August 24, 2013 at 02:49 PM

    For some reason, adding the JotForm Lightbox pop-up form code
    to my page causes a graphic to move out of place on the page (on IE 9).

    I have attached a screen shot of what I mean.

    Please advise. Thank you.

    Page URL:
    http://aesyracuse.com/AE/frontpage.htm

    Screenshot
    site JotForm pop-up form move attached
  • Profile Image
    JotForm Support

    Answered by Welvin on August 24, 2013 at 07:41 PM

    Hi,

    Good day! That is probably because of your IE Compatibility Settings. It looks good to my end using IE9 in Windows 7:

    Please add this Meta Date for IE Compatibility to your website. This should help in many cases:

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    Add this codes after your website Title Tags (see screenshot):

    Please let us know for the results.

    Thanks

  • Profile Image

    Answered by kungo on August 24, 2013 at 08:17 PM

    Hi Welvin,

    No, it did not work. Thanks anyway.

    Here is the page, with added code:

    http://aesyracuse.com/AE/frontpage2.htm

    Unfortunately, my client will be using IE 9 to view this page --
    so it will appear off for him as well. 

  • Profile Image
    JotForm Support

    Answered by Tasha on August 24, 2013 at 11:09 PM

    Hi,

    So I was able to identify the problem that you are having. For some reason in IE your Iframe height is 457px while in other browsers the height is 361px.

    In IE

    In Chrome and other browsers

    To fix the issue we need to change the height in IE to be the same as it is for other browsers. I will need to examine your source code before I can propose a solution. I will update this thread after examining your source code. In the mean time if you know how to fix it please proceed and provide an update.

    Thanks!

  • Profile Image

    Answered by kungo on August 25, 2013 at 09:33 AM

    Hello Tasha -- Thank you for your efforrts. I hope there is a solution.

  • Profile Image
    JotForm Support

    Answered by Tasha on August 25, 2013 at 10:30 AM

    The IFrame height that is coming from jotform is set to 457px. Please change the height for the IFrame in your source code to be 361px (changing it to 350px should also work). Give that a try and let us know if that fixes the problem.

    Thanks!

  • Profile Image

    Answered by kungo on August 25, 2013 at 10:44 AM

    Tasha, are you referring to the source code for the form on the page itself, or for the Lightbox pop-up?

     

  • Profile Image
    JotForm Support

    Answered by Tasha on August 25, 2013 at 10:47 AM

    I am referring to the IFrame height for this form http://www.jotform.us/form/31559558392163. You should change the height for the IFrame in your source code. This specific form is not using the lightbox pop-up.

    Thanks!

  • Profile Image

    Answered by kungo on August 25, 2013 at 11:23 AM

    Tasha, I did as I understood your instructions, but it made no difference.
    I changed the JotForm source code on that page ( http://aesyracuse.com/AE/frontpage.htm  )
    replacing  
    457px with 361px, and uploaded edited page.

    Did I misunderstand you?

     

  • Profile Image
    JotForm Support

    Answered by Tasha on August 25, 2013 at 11:38 AM

    Try adding !important to the height as well. So the height attribute would like this

    height: 361px !important;

    Also please clear your browser cache before viewing the page again. Let us know how it goes!

  • Profile Image

    Answered by kungo on August 25, 2013 at 08:04 PM

    Again thank you for trying Tasha -- but it is not working.
    For some reason, after I cleared th cache, it did work -- but then when
    I refreshed the screen, it happened again!
    http://aesyracuse.com/AE/frontpage.htm 

    I want to make sure I was clear about what the problem is. This only happened when I
    added the code for the lightbox pop-up. It is fine if I don't add the lightbox code. 

     

  • Profile Image
    JotForm Support

    Answered by jonathan on August 25, 2013 at 08:40 PM

    Hi,

    This is the view on my end when using IE9 when browsing this page http://aesyracuse.com/AE/frontpage.htm

     

     

    Is this the correct view that you need? I think it is working already as is.

    Perhaps you also need to clear your browser cache to see a fresher page.

    Thanks.

  • Profile Image

    Answered by kungo on August 25, 2013 at 08:57 PM

    Jonathan, I did clear my cache. In fact, I just did it again, to make sure.

    On my end, it looks like this:

    I am using IE 9.0.9, in case that has any significance.

  • Profile Image
    JotForm Support

    Answered by Goldo on August 25, 2013 at 09:10 PM

    It's working to me as well and I'm using IE10. I've tried it using 2 different machines and same result. Have you tried using a different computer, kungo? I have cleared your form cache.

  • Profile Image

    Answered by kungo on August 25, 2013 at 10:33 PM

    Goldo, IE 10 and IE 9 can show signifantly different versions of a website.
    I have no other machine at present to test it. 


    My main concern is the fact that my client (who will view the website tomorrow)
    also has the same version of IE 9 as I'm using (of course).
    Hopefully, the same issue won't show for him -- but I'd really rather not take that chance.

    It would appear there is no solution for this. Thank you (and the others) for all your efforts.



  • Profile Image
    JotForm Support

    Answered by Welvin on August 26, 2013 at 04:10 AM

    Hi,

    The codes that I have provided should work, you can see that when you search IE Compatibility. I can see that your closing </head> tag is missing. Please add it just before the <body> tag of your website.

    Also change your Doctype Declaration to this one:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    This should prevent your page from viewed using IE Quicks Mode and force to view it using IE Latest Versions.

     

    My main concern is the fact that my client (who will view the website tomorrow) also has the same version of IE 9 as I'm using (of course). Hopefully, the same issue won't show for him -- but I'd really rather not take that chance.

    -Most IE installed (if settings isn't modified) should run with compatibility settings. I'm hoping that your user/customer will see the right formatting. Anyway, they can still click the button.

     

    Thanks

  • Profile Image

    Answered by kungo on August 26, 2013 at 08:51 AM

    Hello Welvin -- I did as you suggestetd, and it appeared to work -- at first.

    I made your changes, cleared the cache, refreshed screen, and it was fixed. I then refreshed the screen a 2nd time -- still fine. But on the 3rd attempt, the thing broke again!

    If the above provides any clues, please let me know. 

    This appears to be a very strange problem -- and one I hope is only happening on
    my browser and system.


    Thanks again very much for your efforts!! 

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on August 26, 2013 at 09:41 AM

    I'm sorry. Please move the closing </head> tag just before this line: <body style="background-color:#f6f6f6">

    And please add the Meta Tags for IE compatibility. I don't see it to your original page (http://aesyracuse.com/AE/frontpage.htm). This is where you've made the changes, right?

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    After this, everything should be fixed and would be alright to your users end. I've check your website and the button work well without the need to change anything to IE settings. You will see from the screenshot below, the Document Mode has never been change to IE9:

    Thanks

  • Profile Image

    Answered by kungo on August 26, 2013 at 10:25 AM

    Welvin, the same thing happened. I make changes, clear cache, refresh screen:

    it looks fixed. But when I refresh screen 1 or 2 more times, it's broken again. 

    I added:

    </head> tag just before this line: <body style/>...

    and

    2.  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    to meta tags

    And yes, I am editing http://aesyracuse.com/AE/frontpage.htm

  • Profile Image
    JotForm Support

    Answered by Welvin on August 26, 2013 at 12:26 PM

    Hi,

    You now have it correctly, but I'm not sure why that isn't working for you. I have it here in Internet Explorer 9 without any issues and have seen your desired output without adjusting any settings from IE. I've cleared IE Cache as well, still the same correct and desired output.

    Lets try one more step. Change your Doctype Declaration to this one:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    See if this makes a difference.

    But I can assure you that your site visitor will see the same as mine. I've tried using a different computer but has the same correct output, tried it using another friends computer and can see the same desired output. So with my colleague: http://www.screencast.com/t/6adaY8Xsl

    Thanks

  • Profile Image

    Answered by kungo on August 26, 2013 at 05:57 PM

    Hi Welvin -- The client already approved the website, so all must be well.

    Thanks again for your (and the others) continued efforts on this issue.
    Sorry it was such a pain. 

  • Profile Image
    JotForm Support

    Answered by Tasha on August 26, 2013 at 06:30 PM

    Thanks for letting us know that your changes were approved. Please feel free to contact us again in the future if you have any further issues.

    Thanks!