- kungoAsked 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:
- JotForm SupportWelvinAnswered on August 24, 2013 at 07:41 PM
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.
- kungoAnswered on August 24, 2013 at 08:17 PM
No, it did not work. Thanks anyway.
Here is the page, with added code:
Unfortunately, my client will be using IE 9 to view this page --
so it will appear off for him as well.
- JotForm SupportTashaAnswered on August 24, 2013 at 11:09 PM
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 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.
- kungoAnswered on August 25, 2013 at 09:33 AM
Hello Tasha -- Thank you for your efforrts. I hope there is a solution.
- JotForm SupportTashaAnswered 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.
- kungoAnswered 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?
- JotForm SupportTashaAnswered 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.
- kungoAnswered 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?
- JotForm SupportTashaAnswered 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!
- kungoAnswered 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!
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.
- JotForm SupportjonathanAnswered on August 25, 2013 at 08:40 PM
- kungoAnswered 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.
- JotForm SupportGoldoAnswered 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.
- kungoAnswered 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.
- JotForm SupportWelvinAnswered on August 26, 2013 at 04:10 AM
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.
- kungoAnswered 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!!
- JotForm SupportWelvinAnswered 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:
- kungoAnswered 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.
</head> tag just before this line: <body style/>...
2. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
to meta tags
And yes, I am editing http://aesyracuse.com/AE/frontpage.htm
- JotForm SupportWelvinAnswered on August 26, 2013 at 12:26 PM
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
- kungoAnswered 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.
- JotForm SupportTashaAnswered 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.