1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Custom button looks different in IE and FF

Discussion in 'Styling and Customization Questions' started by fredrikse, Oct 23, 2012.

  1. fredrikse

    fredrikse Active Member

    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:
    firefox_button.JPG

    IE:
    ie9_button.JPG
     
  2. tenants

    tenants Well-Known Member

    What is the css for the button?
     
  3. fredrikse

    fredrikse Active Member

    This is the CSS code I'm using:

    Code:
    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);
     
  4. tenants

    tenants Well-Known Member

    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:

    Code:
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe2fc', endColorstr='#29a1d9');
    
    (see here: http://msdn.microsoft.com/en-us/library/ms532997.aspx)
    or this:
    Code:
    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)
     
    Jake Bunce and fredrikse like this.
  5. tenants

    tenants Well-Known Member

    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:

    Code:
    <!--[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
    
     
    Jake Bunce and fredrikse like this.
  6. Arty

    Arty Well-Known Member

    Also add this for IE10 and latest Firefox:
    Code:
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #abe2fc 10%,
      #a1e1ff 28%,
      #29a1d9 95%,
      #204057);
    
    
     
    Jake Bunce likes this.

Share This Page