No Submit Button in IE « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

apsu
Member

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 12 years ago on Tuesday March 5, 2013 | Permalink

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 12 years ago on Tuesday March 5, 2013 | Permalink

apsu
Member

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 12 years ago on Tuesday March 5, 2013 | Permalink
Richard Vav
Administrator

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

Posted 12 years ago on Tuesday March 5, 2013 | Permalink
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;
Copy
Posted 12 years ago on Tuesday March 5, 2013 | Permalink
apsu
Member

Almost there. Chrome gradient fixed - thank you.

IE. Now a larger blue rectangle but no text.

Screenshot: http://imgur.com/UWTFMVb

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

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

Posted 12 years ago on Tuesday March 5, 2013 | Permalink
apsu
Member

Just tried this in Browserlings to be sure (virtual machine - no cache): http://cl.ly/image/3h333438053n

Same effect, using IE9.

Thank you.

Posted 12 years ago on Tuesday March 5, 2013 | Permalink
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 12 years ago on Tuesday March 5, 2013 | Permalink
apsu
Member

That did have some effect. The blue rectangle now has rounded corners in IE. Just no text and smaller in size.

Posted 12 years ago on Tuesday March 5, 2013 | Permalink
Chris Hajer
Key Master

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 12 years ago on Tuesday March 5, 2013 | Permalink
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 12 years ago on Tuesday March 5, 2013 | Permalink

Rob Harrell
Member

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 12 years ago on Tuesday March 5, 2013 | Permalink

apsu
Member

That's done the trick! Thank you very much both of you for your efforts.

Posted 12 years ago on Tuesday March 5, 2013 | Permalink
Rob Harrell
Member

Right on, glad to help!

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

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