Custom button looks different in IE and FF

[fredrikse]

Hi,

I have created a custom sign up button. In Firefox it looks really good. But in IE9 it looks not good at all.

What's wrong here?

FF:


IE:

 

[tenants]

What is the css for the button?

 

[fredrikse]

What is the css for the button?

This is the CSS code I'm using:

font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #032a46;
padding: 11px 20px;
background: -moz-linear-gradient(
  top,
  #ffffff 0%,
  #abe2fc 10%,
  #a1e1ff 28%,
  #29a1d9 95%,
  #204057);
background: -webkit-gradient(
  linear, left top, left bottom,
  from(#ffffff),
  color-stop(0.10, #abe2fc),
  color-stop(0.28, #a1e1ff),
  color-stop(0.95, #29a1d9),
  to(#204057));
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
border: 4px solid #ffffff;
-moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.6),
  inset 0px 0px 3px rgba(93,118,148,1);
-webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.6),
  inset 0px 0px 3px rgba(93,118,148,1);
box-shadow:
  0px 1px 3px rgba(000,000,000,0.6),
  inset 0px 0px 3px rgba(93,118,148,1);
text-shadow:
  0px -1px 1px rgba(10,59,94,0.2),
  0px 1px 1px rgba(255,255,255,0.6);

 

[tenants]

You only cover webkit (chrome/safari) and morzilla (FF) background gradients, but there is nothing IE specific in there

I'm not a CSS expert, but try something like this:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe2fc', endColorstr='#29a1d9');

(see here: http://msdn.microsoft.com/en-us/library/ms532997.aspx)
or this:

background: -o-linear-gradient(#abe2fc, #29a1d9);

I haven't tried either, but you can probably get something close with either of those (but you will never get it exactly the same, unless you use an img background just for ie)
You might also want to look at different versions of IE (IE compatibility and version issues are always anoying)

 

[tenants]

For our sign up button (and similar buttons), we cheat and use an image (this gets around most IE compatibly issues):
background: #E68C17url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x center -7px;

We could use the gradient methods mentioned above
If you are using gradients, I would think about testing your solution on various IE versions,
and then include some css for the various versions of IE (it's messy, but IE is messy)


example:

<!--[if lt IE 9]>
    /* do something for IE 9, external css exmaple */
    <link href="ie9.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
<!--[if IE 8]>
    /* do something for IE 8, example of internal css */
    <style type="text/css">
    </style>
<![endif]-->
 
etc

 

[Arty]

Also add this for IE10 and latest Firefox:

background: linear-gradient(
  to bottom,
  #ffffff 0%,
  #abe2fc 10%,
  #a1e1ff 28%,
  #29a1d9 95%,
  #204057);