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

    Using rounded corners with buttons...reverting to square in IE8

    Asked by LogiCore on January 17, 2012 at 12:13 PM

    I have been trying to use the standard/default config. for both the "submit" and "upload" buttons with a few minor asthetic changes. In Firefox the button appears as it should with rounded edges, but in IE the button ignores the rounded edges and squares them off. It also ignores the rollover features as well.


    This is the css I injected:


    .form-submit-button {
    background: #e1e7e3;
    background: -moz-linear-gradient(top, #edf1f4 0%, #c1ccd5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f4), color-stop(100%,#c1ccd5));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf1f4', endColorstr='#c1ccd5',GradientType=0 );
    text-shadow: 0 -1px #fff;
    border: 1px solid #7f7f7f;
    color:#364756;
    width: 102px;
    height: 24px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin-left:0px;
    cursor:pointer;
    -moz-border-radius:3px 3px;
    -webkit-border-radius:3px 3px;
    border-radius:3px 3px;
    padding-bottom:4px;
    }

    .form-submit-button:hover {
    background: #e1e7e3;
    background: -moz-linear-gradient(top, #edf1f4 0%, #e1e7e3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f4), color-stop(100%,#e1e7e3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf1f4', endColorstr='#e1e7e3',GradientType=0 );
    }

    .qq-upload-button {
    background: #e1e7e3;
    background: -moz-linear-gradient(top, #edf1f4 0%, #c1ccd5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f4), color-stop(100%,#c1ccd5));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf1f4', endColorstr='#c1ccd5',GradientType=0 );
    text-shadow: 0 -1px #fff;
    border: 1px solid #7f7f7f;
    color:#364756;
    width: 100px;
    height: 10px;
    font-size: 12px;
    -moz-border-radius:3px 3px;
    -webkit-border-radius:3px 3px;
    border-radius:3px 3px;
    padding-top:4px;
    }

    .qq-upload-button-hover {
    background: #e1e7e3;
    background: -moz-linear-gradient(top, #edf1f4 0%, #e1e7e3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf1f4), color-stop(100%,#e1e7e3));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf1f4', endColorstr='#e1e7e3',GradientType=0 );
    }

    Any idea why this is happening?


    Thanks.

    Screenshot
    rounded edges button rounded corner size height font
  • Profile Image

    Answered by pinoytech on January 17, 2012 at 02:05 PM

    Hi,

    Can you provide us your Website Url for further assistance?

     

    Thank you!

  • Profile Image

    Answered by LogiCore on January 17, 2012 at 02:07 PM

    I'm still working on it on a local server. It hasn't gone hot yet.

     

  • Profile Image
    JotForm Support

    Answered by liyam on January 17, 2012 at 08:06 PM

    The CSS rounded corners are not supported by IE browsers (need citation for IE9).

    But there is a work around, unfortunately, I have not tried this yet:  http://www.webdevtuts.net/

    Here is the link where microsoft explained why rounded corners was not yet added in IE8.  There are also additional links below the page of discussions of the additional workarounds aside from the link that I have provided you above:

    http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx

    Please let us know if you have other questions or concerns.

  • Profile Image

    Answered by LogiCore on January 18, 2012 at 10:52 AM

    Thanks Iiyam....

    Sorry, I kind of surmised that after posting this. That has been my biggest issue pretty much with my entire site! Browser compatibility! LOL!

    I had already visted the link you posted above. I think that method will work fine for most applications. I have a special case in that my form is being nested within a jquery tab feature and is presenting some special problems. The "iframe" tag works very well for me and is getting the job done, but the embedded form does not work. I think the method you suggested above requires that the form data be placed within the page and then have the css link to pie.htc (or "border-radius.htc" on other sites: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers )

    Just for other users' benefit, if you're going to place the form on your page and aren't trying to do any fancy tricks you should be fine using the method prescribed above.

    Thanks for the service guys! This system really saves me loads of time.

  • Profile Image
    JotForm Support

    Answered by liyam on January 18, 2012 at 11:28 AM

    It's really good to know that JotForm saves you time with forms. 

    Just in case, it might help if you use jQuery.noconflict() function for your jQuery coding.  You can learn more about jQuery.noConflict() on this page.

  • Profile Image

    Answered by LogiCore on January 18, 2012 at 11:51 AM

    Thanks! I will try this and see what happens.

  • Profile Image

    Answered by xZXZX on June 21, 2013 at 05:45 AM

    zzxZX