Form cuts off the bottom section

  • Profile Image
    Tinysumo
    Asked on October 30, 2012 at 08:31 PM

    Hi,

    This form renders ok in all browsers except Firefox (where it cuts off the bottom section)?

    http://www.katherinecowan.co.uk/contact.php

    Any ideas?

    Thanks!

  • Profile Image
    liyam
    Answered on October 30, 2012 at 09:44 PM

    Hello Tinysumo.  On your contact.css file, you have an ID there called formxmedia.  Can you add this property with value there:

    height: 575px;

    Please let us know if you need further assistance.

  • Profile Image
    Tinysumo
    Answered on January 14, 2013 at 04:46 PM
    Hi,
    Sorry - I can't seem to find the ID "formxmedia" in the CSS (show below) -
    maybe i'm missing something?
    /*--red border on error--*/
    .form-validation-error {
    border: 1px solid #FFB0B0 !important;
    }/*---form textbox styles fixed---*/
    .form-textarea, .form-textbox {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 4px;
    background:transparent !important;
    width: 390px !important;
    max-width: 390px !important;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    border: 1px solid #AEAEAE;
    color: #333;
    font-family:verdana !important;
    }/*--form all styles--*/
    .form-all{
    background:url('
    https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png')
    no-repeat;
    float:left;
    padding-left: 54px;
    padding-top: 0px !important;
    width: 480px;
    height: 578px;
    }/*---remove error message---*/
    .form-error-message {display: none !important;}
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    /*---button error move down---*/
    .form-button-error {
    display: block !important;
    }/*---submit button move--*/
    .form-submit-button{
    margin-top:0px !important;
    cursor: pointer;
    }#id_6{
    text-align: center !important;
    font-weight: bold !important;
    font-size: 25px !important;
    color: #3e83a5 !important;
    margin-right: 39px !important;
    font-family: arial !important;
    padding:0px !important;
    }
    #text_6{
    margin-right: 20px;
    padding-top: 10px;
    }
    .form-buttons-wrapper{
    margin-right: 60px;
    }.form-textarea:focus, .form-textbox:focus{
    outline:none !important;
    }/*--fix textarea height--*/
    #input_4{
    height: 95px !important;
    max-height: 95px !important;
    }/*--fix captcha--*/.form-captcha .form-textbox{
    width:130px !important;
    }
    *www.tinysumo.co.uk
    *
  • Profile Image
    Mike_T
    Answered on January 14, 2013 at 06:17 PM

    Here is the path to the CSS file on your website:

    http://www.katherinecowan.co.uk/contact.css

    #formxmedia {
    margin-bottom: 32px;
    margin-top: 39px;
    margin-right: 0px;
    margin-left: 57px;
    position: relative;
    left: 0px;
    top: 0px;
    width: 573px;
    height: 575px;    /* Added */
    }

    Please check it out, and let us know if you need any further assistance.

  • Profile Image
    EduardoMendez
    Answered on January 14, 2013 at 06:37 PM

    Hi there, 

    I have tested the following CSS and it works well on Firefox.  You are welcome to give it a try in stead of the one you currently have:

    /*--red border on error--*/

    .form-validation-error {

    border: 1px solid #FFB0B0 !important;

    }/*---form textbox styles fixed---*/

    .form-textarea, .form-textbox {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    border-radius: 2px;

    padding: 4px;

    background:transparent !important;

    width: 390px !important;

    max-width: 390px !important;

    -webkit-appearance: none;

    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);

    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);

    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);

    border: 1px solid #AEAEAE;

    color: #333;

    font-family:verdana !important;

    }/*--form all styles--*/

    html { background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png) no-repeat; float:left;}

    .form-all{

    float:left;

    padding-left: 54px;

    padding-top: 0px;

    width: 480px;

    height: 578px;}/*---remove error message---*/

    .form-error-message {display: none !important;}

    .form-line-error {

    background:none repeat scroll 0 0;

    }/*---button error move down---*/

    .form-button-error {

    display: block !important;

    }/*---submit button move--*/

    .form-submit-button{

    margin-top:0px !important;

    cursor: pointer;

    }#id_6{

    text-align: center !important;

    font-weight: bold !important;

    font-size: 25px !important;

    color: #3e83a5 !important;

    margin-right: 39px !important;

    font-family: arial !important;

    padding:0px !important;

    }

    #text_6{

    margin-right: 20px;

    padding-top: 10px;

    }

    .form-buttons-wrapper{

    margin-right: 60px;

    }.form-textarea:focus, .form-textbox:focus{

    outline:none !important;

    }/*--fix textarea height--*/

    #input_4{

    height: 95px !important;

    max-height: 95px !important;

    }/*--fix captcha--*/.form-captcha .form-textbox{

    width:130px !important;

    }

  • Profile Image
    EduardoMendez
    Answered on January 14, 2013 at 06:40 PM

    Also, it seems that the stand alone form works fine.  Can you please try embedding the form using the iFrame method?  That will ensure there are no conflicts between the scripts on your page.  Here is a guide for that:

    http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code