CODEWITHSUNDEEP
htmlinternet-explorercss
anon271334
anon271334

Reputation:

Vertical Gradient/IE

Somebody PLEASE tell me that Internet Explorer, the world's most used web browser SUPPORTS gradients for html elements!

I have this:

/* default background colour, for all layout engines that don't implement gradients */
background: #2a6da9;

/* gecko based browsers */
background: -moz-linear-gradient(top, #55aaee, #003366);

/* webkit based browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));

color: #000000; /* text colour (black) */
height: auto; /* gradient uses the full height of the element */
padding: 5px; /* distance from border edge to text */

...Which works perfectly in every browser I've used it on, EXCEPT for internet explorer! Internet explorer, even the latest version (9 beta AND 9RC1) DOES NOT APPEAR SUPPORT GRADIENTS!

So far, all I have seen on the web are tutorials telling me to use a background-image that has a gradient effect and just do a repeat-x on it.

Does anyone know of a way to get gradient support in I.E? (without images)

Thank you :)

Upvotes: 3

Views: 1703

Answers (1)

Brandon Frohbieter
Brandon Frohbieter

Reputation: 18139

Here is an example with gradient filters for IE...

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

The snippet shows:

        /* For Internet Explorer 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
        /* For Internet Explorer 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";

But i've always just used a 1px wide slice of the gradient.

Upvotes: 5

Related Questions