Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to make headers glossy in IE7,8,9 using CSS

How to make headers glossy in IE7,8,9 using CSS

Problem

I am using below code to get a Glossy look for a header label. It works fine in FF, Chrome and IE10. But when loaded in lower versions of IE like IE7,8,9. Glossy finish is lost. Can any body help me to get glossy look on the header?? Please refer to the below images for glossy look and normal look.

Glossy Header Glossy Header

Normal Header Normal Header

.docTitle
{
    font-weight: bold;
    width: 99.3%;

        font: bold 12px/100% Arial,Verdana,helvetica;
    padding: 8px 5px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-shadow: 0 -1px 0 rgba(0,0,0,.9);
    background: #255182;
    background: -webkit-linear-gradient(top, #2f4f88, #385993 49%, #21427d 50%, #255182);
    background: -moz-linear-gradient(top, #2f4f88, #385993 49%, #21427d 50%, #255182);
    background: -ms-linear-gradient(top, #2f4f88, #385993 49%, #21427d 50%, #255182);
    background: -o-linear-gradient(top, #2f4f88, #385993 49%, #21427d 50%, #255182);
    background: linear-gradient(to bottom, #2f4f88, #385993 49%, #21427d 50%, #255182);
}
Problem courtesy of: Naveen Reddy

Solution

see the "notes" and "resources" on this page: http://caniuse.com/#feat=css-gradients. Older IE does not support the css3 gradients, but there are workarounds if its important enough to you. I personally would be fine with a "non-glossy" appearance in IE.

http://css3pie.com/ is one option for emulating support in IE.

Solution courtesy of: Zach Lysobey

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to make headers glossy in IE7,8,9 using CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×