Willy Fresh order online form

  • Profile Image
    RedIce
    Asked 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

     

  • Profile Image
    ardy0689
    Answered 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
    RedIce
    Answered on February 21, 2013 at 09:12 PM

    Hello ,


    its version 6.0.1

    Im using a MAC

    Thanks

  • Profile Image
    ardy0689
    Answered 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
    RedIce
    Answered 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
    ardy0689
    Answered 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