PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

No Submit Button in IE

  1. Hi

    In all our forms on our website, there is no Submit button present when viewing the website on IE. It does appear when using Chrome. I noticed this topic has been covered / answered before but the solution appears to be theme specific.

    Please could you take a look? http://www.apsu.com/stage/business-continuity/virtual-server-recovery-wintel/

    Many thanks

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  2. Richard Vav
    Administrator

    The button is there but it's visibility will be dependent on your screens brightness & contrast settings, the reason for this is that your css only assigns a background for webkit browsers

    input[type="button"], input[type="submit"] {
    	background: -webkit-linear-gradient(top, #2152A1, #043D63);
    	color: #fff;
    	font-size: 14px;
    	border: 1px solid #fff;
    	border-radius: 5px;
    	padding: 10px 40px;
    	text-transform: uppercase;
    }

    You need to add a few more background rules into the above CSS

    background: #2152a1; /* Old browsers */
    background: -moz-linear-gradient(top,#2152a1,#043d63); /* FF3.6+ */
    background: -o-linear-gradient(top,#2152a1,#043d63); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,#2152a1,#043d63); /* IE10+ */
    background: linear-gradient(top,#2152a1,#043d63); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2152a1', endColorstr='#043d63',GradientType=0 ); /* IE6-9 */
    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  3. I have just added this to my style.css and now I can see the button on IE, however, it appears to be just approximately 4px x 4px in size.

    Before, there was no button there.

    Still appears OK on Chrome, but no gradiant anymore.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  4. Richard Vav
    Administrator

    To fix the chrome gradient move the old browsers line up so it is before the browser specific rules.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  5. Richard Vav
    Administrator

    One of gravity forms ie specific rules is reducing the padding down to 3px so try adding the !important flag like so to your CSS from above

    padding: 10px 40px !important;
    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  6. Almost there. Chrome gradient fixed - thank you.

    IE. Now a larger blue rectangle but no text.

    Screenshot: http://imgur.com/UWTFMVb

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  7. Richard Vav
    Administrator

    Try clearing your cache because I can see the text http://imgur.com/kdPcYdc

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  8. Just tried this in Browserlings to be sure (virtual machine - no cache): http://cl.ly/image/3h333438053n

    Same effect, using IE9.

    Thank you.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  9. Richard Vav
    Administrator

    Well I am stumped, I can't see anything in the CSS that would cause it, out of interest try temporarily removing the filter background for ie6-9 so it reverts to the non-gradient background and see if that makes any difference.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  10. That did have some effect. The blue rectangle now has rounded corners in IE. Just no text and smaller in size.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  11. I cannot see the text in IE9 either: http://minus.com/lvnXcwFvSVd3

    I'll see if Rob can take a look at it today. Thanks Richard.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  12. Richard Vav
    Administrator

    I really am stumped, nothing in the CSS is jumping out as the cause and as I only have access to IE10 I can't really offer any more advise. Even when I set IE10 to use the IE9 browser and standards modes I still see the text http://imgur.com/U7195BF

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  13. IE is choking on the display: table piece of this CSS:

    [css]
    .button {
    display: table;
    position: relative;
    font-size: 14px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #888;
    -webkit-box-shadow: 1px 1px 2px 0px #888;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .14);
    text-shadow: rgba(0, 0, 0, .31) 0 -1px 1px;
    text-align: center;
    border: none;
    width: auto;
    cursor: pointer;
    opacity: 1;
    line-height: 30px;
    margin: 0 0 -10px 0;
    }

    So perhaps try adding a display: block to the input submit style:

    [css]
    input[type="button"], input[type="submit"] {
    background: #2152a1;
    background: -webkit-linear-gradient(top, #2152A1, #043D63);
    background: -moz-linear-gradient(top,#2152a1,#043d63);
    background: -o-linear-gradient(top,#2152a1,#043d63);
    background: -ms-linear-gradient(top,#2152a1,#043d63);
    background: linear-gradient(to bottom, #2152a1 0%,#043d63 100%);
    color: #fff;
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 10px 40px !important;
    text-transform: uppercase;
    display: block;
    }
    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  14. That's done the trick! Thank you very much both of you for your efforts.

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink
  15. Right on, glad to help!

    Posted 7 years ago on Tuesday March 5, 2013 | Permalink

This topic has been resolved and has been closed to new replies.