Why does my form drop all words down a line in InternetExplorer?

  • Profile Image
    johnnystephens
    Asked on July 20, 2011 at 09:31 AM

    on my mac it looks fine but on windows PCs the form questions are split into words of differant lines and the send button is just floating in the middle... help me???

  • Profile Image
    NeilVicente
    Answered on July 20, 2011 at 12:21 PM

    Hi Johnny,

    I viewed your form on a PC using different browsers (IE, Firefox, Chrome, Safari) and these are what I got:

    IE/Firefox

     

    Safari/Chrome

     

    Are these the same as what you're seeing on your Mac and PC?

    Your send button is shrunk that's why it is placed beside the file upload field in your form. You would need to expand it so that it takes a whole line for itself. Right-click on it then click Expand.

     

    The issue about words being split (How we can help you:) was caused by differences within the browsers. To remedy this, you would need to increase the width of the box that holds the label.

    Inject this custom css code onto your form:

    .form-label-left {
        width: 150px !important;
    }

    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea


     

    Hope these solutions help. Let us know if there's anything else you require assistance with. Thanks!


    Neil

  • Profile Image
    johnnystephens
    Answered on July 21, 2011 at 12:31 PM

    Hiya, Thanks for your quick response however this a screenshot of what i see on a windows comupter...

    Hope you can still help??..

    Thanks, Johnny.

    http://www.johnnysphotography.com/Transfer/Walkthroughview%20form-1.jpg

  • Profile Image
    NeilVicente
    Answered on July 21, 2011 at 12:41 PM

    Johnny,

    What browser are you using? Does viewing the direct link to your form produce the same result? Please try using a different browser such as Google Chrome or Mozilla Firefox and let us know if the problem occurs across all browsers.

    We'll be waiting for your response. Thanks!


    Neil

  • Profile Image
    johnnystephens
    Answered on July 21, 2011 at 12:59 PM

    Hi,

    As far as i know it only occurs on internet explorer... on my mac using firefox & safari it apears fine...

    Thanks,

    Johnny

  • Profile Image
    NeilVicente
    Answered on July 21, 2011 at 02:01 PM

    I just found out now that this problem is exclusive to IE 7, that is why I couldn't replicate it. Take a look at this clone of your form and see if there's any difference.

    I removed the old "Send" button and replaced it with a new one. Placed it on a new line after the upload file field. Shrinking the "Send" button will result to being displayed on the center of the page (on IE 7) so I did not shrink it.

    As for the labels being cut off, just set each of them to align to top:

    I know that the clone I modified still has a few problems, such as the E-mail and Phone Number labels being cut off. I've been trying to find a way but I couldn't fix them. I'll be experimenting on it and I will update you soon as I find a solution.


    Neil