IE PNG fixes reviews (used with Drupal 7)

Trying to see my pretty PNG images in IE6, which is still owning about 13% of the Internet browsing market in my country (according to

StatCounter website), although it's going down as you can see in the graph, and from a universal scope it is now only 5% or less (according to the same website) or 12% at most (citing The official IE6 countdown website.) which is the highest percent to be seen for IE6 among all famous stats websites (If you like research, have a look at this Wikipedia page)

But anyway, I started the quest for the perfect IE PNG fix ...
First, the rules :-

  • I will try to get to the point directly and start with the results so that if it doesn't appeal to you, just skip the whole solution and see the next one.
  • As you may know I use Drupal, but I'll consider both conditions with and without Drupal.
  • I intend to do some test cases and show the results, but it may take some time, so right now, these written results are all what I have.
TwinHelix IE PNG Fix
  • Results :-
    This is a nice candidate, if you want to try just one or two you can try this and the last one (DD_belatedPNG)
    • IMG tags : Worked fine
    • Background images(no repeat, no positioning) : the background image had borders drawn if the element has CSS borders.
    • Repeated background images : Repeated but had some issues if padding or margin has a value other than zero and if the element has borders then each instance of the background image will have the same kind of borders.
    • Positioned background images : Well positioned but also had some issues if padding or margin has a value other than zero, and the same border issue exists.
    • Performance : Oh No .. too much time to load (easily guessed if you see that there is about 10KB javascript code)
  • Usage :-
    Well, this was the first one I found, easily applied as found in their documentation page but if you don't have time to follow the link, here is a quick guide:-
    1. Copy iepngfix.htc and blank.gif into your website folder. (for Drupal this can be your theme folder or any subfolder of it)
    2. Put the style rule for all needed elements using css selectors like this :-
      img, #header .section, #sidebar-first .block .content, #content, .region-content {
      behavior: url(iepngfix.htc);
      }

      The url is relative to the html document, not the css file (so for Drupal you may need to make it an absolute url, so if you have Drupal installed in a subfolder from your document root you may put something like this in the url "/drupal7/sites/all/themes/mytheme/iepngfix.htc" supposing you installed drupal in "/drupal7" where "/" is the document root)

    3. For background image repeat and position to work you need to add a script to the head of each html document as follows :-
      <script type="text/javascript" src="iepngfix_tilebg.js"></script>

      For Drupal : this can be done

      • Using your theme's .info file by adding a line like this (supposing you have the js file in your theme's base folder) :-
        scripts[] = iepngfix_tilebg.js
      • Or using template.php file in mytheme_preprocess_html() by adding a line like this :-
        <?php
        drupal_add_js
        (path_to_theme().'/iepngfix_tilebg.js');
        ?>

Unit PNG Fix
  • Results :-
    • IMG tags : Worked fine
    • Background images(no repeat, no positioning) : Worked fine
    • Repeated background images : Scaled to fit the whole element
    • Positioned background images : Not positioned, background-position seems useless
    • Performance : Great (loaded in almost no time, very small js file)
  • Usage :-
    This was even easier than the previous one, as described in their website, just three easy steps
    1. Copy unitpngfix.js to your website folder(For Drupal can be theme folder) and clear.gif to the same or your images folder.
    2. Edit the first line of unitpngfix.js to the absolute path of clear.gif (relative to the server's document root)
    3. Now add the script to your html documents like this :-
      <!--[if lt IE 7]>
              <script type="text/javascript" src="unitpngfix.js"></script>
      <![endif]-->

      For Drupal 7 the only way I know for this is adding this to template.php in mytheme_preprocess_html() (or in a module) as follows :-

      <?php
      $forie
      = array(
       
      '#type' => 'markup',
       
      '#markup' => '&lt;!--[if lt IE 7]&gt;&lt;script language="javascript" type="text/javascript" src="'.path_to_theme().'/unitpngfix.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;',
      );
      drupal_add_html_head($forie, 'yourthemename');
      ?>

      Credits goes to attiks in this comment in Drupal API website

jquery.pngFix.js
  • Results :-
    • IMG tags : Worked fine
    • Background images(no repeat, no positioning) : Scaled if the element has a defined height, otherwise no background image is shown
    • Repeated background images : Scaled if the element has a defined height, otherwise no background image is shown
    • Positioned background images : Scaled if the element has a defined height, otherwise no background image is shown
    • Performance : Good, almost no delays although there is too much code, JQuery makes it seem as if there is almost not.
  • Usage :-
    As told in Its Official Website There are three steps :
    1. Copy the two files (jquery.js,or any variant, and jquery.pngfix.js) to your website folder (theme folder for Drupal)
    2. Add the two scripts
      <script type="text/javascript" src="jquery-latest.pack.js"></script>
      <script type="text/javascript" src="jquery.pngFix.js"></script>
    3. Add some javascript code to html head (to activate the script)
      <script type="text/javascript">
          $(document).ready(function(){
              $(document).pngFix();
          });
      </script>

      For Drupal the last two steps can be done in mytheme_preprocess_html() using drupal_add_js() as a code (or as a file).

DD_belatedPNG
  • Results :-
    This seems to be the best solution, but to be sure I may need your results too.
    • IMG tags : Worked fine (In older Windows versions or not updated ones, the image just disappears)
    • Background images(no repeat, no positioning) : Worked fine (image croped in some cases)
    • Repeated background images : Worked fine (images croped in some cases)
    • Positioned background images : Worked fine (images croped in some cases)
    • Performance : Not bad, but can't tell specifically. (Due to some technical issues with the testing process)

    In some tests all the images just disappeared, this may have happened due to a technical problem, but I thought I should mention it anyway. But, in the main and important tests things went as described above.

  • Usage :-
    Same thing, they have a usage note In the official Website, and also three steps :
    1. Copy the files (DD_belatedPNG_0.0.8a-min.js, or DD_belatedPNG_0.0.8a.js) to your website folder (theme folder for Drupal)
    2. Add the script to your html head
      <script type="text/javascript" src="DD_belatedPNG_0.0.8a.js"></script>
    3. Add some javascript code to html head (to activate the script)
      <!--[if lt IE 7]>
      <script type="text/javascript">
              DD_belatedPNG.fix('img, .png');
      </script>
      <![endif]-->

      For Drupal the last two steps can be done in mytheme_preprocess_html() using drupal_add_js() as a code (or as a file).

      Here is a detailed explanation on how to do that (Added after Danny's comment) :

      Edit this code to fit your case (this includes the css selectors, your theme name, and maybe the javascript file name), and then add it to template.php file in your theme's Directory at the end of yourthemename_preprocess_html()

      <?php
        $forie
      = array(
         
      '#type' => 'markup',
         
      '#markup' => '<!--[if lt IE 7]><script type="text/javascript" src="'.path_to_theme().'/DD_belatedPNG_0.0.8a-min.js"></script><script>DD_belatedPNG.fix("img, #sidebar-first, #sidebar-first .section, #block-system-main .content, input.form-submit, a.button");</script><![endif]-->',
      );

       

      drupal_add_html_head($forie, 'yourthemename');
      ?>

Comments

Many thanks for this

Many thanks for this articles! it helped me.
O.

Sticky sidebar

And, out of interest, how did you get the folders on the right of your to act like a sticky sidebar??? Impressed.

About the sticky sidebar

Sorry for the delay, I used a jQuery plugin called Scroll Follow along with a Drupal module called JQ

After you install the JQ Drupal module, you need to put the js file in sites/all/plugins and then activate it from the the Drupal administration interface yourdomain.com/admin/settings/jq

I suggest you read all the examples in the home page of Scroll Follow before deciding the suitable code, and finally you will put your javascript code to wherever you find best (for Drupal 6, your theme's script.js is good enough. For 7, you need to mention script.js or any other theme script in the .info file of your theme)

mytheme_preprocess_html() and drupal_add_js()

For DD_belatedPNG could you please explain further how to implement this is drupal 7 using mytheme_preprocess_html() using drupal_add_js() and I'd be forever grateful!

Thanks,

Danny

DD_belatedPNG further explanation

Sorry again for the delay, I added some more explanation at the end of the article, please tell me if there is anything more I can do to help.

Archive
Web
Linux