Viewing Thread:
"Different CSS styles for different browsers"

I want to use a semi-transparent PNG image as a background, but I want a different image in browsers that don't support PNG transparency - is this possible?

I have two DIVs, #sections_wrapper and #pages_wrapper, and the background styles are ...

#sections_wrapper { background-image:url(images/sections.gif) }
#pages_wrapper { background-image:url(images/pages.gif) }

... but I've tried having a different background on more advanced browsers by using ...

div[id="sections_wrapper"] { background-image:url(images/33.png) }
div[id="pages_wrapper"] { background-image:url(images/66.png) }

... to override the original styles.

But, it doesn't work.

Am I being stupid trying to do this, or is it possible?

[URL]http://timmargh.net/[/URL] for the website in question.

Erm ... before I dove into those methods you both suggested, I tried adding !important to the div[id="sections"] { ... declaration and it seems to have worked.

Of course, this assumes that any browser that understand the div[id=... method of declaration also has PNG support, which is a dangerous assumption, but it'll suit me for the time being.

EDIT: ... and I've just read in the drop shadow article "That '!important' bit tells the browser that the declaration is to take precedence over normal declarations for the same element ... It also happens to be unsupported in all versions of Internet Explorer, which also lack native support for transparent PNG’s. It’s almost too convenient."

Cheers Rob, Tyla - I'll look into both of those and let you know how I get on.

Just create 2 CSS files, or even 3, on thats handles basic stuff like text use:

Link to Stylesheet

Second one handles all the flash stuff and uses:

@import

The a 3rd handling just the PNG versions using:

@import.

Then there's a script out the on http://www.alsitapart.com in the CSS section about scripting CSS gfor PNG support so that only those that do uses the 3 stylesheet.

If I can find the direct link to the article, I'll post it here later.

*Edit*

Found those links :

http://www.alistapart.com/articles/cssdrop2/

http://www.alistapart.com/articles/pngopacity/

My Current Fave:

http://www.alistapart.com/articles/dynatext/

Well browser detection in PHP is exactly the same as in JavaScript. _SERVER["HTTP_USER_AGENT"].

You'd need to look it up to get an experienced viewpoint on how to make sense of the data contained in the variable though.

I was hoping to avoid scripts of any kind ... except PHP, that is.

Still, a man's gotta do what a man's gotta do.

JavaScript browser detect is your best bet I reckon.

I want to use a semi-transparent PNG image as a background, but I want a different image in browsers that don't support PNG transparency - is this possible?

I have two DIVs, #sections_wrapper and #pages_wrapper, and the background styles are ...

#sections_wrapper { background-image:url(images/sections.gif) }
#pages_wrapper { background-image:url(images/pages.gif) }

... but I've tried having a different background on more advanced browsers by using ...

div[id="sections_wrapper"] { background-image:url(images/33.png) }
div[id="pages_wrapper"] { background-image:url(images/66.png) }

... to override the original styles.

But, it doesn't work.

Am I being stupid trying to do this, or is it possible?

[URL]http://timmargh.net/[/URL] for the website in question.