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 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Question CSS gradient breaks rounded corners??

    I have always used a repeating pattern to fill a div or container with a gradient background, so in an effort to move with the times I have tried to do the gradients using CSS. What I do not understand is that in one code Internet Explorer gives me rounded DIV's but not gradient. In the other instance I get a gradient in Internet Explorer but no rounded corners.

    Now I have not changed the CLASS CSS, only the CSS applying to the DIV to generate the gradient, can ANYBODY tell me why in either case the gradient code is breaking the rounded corner CLASS?



    When using this code to form the gradient backgrounds:
    Code:
    background-image: linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
    	background-image: -o-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
    	background-image: -moz-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
    	background-image: -webkit-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
    	background-image: -ms-linear-gradient(bottom, rgb(22,19,117) 14%, rgb(20,99,163) 57%, rgb(0,187,212) 79%);
    and this applied CLASS for rounded corners of the div's

    .cborder { -moz-border-radius: 15px; border-radius: 15px; }


    The results are: .... gradient BG .... Rounded Corners

    Internet Explorer .... NO .... YES
    Firefox .... YES .... YES
    Safari .... YES .... YES

    However, When using this code:

    Code:
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    and same applied CLASS to div of:

    .cborder { -moz-border-radius: 15px; border-radius: 15px; }


    I get the following results:

    The results are: gradient BG Rounded Corners

    Internet Explorer YES NO
    Firefox YES YES
    Safari YES YES

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    filter: progid:DXImageTransform.Microsoft.gradient should be at the top of the list to ensure that ANY other supported option will take precedence

    linear-gradient
    should be at the bottom of the list as it is the standard one and so should be used in preference to a proprietary option by browsers that support it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Felgall,

    Thanks I will try that. Is there a good resource that explains the proprietary order of CSS structure?


    *** Update, Felgall, This had no effect on the end results, I have a good gradient in internet explorer but for some reason it ignores the rounded corners class. Any other ideas?
    Last edited by ARCLite Studio; 01-23-2012 at 09:26 PM. Reason: Issue continues - edit response


  •  

    Posting Permissions

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