My form's submit button is appearing differently in different browsers..

Hi there,

I got a form from the theme store and changed it a fair amount in the css to match my website design but for some reason the submit button is appears in different ways on various browsers.. like on firefox for instance, it does the opposite thing with the colours, on internet explorer it doesn't show the hover colour.. it's not very important but I was just curious why that happens.. is there a way to fix it?

Here is the link to the page: http://www.ekdesigns.co.uk/Upload/contact.html

Thanks!

Esther.

This is actually a very interested topic. The CSS used is not actually written in a cross-browser manner, resulting in the browsers each interpreting a different rule for the Submit button's background color.

The background is set as an image, by using a linear-gradient. Here is the relevant part of your code, take note of the parts marked with orange background, and specifically red text:

.form-submit-button, .form-submit-reset, .form-submit-print {
    cursor : pointer;
    -moz-border-radius : .0em;
    -webkit-border-radius : .0em;
    border-radius : .0em;
    padding : 0px 0px;
    color : #FFF;
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px;
    text-shadow : 0px 0px 0px #142353;
    border : 0px solid #427C99;
    -moz-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.3), 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow : inset 0px 0px 0px rgba(147, 187, 255, 0.61), 0px 0px 0px 0px rgba(0, 0, 0, 0.26);
    background : #e9c322;
    background : -moz-linear-gradient(top, #e9c322 0%, #000000 0%);
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5b427), color-stop(100%,#e5b427));
    background : linear-gradient(top, #e9c322 0%, #000000 0%);
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D8FB0', endColorstr='#000000', GradientType=0 );
    padding : 0px 0px;
    font-family : "Lato-Light", sans-serif;
    font-size : 18px;
    font-weight : normal;
    outline : none;
    position : relative;
    z-index : 11111111111111111;
}

.form-submit-button:hover, .form-submit-reset:hover, .form-submit-print:hover {
    border : 0px solid #e9c322;
    -moz-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow : inset 0px 0px 0px 0px rgba(147, 187, 255, 0.3), 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow : inset 0px 0px 0px rgba(147, 187, 255, 0.61), 0px 0px 0px 0px rgba(0, 0, 0, 0.26);
    background : #e9c322;
    background : -moz-linear-gradient(top, #e9c322 0%, #e9c322 100%);
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#2d2d2d));
    background : linear-gradient(top, #252525 0%, #252525 100%);
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#252525', GradientType=0 );
}

.form-submit-button:active, .form-submit-reset:active, .form-submit-print:active {
    border : 0px solid #e9c322;
    -moz-box-shadow : inset 0px 0px 0px 1px rgba(147, 187, 255, 0.30), 0px 2px 2px 0px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow : inset 0px 0px 0px 1px rgba(147, 187, 255, 0.3), 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    box-shadow : inset 0px 1px 0px rgba(147, 187, 255, 0.61), 0px 2px 2px 0px rgba(0, 0, 0, 0.26);
    background : #e9c322;
    background : -moz-linear-gradient(top, #e9c322 0%, #e9c322 100%);
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#252525), color-stop(100%,#252525);
    background : linear-gradient(top, #252525 0%, #252525 100%);
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#252525', GradientType=0 );
}

As you can see in the part marked in red, each browser is instructed to display a different background linear gradient. The code for Firefox is:

background : -moz-linear-gradient(top, #e9c322 0%, #000000 0%);

It means that Firefox will use color black (#000000) from the start of the button (0%) to the end. Button is black in Firefox.

Code for Chrome is:

background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5b427), color-stop(100%,#e5b427));

Chrome will use a gradient from color gold (#e5b427) to color gold (#e5b427) - so it appears as color gold.

Cross browser gradient is broken, as there is no such thing as "top" in linear-gradient. You should use "to bottom" instead of "top". Here is the code:

background : linear-gradient(top, #252525 0%, #252525 100%);

It is set to have color dark gray (#252525), from start to finish. However, using the keyword "top" breaks this rule, so this line is ignored by all browsers. You should us "to bottom" instead, or even remove the word "top," (with the comma) from the rule to make it work again:

background : linear-gradient(#252525 0%, #252525 100%);

And finally, old versions of Internet Explorer are set to have the same gradient as the standard rule was supposed to have, if it were not broken:

filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#252525', GradientType=0 );

This is from color dark gray (#252525), to the same color.

As I do not know which of these many different gradients you actually wanted to have on your submit button, I can't say exactly what to change your code into. However, if you want to have a consistent look across browsers, you should use the same color in all of the rules.

The same issue applies to the :hover and :active states as well - the CSS code is simply set as such that each browser is instructed with a different color in its gradient, and the standard rule that all browsers would follow is broken.

I hope this helps. Please let us know if you need any further assistance, and we will be happy to help.

Thanks so much!  It worked perfectly.  I'm not really used to editing CSS so that's why.  It makes a lot more sense now.

On behalf of my colleague, you are welcome. If you have any other question, please let us know. We will be glad to help.