Loading different images depending on the browser (JavaScript)

Nevsan · 04-02-2004, 08:50 AM

I have an interesting problem... The way my page is designed, I use a lot of transparent images, so I use the .PNG format (Mostly to get dropshadows). Thing is, IE for Windows, doesn't seem to support the transparency so my sit ends up looking horrible. What I was wondering, is if it is possible to use a JavaScript or something to detect what browser is being used, and then load a different .GIF image (Without dropshadows)... I could just scrap the dropshadows in general but I would like to keep them for people with browsers that do support .PNG transparency...

Also, since my layout is completely CSS based (not a single table), I was wondering if I could to the same for background images, since a few browsers support .PNG transparency for background images too... (The url's of the background images are stored in the style sheet so I don't think JavaScript can help here, but it's worth asking.)

If you want to see what I mean when I say it renders horribly in Windows IE, take a look at this:

http://homepage.mac.com/nevsan/

It renders fine in Mac browsers though. I think Opera for Windows might render it correctly, so try that out to see what it's supposed to look like. Here's a screenshot of what it's supposed to look like.

P.S. While I'm here, any way to get rid of that 2 pixel spacing between div elements that ieWin seems to throw in there?

OneEyedDog · 04-03-2004, 04:52 PM

Not so inline with PNG transparency but a technique I was looking at two days ago is here:

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

Hope this helps in anyway,

Warm Wishes,

Anthony · 04-03-2004, 06:26 PM

I would recommend going with .gifs for transparency, since it doesn't look like IE will be supporting .png transparency anytime soon.

Nevsan · 04-04-2004, 09:36 AM

So I guess I'm SOL here? Damn. Those drop-shadows looked good too

. Frickin' IE. I hate it. Funny how all hacks seem to target IE since it screws everything up, and yet it just happens to be the most popular browser. God I hate MS....

Oh, one more thought. Do you think it would be reasonable to, maybe, set up a PHP script or something so it loads different stylesheets/html pages depending on the browser or platform? I actually know nothing on PHP, but I already know C/C++ so it shouldn't be too hard.... Wait, would a webhost such as, say, .Mac, even let me use PHP?

04-02-2004, 08:50 AM	#1 (permalink)
Nevsan New Member Join Date: Mar 2004 Posts: 9 16.00 NP$ (Donate)	Loading different images depending on the browser (JavaScript) I have an interesting problem... The way my page is designed, I use a lot of transparent images, so I use the .PNG format (Mostly to get dropshadows). Thing is, IE for Windows, doesn't seem to support the transparency so my sit ends up looking horrible. What I was wondering, is if it is possible to use a JavaScript or something to detect what browser is being used, and then load a different .GIF image (Without dropshadows)... I could just scrap the dropshadows in general but I would like to keep them for people with browsers that do support .PNG transparency... Also, since my layout is completely CSS based (not a single table), I was wondering if I could to the same for background images, since a few browsers support .PNG transparency for background images too... (The url's of the background images are stored in the style sheet so I don't think JavaScript can help here, but it's worth asking.) If you want to see what I mean when I say it renders horribly in Windows IE, take a look at this: http://homepage.mac.com/nevsan/ It renders fine in Mac browsers though. I think Opera for Windows might render it correctly, so try that out to see what it's supposed to look like. Here's a screenshot of what it's supposed to look like. P.S. While I'm here, any way to get rid of that 2 pixel spacing between div elements that ieWin seems to throw in there?

04-03-2004, 04:52 PM	#2 (permalink)
OneEyedDog NamePros Member Join Date: Mar 2004 Location: Middle Earth (NZ) Posts: 162 104.00 NP$ (Donate)	Not so inline with PNG transparency but a technique I was looking at two days ago is here: http://www.alistapart.com/articles/cssdropshadows/ Hope this helps in anyway, Warm Wishes, __________________ Script Installation, Avatars, Banners and Buttons for $NP or Paypal, PM me your requirements :D Deni J Vanin \| Freelance Jobs and Forums \| Web Design

04-04-2004, 09:36 AM	#4 (permalink)
Nevsan New Member Join Date: Mar 2004 Posts: 9 16.00 NP$ (Donate)	So I guess I'm SOL here? Damn. Those drop-shadows looked good too . Frickin' IE. I hate it. Funny how all hacks seem to target IE since it screws everything up, and yet it just happens to be the most popular browser. God I hate MS.... Oh, one more thought. Do you think it would be reasonable to, maybe, set up a PHP script or something so it loads different stylesheets/html pages depending on the browser or platform? I actually know nothing on PHP, but I already know C/C++ so it shouldn't be too hard.... Wait, would a webhost such as, say, .Mac, even let me use PHP? Last edited by Nevsan; 04-04-2004 at 09:40 AM.

04-03-2004, 06:26 PM	#3 (permalink)
Anthony NamePros Expert Join Date: Dec 2003 Location: NYC Posts: 9,201 26.71 NP$ (Donate)	I would recommend going with .gifs for transparency, since it doesn't look like IE will be supporting .png transparency anytime soon.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)