Field Alignment Issues in Internet Explorer 7

  • Profile Image
    GoWallpaper
    Asked on August 19, 2011 at 07:14 PM

    please could you tell me why on Mozilla firefox the form lines up perfectly but on IE it does not why is this?

  • Profile Image
    NeilVicente
    Answered on August 20, 2011 at 12:24 AM

    Hi,

    I was able to replicate your problem under IE 7, but not on IE 8 and 9.

     

    A quick fix is to expand the Phone Number field (or all the fields, just to be safe), then set the label to left-align.

     

    Hopefully this works for you as well.


    Regards,
    Neil

  • Profile Image
    allanftd
    Answered on August 20, 2011 at 12:25 AM

    Hi GoWallpaper,

    May we ask which IE version are you using? I did not find any problems with accessing your page using IE. This is what I see from my end:

    This is also how I'm seeing in Firefox and Google Chrome. May we ask you to try again and let us know how it goes?

    Thank you for using JotForm!

    JOTFORM SUPPORT

  • Profile Image
    GoWallpaper
    Answered on August 20, 2011 at 04:13 AM
    Hi,



    Please could you see why it will not show correctly on the iPhone?



    Kind Regards,



    Nigel



    Go Wallpaper Ltd

    Tel: 0844 879 4314

    Email: enquires@gowallpaper.co.uk

    Web: www.gowallpaper.co.uk



  • Profile Image
    NeilVicente
    Answered on August 20, 2011 at 04:16 AM

    Hi Nigel,

    Did you apply the changes I proposed in my solution? I tested it on my end, using IE 7 and below and it worked like a charm. I can't test using the iPhone though as there is no iPhone simulator available but I tested it on Safari and it seems to work fine.


    Neil

  • Profile Image
    abajan
    Answered on August 20, 2011 at 06:17 AM

    Hi Nigel

    Like Neil, I have no iPhone but I was able to find what appears to be a rather good online emulator and when I loaded your site in it (via Safari, as recommended) I got the result shown below:

    Were you referring to the need to scroll horizontally? The only practical way I can think of to eliminate that would be to clone the form and optimize the clone for mobile users by top aligning the labels and reducing the width of the text boxes, text area, drop downs and the form itself. However, for this to work, that version of the form would have to be viewed at it's own URL and not embedded anywhere, which renders this solution useless in your case, unless a link to your site is provided on the form. But then we're back to the original issue of horizontal scrolling unless there's a mobile version of the page.

    Perhaps this video may help in the construction of such a page (I haven't had a chance to view that particular video as yet but CSS Tricks usually has very useful content).

    Hope this helps.


    ~ Wayne