May 2nd 2008 01:43 pm
The quickest CSS and PNG alpha transparency fix for IE (internet explorer)
Step 1 - hack in the CSS file
Add this at the beginning of the css file:
div { display: inline-block; } div { display: block; }
Step 2 - installing ie7-js fix
Download ie7-js and extract the following files: blank.gif, ie7-recalc.js, ie7-squish.js and IE7.js to the YOUR_APP/js/ie-fix (for example).
Step 3 - adding conditional comments
In the head section of your page, add something like this:
<!--[if lt IE 7]> <script src="/YOUR_CONTEXT/js/ie-fix/IE7.js" type="text/javascript"></script> <![endif]-->
Step 4 - renaming PNG images
Add the -trans suffix to all PNG images because the script only fixes images named: *-trans.png.
If you enjoyed this post, make sure you subscribe to my RSS feed!
4 Comments »
Edd Couchman on 03 May 2008 at 10:55 am #
What does step 1 achieve? It looks like it goes round in circles a bit.
vpetreski on 03 May 2008 at 11:51 am #
Setting display: inline-block and then reverting it back to the original display property value inside another rule set does not remove layout. This trick can be used to give layout without the use of conditional comments when you can’t use other properties.
See http://www.haslayout.net/haslayout for more details.
Justin on 03 May 2008 at 5:04 pm #
Doesn’t work for transparent png’s set to backgrounds using CSS. See http://dev.akeenlabs.com/research/transparent_pngs/comeSolveGo_fix.html for example. If I’m using it wrong please let me know.
vpetreski on 03 May 2008 at 5:13 pm #
Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.