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
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 */
Richard Vav
Administrator
To fix the chrome gradient move the old browsers line up so it is before the browser specific rules.
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;Almost there. Chrome gradient fixed - thank you.
IE. Now a larger blue rectangle but no text.
Screenshot: http://imgur.com/UWTFMVb
Richard Vav
Administrator
Try clearing your cache because I can see the text http://imgur.com/kdPcYdc
Just tried this in Browserlings to be sure (virtual machine - no cache): http://cl.ly/image/3h333438053n
Same effect, using IE9.
Thank you.
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.
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.
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
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;
}Right on, glad to help!