PHP Detects Browser, Then Replaces Images/Code/CSS

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Amanda H.
    #1

    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.

    Tags: None
    • Carl
      #2
      Re: PHP Detects Browser, Then Replaces Images/Code/CSS

      Amanda H. wrote:[color=blue]
      > 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.
      >[/color]

      In php you can check the value of $_SERVER['HTTP_USER_AGEN T'] 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?

        Comment

        • Double Echo
          #3
          Re: PHP Detects Browser, Then Replaces Images/Code/CSS

          Amanda H. wrote:[color=blue]
          > 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.
          >[/color]

          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.Alpha ImageLoader 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="JavaS cript">
          function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
          {

          for(var i=0; i<document.imag es.length; i++)
          {
          var img = document.images[i]
          var imgName = img.src.toUpper Case()
          if (imgName.substr ing(imgName.len gth-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:in line-block;" + img.style.cssTe xt
          if (img.align == "left") imgStyle = "float:left ;" + imgStyle
          if (img.align == "right") imgStyle = "float:righ t;" + imgStyle
          if (img.parentElem ent.href) imgStyle = "cursor:han d;" + imgStyle
          var strNewHTML = "<span " + imgID + imgClass + imgTitle
          + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" +
          imgStyle + ";"
          + "filter:progid: DXImageTransfor m.Microsoft.Alp haImageLoader"
          + "(src=\'" + img.src + "\', sizingMethod='s cale');\"></span>"
          img.outerHTML = strNewHTML
          i = i-1
          }
          }
          }
          window.attachEv ent("onload", correctPNG);
          </script>
          <![endif]-->
          </head>

            Comment

            • Amanda H.
              #4
              Re: PHP Detects Browser, Then Replaces Images/Code/CSS

              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.

                Comment

                • Double Echo
                  #5
                  Re: PHP Detects Browser, Then Replaces Images/Code/CSS

                  Amanda H. wrote:[color=blue]
                  > 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.
                  >[/color]

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


                  -DE-

                    Comment

                    • Amanda H.
                      #6
                      Re: PHP Detects Browser, Then Replaces Images/Code/CSS

                      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.

                        Comment

                        • Double Echo
                          #7
                          Re: PHP Detects Browser, Then Replaces Images/Code/CSS

                          Double Echo wrote:[color=blue]
                          > Amanda H. wrote:[color=green]
                          >> 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.
                          >>[/color]
                          >
                          > Hmmmm.... puzzling... try putting it after the </head>
                          >
                          >
                          > -DE-
                          >[/color]

                          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.







                            Comment

                            • Justin Koivisto
                              #8
                              Re: PHP Detects Browser, Then Replaces Images/Code/CSS

                              Amanda H. wrote:[color=blue]
                              > 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.
                              >[/color]

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

                                Comment

                                • Double Echo
                                  #9
                                  Re: PHP Detects Browser, Then Replaces Images/Code/CSS

                                  Justin Koivisto wrote:[color=blue]
                                  > Amanda H. wrote:[color=green]
                                  >> 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.
                                  >>[/color]
                                  >
                                  > I may be a bit biased, but this is what I use:
                                  > http://koivi.com/ie-png-transparency/[/color]

                                  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.

                                    Comment

                                    Previous template Next
                                    Working...