Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    CSS gradient browser question

    Hello

    I have created a gradient for a table background colour using the link here:

    http://ie.microsoft.com/testdrive/gr...r/default.html

    I then placed the code it that the site generates into an external style sheet, and in my HTML page I have this:

    Code:
    <table class="center" border="0" cellspacing="0" cellpadding="0">
    
    <tr><td width="100%" align="center" valign="top"><div id="gradient">
    
    TEXT
    
    </div>
    </td></tr></table>
    I can see the gradient in page using Safari, but not in my default browser, IE9. Why is that, please? This is what I have for gradient in my style sheet:

    Code:
    #gradient {
    
    height: 100%;
    
    padding: 10px;
    
    /* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
    
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);
    
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);
    
    /* Opera */ 
    background-image: -o-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);
    
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #28AB66), color-stop(1, #73CC9D));
    
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top left, #28AB66 0%, #73CC9D 100%);
    
    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom right, #28AB66 0%, #73CC9D 100%);
    
    }
    Many thanks.

    Steve

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The code is correct. The problem is that IE only started supporting gradients in IE10. IE9 and below do not support it, so will only display the fallback (if any). Usually a gradient isn't something that is critical for the site to work correctly, so just adding a solid color fallback may be ok. e.g. add something like:

    background-color: #28AB66; (or pick a midpoint between your two colours) before your gradient properties.

    You can also remove the -ms-linear-gradient rule, as the final version of IE10 was released without prefix. That is only needed for users of IE10 platform preview on Win8, which is likely only going to be a very limited number of developers.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •