470,849 Members | 1,164 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,849 developers. It's quick & easy.

PHP Detects Browser, Then Replaces Images/Code/CSS

Hi guys,
I just started switching my site over to tableless css, and I'm using a

very lovely, transparent PNG-24 image. I have been trying to figure
out if there is any way to replace an image before loading only for
certain browsers using either javascript or PHP (I'm using PHP to
switch stylesheets and prefer server-side).

The problem is IE's handling of PNG-24 files: every other browser has
alpha compatibility and displays PNG-24 images correctly, even IE/Mac.
But IE/Win shows the transparent areas as blue. This is a commonly
known bug that I haven't been able to find a definitive fix for.

What I want to happen is for the JS or PHP to detect if the browser is
IE/Win. Then, if so, replace the code or load an alternate css
stylesheet to display a GIF instead of the PNG. I am mostly using the
PNG-24 in a div as a background-image in an external stylesheet.

Anyone had any idea if this is possible? I only have a meager
understanding of javascript and PHP, so any help would be greatly
appreciated.

Thanks,

Amanda H.

Feb 11 '06 #1
8 1601
Amanda H. wrote:
Hi guys,
I just started switching my site over to tableless css, and I'm using a

very lovely, transparent PNG-24 image. I have been trying to figure
out if there is any way to replace an image before loading only for
certain browsers using either javascript or PHP (I'm using PHP to
switch stylesheets and prefer server-side).

The problem is IE's handling of PNG-24 files: every other browser has
alpha compatibility and displays PNG-24 images correctly, even IE/Mac.
But IE/Win shows the transparent areas as blue. This is a commonly
known bug that I haven't been able to find a definitive fix for.

What I want to happen is for the JS or PHP to detect if the browser is
IE/Win. Then, if so, replace the code or load an alternate css
stylesheet to display a GIF instead of the PNG. I am mostly using the
PNG-24 in a div as a background-image in an external stylesheet.

Anyone had any idea if this is possible? I only have a meager
understanding of javascript and PHP, so any help would be greatly
appreciated.

Thanks,

Amanda H.


In php you can check the value of $_SERVER['HTTP_USER_AGENT'] or the
return value of the get_browser() function (
http://www.php.net/function.get-browser ), and echo the statement that
imports the stylesheet accordingly.

Alternatively, have you considered using the 'underscore hack' (
http://www.google.com/search?q=css+underscore+hack ) in your css file to
change the background-image value when the css is loaded in IE?
Feb 11 '06 #2
Amanda H. wrote:
Hi guys,
I just started switching my site over to tableless css, and I'm using a

very lovely, transparent PNG-24 image. I have been trying to figure
out if there is any way to replace an image before loading only for
certain browsers using either javascript or PHP (I'm using PHP to
switch stylesheets and prefer server-side).

The problem is IE's handling of PNG-24 files: every other browser has
alpha compatibility and displays PNG-24 images correctly, even IE/Mac.
But IE/Win shows the transparent areas as blue. This is a commonly
known bug that I haven't been able to find a definitive fix for.

What I want to happen is for the JS or PHP to detect if the browser is
IE/Win. Then, if so, replace the code or load an alternate css
stylesheet to display a GIF instead of the PNG. I am mostly using the
PNG-24 in a div as a background-image in an external stylesheet.

Anyone had any idea if this is possible? I only have a meager
understanding of javascript and PHP, so any help would be greatly
appreciated.

Thanks,

Amanda H.


Hi Amanda,

You've come to the right place. I went through quite a discovery
process to learn about this. Take the following javascript, and
put it in your <HEAD></HEAD> section of your page. Hopefully you
won't have to do this much longer once Microsoft gets their browser
fixed and can recognize PNG format. We'll all be better off for it.
You can do the research after seeing this javascript in action, it
will only execute in IE, others ignore it. I would recommend doing
the research on the Microsoft.AlphaImageLoader thingy, there are
a few sites with demos etc to enlighten you, but the bottom line is
future IE's will handle PNG, and websites the world over will be
better than ever.

<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{

for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" +
img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" +
imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>

Feb 11 '06 #3
Hey there DE,

Thanks for the reply. I have tried that before and it hasn't worked,
but I thought I'd give it another shot. I injected that little bit
into my test page, and it still isn't working. Here's the addy for the
test page: http://www.amandahenson.com/testsite/csstester2.html

If you can figure out why it isn't working, kudos. I am testing my
test site on both OS X and XP platforms in IE, Firefox, Opera,
Netscape, & (on mac) Safari. Thanks,

Amanda H.

Feb 11 '06 #4
Amanda H. wrote:
Hey there DE,

Thanks for the reply. I have tried that before and it hasn't worked,
but I thought I'd give it another shot. I injected that little bit
into my test page, and it still isn't working. Here's the addy for the
test page: http://www.amandahenson.com/testsite/csstester2.html

If you can figure out why it isn't working, kudos. I am testing my
test site on both OS X and XP platforms in IE, Firefox, Opera,
Netscape, & (on mac) Safari. Thanks,

Amanda H.


Hmmmm.... puzzling... try putting it after the </head>
-DE-

Feb 11 '06 #5
I broke down and took the image out of the background of the div and
inserted it into the HTML as a p.class (I had read before that this
script wouldn't work on bg images, but I forgot.) and then just stuck
the image tag inside the p's. The thing is that I am trying to set the
site up so the HTML is the same for all alternate stylesheets that
display different themes. With the image directly in the HTML file, I
will have to hide the p.class in the alternate css file, and that
closes off the possibility of using that p.class in anything but that
certain theme.

So, I still want to try to figure out or find someway to change just
that line of css so that IE displays a GIF instead of the PNG, but for
now I guess I will just deal with hiding the p.class. Thanks,

Amanda H.

Feb 11 '06 #6
Double Echo wrote:
Amanda H. wrote:
Hey there DE,

Thanks for the reply. I have tried that before and it hasn't worked,
but I thought I'd give it another shot. I injected that little bit
into my test page, and it still isn't working. Here's the addy for the
test page: http://www.amandahenson.com/testsite/csstester2.html

If you can figure out why it isn't working, kudos. I am testing my
test site on both OS X and XP platforms in IE, Firefox, Opera,
Netscape, & (on mac) Safari. Thanks,

Amanda H.


Hmmmm.... puzzling... try putting it after the </head>
-DE-


It appears to work correctly on reloading the page, but now because I've
loaded the page at least once the cache seems to make it work. This is
peculiar as I know it works on other sites on first load.... Well, remember,
it's only for a little while longer till the next IE, so don't be too
disheartened. We can thank Microsoft for this problem and until they get
it fixed we just have to live with it if you're going to use PNGs. If you
like, code for separate browsers, but this too can be painful. There is a
freely available browser detector out there on javascripts.com buried somewhere
in their library, it will be what you need for that. Sorry I couldn't be more
help.



Feb 11 '06 #7
Amanda H. wrote:
Hi guys,
I just started switching my site over to tableless css, and I'm using a

very lovely, transparent PNG-24 image. I have been trying to figure
out if there is any way to replace an image before loading only for
certain browsers using either javascript or PHP (I'm using PHP to
switch stylesheets and prefer server-side).

The problem is IE's handling of PNG-24 files: every other browser has
alpha compatibility and displays PNG-24 images correctly, even IE/Mac.
But IE/Win shows the transparent areas as blue. This is a commonly
known bug that I haven't been able to find a definitive fix for.

What I want to happen is for the JS or PHP to detect if the browser is
IE/Win. Then, if so, replace the code or load an alternate css
stylesheet to display a GIF instead of the PNG. I am mostly using the
PNG-24 in a div as a background-image in an external stylesheet.

Anyone had any idea if this is possible? I only have a meager
understanding of javascript and PHP, so any help would be greatly
appreciated.

Thanks,

Amanda H.


I may be a bit biased, but this is what I use:
http://koivi.com/ie-png-transparency/
Feb 11 '06 #8
Justin Koivisto wrote:
Amanda H. wrote:
Hi guys,
I just started switching my site over to tableless css, and I'm using a

very lovely, transparent PNG-24 image. I have been trying to figure
out if there is any way to replace an image before loading only for
certain browsers using either javascript or PHP (I'm using PHP to
switch stylesheets and prefer server-side).

The problem is IE's handling of PNG-24 files: every other browser has
alpha compatibility and displays PNG-24 images correctly, even IE/Mac.
But IE/Win shows the transparent areas as blue. This is a commonly
known bug that I haven't been able to find a definitive fix for.

What I want to happen is for the JS or PHP to detect if the browser is
IE/Win. Then, if so, replace the code or load an alternate css
stylesheet to display a GIF instead of the PNG. I am mostly using the
PNG-24 in a div as a background-image in an external stylesheet.

Anyone had any idea if this is possible? I only have a meager
understanding of javascript and PHP, so any help would be greatly
appreciated.
Thanks,
Amanda H.


I may be a bit biased, but this is what I use:
http://koivi.com/ie-png-transparency/


Thanks for that link!! I will probably integrate this in to my web
pages after I get a chance to check it out. Always great to get
better solutions. Even better that Microsoft fix their broken
browsers so we don't have to code around them.

Feb 11 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by R. Rajesh Jeba Anbiah | last post: by
12 posts views Thread by Kepler | last post: by
15 posts views Thread by David Thielen | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.