My form looks right on Safari, FireFox, IE 8 and Chrome, but not on IE 7

  • Profile Image
    rshane
    Asked on April 18, 2011 at 06:25 PM

    I have tried everything I could think of to get my simple form to look right on IE 7, but so far, I have failed.  If you could help, I would really appreciate it.  The current version of my form is using an iframe to place the form, but I tried without using an iframe as well.  My problem is that the bottom of the form is cutoff when viewing it on IE 7.  See attached screen shot for an example.  As you will see, I move the "Submit" button to the top of the screen thinking there might be a problem with that.  I was wrong.  

    BTW, I am sorry for the small size of the attached screen shot.  I am dependent on a friend to send them to me because I don't use IE 7 (but many of our customers do!)

  • Profile Image
    abajan
    Answered on April 18, 2011 at 08:42 PM

    Hi rshane

    Initially I thought the cause of the problem might have been the XML prolog (the XML declaration at the top of the page) but after reading this and this, it appears that IE6 rather than IE7 is the version affected by that code. Although I guess it wouldn\'t hurt to remove it and see what happens.

    Perhaps we should peruse this list of 188 IE7 bugs to see if we can spot the culprit. Who\'s up for the challenge?

    Never fear, rshane. I\'m sure someone here either has the solution or can find it fairly quickly.

  • Profile Image
    rshane
    Answered on April 20, 2011 at 04:37 PM

    Hi abajan,

    Thanks for responding.  I hope someone has an idea about how to fix this problem as it's driving me nuts and I need this form to work properly.

    Rich

  • Profile Image
    NeilVicente
    Answered on April 20, 2011 at 05:07 PM

    Hi,

    I have injected this CSS code in your form:

    .form-header {
    font-size: 14px;
    }

    to make your form fit in the iWeb widget that serves as the form's container. Take a look at your form in IE, it should be working fine now.

  • Profile Image
    rshane
    Answered on April 21, 2011 at 09:09 PM

    Hi Neil,

    I see your injected CSS code in the code JotForm created, but it's still not working when I ask someone to review our form in IE 7.  Does the fact that there are two "font-size" commands in there cause a problem?  I have highlighted yours in red and the other one in blue.  Here's a copy of the code just so we can be sure we're talking about the same thing:

     

    <script src="//cdn.jotfor.ms/jotform.jgz?3.1.110" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init(function(){

          $('input_3').hint('ex: myname@example.com');

          $('input_21').slider({ width: '200', maxValue: '100', value: '0'});

       });

    </script>

    <link target="_blank" href="http://cdn.jotfor.ms/jotform.cssgz?3.1.110" rel="nofollow noopener" rel="stylesheet" type="text/css" />

    <style type="text/css">

     

        .form-label{

            width:200px !important;

        }

        .form-label-left{

            width:200px !important;

        }

        .form-line{

            padding:10px;

        }

        .form-label-right{

            width:200px !important;

        }

        .form-all{

            width:800px;

            background:#FFFFFF;

            color:#666666 !important;

            font-family:Helvetica;

            font-size:12px;

        }

        /* Injected CSS Code */

    .form-header {

    font-size: 14px;

    }

        /* Injected CSS Code */

    </style>

     

    <form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_10904240057" id="10904240057" accept-charset="utf-8">

        <input type="hidden" name="formID" value="10904240057" />

        <div class="form-all">

            <ul class="form-section">

                <li id="cid_7" class="form-input-wide">

                    <div class="form-header-group">

                        <h2 id="header_7" class="form-header">

                            Contact information

                        </h2>

                    </div>

                </li>

                <li class="form-line form-line-column" id="id_1">

                    <label class="form-label-top" id="label_1" for="input_1">

                        Full Name<span class="form-required">*</span>

                    </label>

                    <div id="cid_1" class="form-input-wide"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="10" name="q1_fullName1[first]" id="first_1" />

                            <label class="form-sub-label" for="first_1" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q1_fullName1[last]" id="last_1" />

                            <label class="form-sub-label" for="last_1" id="sublabel_last"> Last Name </label></span>

                    </div>

                </li>

                <li class="form-line form-line-column" id="id_18">

                    <label class="form-label-top" id="label_18" for="input_18">

                        Company<span class="form-required">*</span>

                    </label>

                    <div id="cid_18" class="form-input-wide">

                        <input type="text" class="form-textbox validate[required]" id="input_18" name="q18_company18" size="20" />

                    </div>

                </li>

                <li class="form-line form-line-column" id="id_3">

                    <label class="form-label-top" id="label_3" for="input_3">

                        E-mail<span class="form-required">*</span>

                    </label>

                    <div id="cid_3" class="form-input-wide">

                        <input type="email" class="form-textbox validate[required, Email]" id="input_3" name="q3_email3" size="30" />

                    </div>

                </li>

                <li id="cid_4" class="form-input-wide">

                    <div class="form-header-group">

                        <h2 id="header_4" class="form-header">

                            Considering everything you know about Qual-Pro, please tell us how well you feel we performed in the following areas.

                        </h2>

                    </div>

                </li>

                <li class="form-line" id="id_20">

                    <label class="form-label-top" id="label_20" for="input_20"> Six areas... </label>

                    <div id="cid_20" class="form-input-wide">

                        <table summary="" cellpadding="4" cellspacing="0" class="form-matrix-table">

                            <tr>

                                <th style="border:none">

                                    &nbsp;

                                </th>

                                <th class="form-matrix-column-headers" style="width:22%">

                                    Excellent

                                </th>

                                <th class="form-matrix-column-headers" style="width:22%">

                                    Good

                                </th>

                                <th class="form-matrix-column-headers" style="width:22%">

                                    Fair

                                </th>

                                <th class="form-matrix-column-headers" style="width:22%">

                                    Poor

                                </th>

                                <th class="form-matrix-column-headers" style="width:22%">

                                    Terrible

                                </th>

                            </tr>

                            <tr>

                                <th align="left" class="form-matrix-row-headers" nowrap="nowrap">

                                    Quality of work

                                </th>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[0]" value="Excellent" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[0]" value="Good" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[0]" value="Fair" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[0]" value="Poor" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[0]" value="Terrible" />

                                </td>

                            </tr>

                            <tr>

                                <th align="left" class="form-matrix-row-headers" nowrap="nowrap">

                                    Delivery time

                                </th>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[1]" value="Excellent" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[1]" value="Good" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[1]" value="Fair" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[1]" value="Poor" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[1]" value="Terrible" />

                                </td>

                            </tr>

                            <tr>

                                <th align="left" class="form-matrix-row-headers" nowrap="nowrap">

                                    Customer service

                                </th>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[2]" value="Excellent" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[2]" value="Good" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[2]" value="Fair" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[2]" value="Poor" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[2]" value="Terrible" />

                                </td>

                            </tr>

                            <tr>

                                <th align="left" class="form-matrix-row-headers" nowrap="nowrap">

                                    Quote response time

                                </th>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[3]" value="Excellent" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[3]" value="Good" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[3]" value="Fair" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[3]" value="Poor" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[3]" value="Terrible" />

                                </td>

                            </tr>

                            <tr>

                                <th align="left" class="form-matrix-row-headers" nowrap="nowrap">

                                    Overall responsiveness

                                </th>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[4]" value="Excellent" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[4]" value="Good" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[4]" value="Fair" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[4]" value="Poor" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[4]" value="Terrible" />

                                </td>

                            </tr>

                            <tr>

                                <th align="left" class="form-matrix-row-headers" nowrap="nowrap">

                                    Value for price

                                </th>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[5]" value="Excellent" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[5]" value="Good" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[5]" value="Fair" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[5]" value="Poor" />

                                </td>

                                <td align="center" class="form-matrix-values">

                                    <input class="form-radio" type="radio" name="q20_sixAreas[5]" value="Terrible" />

                                </td>

                            </tr>

                        </table>

                    </div>

                </li>

                <li id="cid_19" class="form-input-wide">

                    <div class="form-header-group">

                        <h2 id="header_19" class="form-header">

                            How likely are you to recommend us to someone seeking electronic manufacturing services in the future?

                        </h2>

                    </div>

                </li>

                <li class="form-line form-line-column" id="id_21">

                    <label class="form-label-top" id="label_21" for="input_21"> 0 = Definitely not --- 100 = Definitely would </label>

                    <div id="cid_21" class="form-input-wide">

                        <input type="range" class="form-textbox" id="input_21" name="q21_021" />

                    </div>

                </li>

                <li id="cid_23" class="form-input-wide">

                    <div class="form-header-group">

                        <h2 id="header_23" class="form-header">

                            If you don't mind, please share with us any comments you have regarding our service.

                        </h2>

                    </div>

                </li>

                <li class="form-line form-line-column" id="id_25">

                    <label class="form-label-top" id="label_25" for="input_25"> For example, what three things could we improve upon? Or, what are the most important future requirements you have? </label>

                    <div id="cid_25" class="form-input-wide">

                        <textarea id="input_25" class="form-textarea" name="q25_forExample25" cols="100" rows="6"></textarea>

                    </div>

                </li>

                <li class="form-line" id="id_2">

                    <div id="cid_2" class="form-input-wide">

                        <div style="text-align:center" class="form-buttons-wrapper">

                            <button id="input_2" type="submit" class="form-submit-button">

                                Submit Form

                            </button>

                        </div>

                    </div>

                </li>

                <li style="display:none">

                    Should be Empty:

                    <input type="text" name="website" value="" />

                </li>

            </ul>

        </div>

        <input type="hidden" id="simple_spc" name="simple_spc" value="10904240057" />

        <script type="text/javascript">

            document.getElementById("si" + "mple" + "_spc").value = "10904240057-10904240057";

        </script>

    </form>

     

    Thank you for taking the time to think about this.

    Rich

  • Profile Image
    abajan
    Answered on April 21, 2011 at 10:51 PM

    Hi Rich

    If my memory serves me correctly, the cascade order places precedence on the code that comes lower in the stylesheet. In other words, since Neil's rule set follows the other one, it should override what was there before. So, I don\'t think that should cause any problems

  • Profile Image
    NeilVicente
    Answered on April 22, 2011 at 03:11 AM

    Hi,

    It looks like you have made some changes to your form as it does not appear correctly on my end now, even in Firefox.

    I am not too familiar with iWeb since I am using a Windows computer, but is there any way you can change Widget 1's height from 685px to 750px?

    Also, you may want to adjust that widget's height whenever you make changes to your form so that it will fit in perfectly.

    Let me know how this solution works for you. We'll await your reply.

    Regards

  • Profile Image
    rshane
    Answered on April 23, 2011 at 02:53 PM

    Hi Neil,

    I could not get it to work properly, nor could I find a way to increase the height of the HTML widget.  iWeb allows me to resize the box in which the HTML widget is placed, but that did not make a difference when the page was rendered in the various browsers on which I tried it.  

    As a work-around, I added an additional field after the submit form button.  I *think* that causes the proper behavior, but it is not a fix.

    Thank you again for taking the time to think about this problem.  I really appreciate it.

    Rich

  • Profile Image
    NeilVicente
    Answered on April 23, 2011 at 05:22 PM

    Rich,

    I still see your iWeb widget having the same height as before:

    <div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 664px; left: 0px; opacity: 1.00; position: absolute; top: 129px; width: 869px; z-index: 1; ">


    If there is any way to adjust the height to something like 750px or so, please do. I tried doing that on my end and it worked perfectly. See screenshot below:



    Send us an update regarding this issue. Thank you. I'll wait your reply.

    Regards


  • Profile Image
    rshane
    Answered on April 26, 2011 at 08:34 PM

    Hi Neil,

    Well I gave up and just created a new form which works fine.  I don't know why I could not get this one to work. Thank you very much for the time you invested in trying to help me get it right.  Unfortunately, all my efforts to adjust the height of this widget in iWeb did not work.  It is a WYSIWYG editor, so it's pretty straightforward, but it did not work for me.  The new form, which is identical as far as I am concerned, does work however.

    Sincerely,

    Rich

  • Profile Image
    mliz
    Answered on April 27, 2011 at 10:54 AM

    Hi Rshane,

    It's good to know that the new form worked without any problems. Strange
    that the other form did not work out. So far from what I have seen from other
    iweb users increasing the widget height would usually resolve the issue with
    the cut off display on selected browsers.

    Thank you for using JotForm.

    Regards,
    Mliz