Cross-browser Absolute Positioning PNGs

With the new Web look spreading through every site new and old, there are a lot of times when you want to use absolutely positioned pngs on your site.

The 2 problems we face. The first one is that the PNG format is not fully supported on all browsers that are in use today. The way we handle that is with a simple include into the main template file of your site.

Here is where you can get the javascript fileĀ click here.

Include this file into the header of your main template file:

<!--[if lt IE 7]>
        <script type="text/javascript"
        src="/resources/unitpngfix/unitpngfix.js"></script>
<![endif]-->

This is a hack to tell the browser to include the”unitpngfix.js” file if the browser is IE 7 or below.

The next problem is that IE positions things differently. We will be using a similar hack to go around this problem. Here is how the code will look.


<!-- Floating image -->

<!--[if lt IE 7]>
  <div style="position:relative; margin-left:-800px; margin-top:0px;">
<![endif]--> 

  <div style="position:relative; margin-left:0px; ">
  <div style="position:absolute; clear:left; left: -50px; top: -59px;
  margin-left:0px;">
  <img src="yourimage.png" width="332"
  height="178" style="clear:left;" />
  </div>
    </div>

<!--[if lt IE 7]>
  </div>
<![endif]-->

All you have to do is add your image path and then change the values in the “left” and “top” to adjust the position of the image. You will have to adjust the values in the “if It IE 7” section while looking at the image in Internet Explorer 6 or 7.

I hope this helps anyone who is having trouble with absolutely placing PNG images for cross browser compatibility.

Leave a Reply

Your email address will not be published.