CSS: How to set up gradient background cross browser (only missing IE8 and IE9)


Tags: css,internet-explorer-8,internet-explorer-9,background-color,linear-gradients

Problem :

I have created my own navbar and would like to set up a simple gradient background color for it.

So far I have the following which works fine for me in newer browsers but I am not sure what I have to add here to cover IE8 and IE9 as well (I am not interested in older versions).

Also, I came across filter: progid... when searching for this. Can someone tell me if this needs to be added here as well to cover common browsers or if I need to add or change anything else for that ?
I would like to support newer versions of Chrome, Firefox, Opera and Safari + IE (incl. IE8 and IE9).

My CSS:

background: -moz-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Firefox */
background: -ms-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* IE10 */  
background: -o-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #02b0fd), color-stop(1, #028dca)); /* Webkit (Safari) */
background: -webkit-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Webkit (Chrome) */
background: linear-gradient(top, #02b0fd 0%, #028dca 100%);

Many thanks in advance, Mike



Solution :

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0 );

will give you IE6-9.

Using: http://www.colorzilla.com/gradient-editor/


    CSS Howto..

    How to change the size of the radio button using CSS?

    how to combine css with php while loop and table?

    How to set the css property of dynamic data

    How can you prevent Formsauthentication to block css and images?

    How to make layout with 3 elements where 1 is resizable

    How to break text in a line in a div by css?

    How do I make an image semi-transparent?

    CSS how to get a div to the right side and a div exactly in the middle?

    how to stop this irritating css behaviour

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    how can I position my img right?

    How to make my SVG map render correctly in the browser?

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    How to move a span to a different position in a DIV

    how to remove and add css class to a specific textbox inside gridview in c# asp.net?

    How do I slow down the banner transitions on my homepage? CSS

    How to replace cycle('float: left', 'float: right') to use pure css?

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    How to remove white border from blur background image

    How do you associate a css/sass stylesheet to a view in rails?

    How do I change the Mailchimp subscribe button color using inline CSS?

    How to scroll LI items in a fixed height UL?

    Flexbox in Chrome--How to limit size of nested elements? [duplicate]

    How to use the float:left property in CSS without having the trouble I have?

    How are new lines made with text as background?

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How to convert CSS class to id?

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    CSS: How to place next to each other 2 images with 50 % width?

    How to position div's like this with CSS?