What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Willy Fresh order online form

    Asked by RedIce on February 21, 2013 at 08:15 PM

    Hello,

    We have just made a order online form that looks great on all browsers but Safari, not sure why it is looking like that.

     

    The link is below.

     

    Can you suggest anything to fix this issue?

     

     

    Shannon

     

    Page URL:
    http://williamstownfresh.com.au/fruit-and-veg-wholesalers/fruit-and-ve<br/>g-wholesale.php

  • Profile Image
    JotForm Support

    Answered by ardy0689 on February 21, 2013 at 09:08 PM

    Hello Shannon, can you please specify the Safari version you are using? Also I would like to know if you are using a Mac or a Windows system. What you are experiencing is a browser rendering issue on the CSS. Each browser name and each of their version have different understanding on how to load the styling properly. Thanks.

  • Profile Image

    Answered by RedIce on February 21, 2013 at 09:12 PM

    Hello ,


    its version 6.0.1

    Im using a MAC

    Thanks

  • Profile Image
    JotForm Support

    Answered by ardy0689 on February 21, 2013 at 09:43 PM

    Thank you for that info. I noticed that the table header was assigned a 52% on the width:

    <th class="form-matrix-column-headers" style="width:52%"> Kg th>
    <th class="form-matrix-column-headers" style="width:52%"> Each th>

     

    Safari takes this literally and makes the column 52% of the width of the form. The other rows will follow the the width of the table headers. You already declared a 23px width on your style, this makes other browser's behave along with Safari if you remove the style="width:52%".


    You could also try to embedding your form using IFRAME method. Please let me know if one of them works or not. Thanks

     
  • Profile Image

    Answered by RedIce on February 21, 2013 at 09:55 PM

    hello,

     

    thanks for the reply, I have removed the width 23 px, it looks the same. Is that what you wanted me to do?

     

    Shannon

  • Profile Image
    JotForm Support

    Answered by ardy0689 on February 22, 2013 at 12:57 AM

    Hello Shannon, I am sorry if I did not get back to you sooner. I did some test awhile ago and you can inject this code.  I tested this on Firefox, Safari and Chrome. This should also work for Opera and IE.

    Inject this code

    .form-matrix-values {padding-left: 2px;padding-right: 2px;}/*-first column width-*/.form-matrix-values .form-textbox {width: 23px;}/*-2nd column width-*/.form-matrix-values +.form-matrix-values .form-textbox {width: 23px;}/*-3rd column width-*/.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox {width: 23px;}
    .form-matrix-values,.form-matrix-column-headers{width:30px !important;}

    I cloned your form with the above code you can see it here. You can also clone it if you want and adjust some things. Please let me know if this works for you. Thanks