Question

My team is developing an ASP.NET web application, and we are attempting to maintain a consistent look and feel across browser type and version for a couple of the major browsers(IE, Chrome, Firefox). We would also like to allow themeing if possible , so that users can have a choice of color, font size, and so on.
However, I am having a serious issue with Acheiving compatibility with IE 8 and 9 due to some CSS3 rules currently in place. In particular, the shading gradient’s used in this div are causing trouble, as they are not supported in IE 8 or 9:

#logos
{
    width:1024px;
    height:100px;
    border-radius:15px;
    color: -moz-linear-gradient(bottom, #297381, #FFFFFF);
    color: -ms-linear-gradient(bottom, #297381, #FFFFFF);
    color: -webkit-linear-gradient(bottom, #297381,#FFFFFF);
    background:-moz-linear-gradient(bottom, #297381,#FFFFFF);
    background:-ms-linear-gradient(bottom, #297381,#FFFFFF);
    background:-webkit-linear-gradient(bottom, #297381,#FFFFFF);

}

I believe(correct me if I am wrong) I can achieve the gradient in IE9 by adding these rules:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#297381', EndColorStr='#FFFFFF')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#297381’, EndColorStr='#FFFFFF');

But I don’t think there is any corresponding option in IE8 and I don’t believe it supports border-radius either. I was hoping to just have a separate theme or rule utilizing a static image for the background of that div. Is there any way I can detect browser version in css and apply the correct rule or theme? Or does this have to be done in the code behind and set the theme accordingly from there?

Answer 1

Try CSS PIE – http://css3pie.com/. This is a library which enables CSS3 functionality in IE6-8 via behaviors in a .htc file.