PNG fix for IE6
Designing and modifying templates (especially for Joomla) I am increasingly finding PNG’s incredibly useful because they maintain JPG quality but support transparency. Problem is (you guessed it), Internet Explorer 6 doesn’t like them. I overcome this by adding this line of CSS into my template’s HTML file’s <head></head> section – in this case a Joomla 1.5 template’s index.php file:
<!–[if lt IE 7]>
<style type=”text/css”>
img, div {
behavior: url(<?php echo JURI::base().”templates/”.$this->template; ?>/iepngfix.htc);
}
</style>
<![endif]–>
I have used this successfully on numerous sites. There are actually some Joomla plugins that achieve the same thing, however I prefer retaining manual control over these things right in the template. If IE6 gives a JavaScript popup warning about DIV elements, you can try to change the above by removing the DIV from the CSS code. Reload and see if the layout has been broken or not.
Enjoy this article?
Blogroll
- A List Apart – my profile
- Award-winning web design
- Design for Adoption
- my LinkedIn profile
- Twitter profile
Get E-mail Alerts
- new site: Interferometrics, Inc. http://t.co/FNJa8P8t
- new site: Virginia Martial Arts Academy http://t.co/jiSTMqZE
- Create and Update Content Without Programming Knowledge http://t.co/IFfTyiJd
- Google Checkout is now Google Wallet http://t.co/K8OVEmed
June 23rd, 2009 - 21:09
Pretty cool post. I just found your blog and wanted to say
that I’ve really liked browsing your blog posts. Any way
I’ll be subscribing to your blog and I hope you post again soon!