Browser version based CSS

[sorenchr]

Hi

I was wondering if i'm able to detect a visitors browser version, and then base my webcontent on that. Im using .png files with PNG-24 Alpha Transparency, which works fine in Firefox, and IE (version 7 or over). However, when users visit my site with IE6, the .png files looks ugly and i want to utilize .gif pictures instead.

I use the .png files as table backgrounds for my html page, which are defined in the css style tags. So is it possible to do something like this:

Code: Select all


// FOR IE6

/* content definitions */

.contentBoxTop
{
   background:url('../border_top.gif') no-repeat;
}
.contentBoxMain
{
   background:url('../border_middle.gif') repeat-y;
   padding-right: 6px;
}
.contentBoxBottom
{
   background:url('../border_bottom.gif') no-repeat;
}

// FOR IE7 AND UP, FIREFOX, OPERA

/* content definitions */

.contentBoxTop
{
   background:url('../border_top.png') no-repeat;
}
.contentBoxMain
{
   background:url('../border_middle.png') repeat-y;
   padding-right: 6px;
}
.contentBoxBottom
{
   background:url('../border_bottom.png') no-repeat;
}


Thank you for your help and answers

[rangana]

Have this CSS:

Code: Select all

<!--[if lt IE 7]>
/* content definitions */

.contentBoxTop
{
   background:url('../border_top.gif') no-repeat;
}
.contentBoxMain
{
   background:url('../border_middle.gif') repeat-y;
   padding-right: 6px;
}
.contentBoxBottom
{
   background:url('../border_bottom.gif') no-repeat;
}
</style>
<![endif]-->


Hope that helps.