Format Problem in IE8 but not Firefox

  • Profile Image
    alpacas
    Asked on February 12, 2012 at 08:53 AM

    I have developed an order form. I use Firefox by default and it formatted and displayed properly in Firefox. Initially I embedded the source code into my web page after editing by hand to add a Javascript to open the Terms and Conditions in a pop-up, as the Jotform HTML free text field does not allow Javascript.

    My site is hosted on Moonfruit and I embed using their HTML widget. As noted above the form formats properly on Firefox, but when I tested in IE8 the drop down boxes for the hats, scarves, gloves and mittens entries moved out of position. Also, the two text areas for address and comments have changed position. I have used some CSS code to hide item labels and to set checkbox widths as 170px to get the drop-down boxes to align under each other, all using and adapting example codes on this forum.

    I was able to work around the formatting problem by embedding the form in an IFrame, which seemed to resolve the problem in IE but this stopped me being able to edit the source code to add the Javascript for the Terms and Conditions pop-up. I needed a workaround using a separate text box with link below the Jotform form area (coded in Moonfruit) for this.

    Can you advise why the drop down boxes move in IE but not in Firefox. Is there anything I can do to fix their positions yet which will still allow me to use edited source code rather than the straight Jotform code in an IFrame? I will raise a separate question about the possibility of editing source code before saving to an IFrame.

  • Profile Image
    alpacas
    Answered on February 12, 2012 at 09:02 AM

    To clarify, the screen shot above is how it looks in IE 8. It should look like this page

    http://www.stonebriggs.co.uk/#/order-form/4560255466

  • Profile Image
    NeilVicente
    Answered on February 12, 2012 at 12:26 PM

    When you use source codes to embed a form, you are essentially making it a part of your page, exposing it to your site's scripts and CSS files.

    In short, this cross-browser problem is caused by your site's styling. You'd have to make changes to your site's CSS in order to fix this.

    Or, you can just create a blank page hosted in your site and insert the form's source codes on it (together with these basic html codes). Then, use iFrame tags to embed that page in your site.

    With this solution, you'll hit two birds with one stone - the form is shielded from your site's scripts and css styling and you'll be able to customize the source codes with all your heart's desire.