Comments on: Cross Browser PNG Transparency: Part 2 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/ Rob Larsen writes on entertainment, sports and culture. Wed, 10 Mar 2010 12:53:38 -0500 http://wordpress.org/?v=2.9.2 hourly 1 By: Gabriel de Kadt · Full alpha transparency for PNG images and CSS backgrounds in IE6. http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-19678 Gabriel de Kadt · Full alpha transparency for PNG images and CSS backgrounds in IE6. Sun, 10 May 2009 10:12:45 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-19678 [...] “Cross Browser PNG Transparency” from drunkenfist [...] [...] "Cross Browser PNG Transparency" from drunkenfist [...]

]]> By: rob http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-19526 rob Thu, 09 Apr 2009 00:00:20 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-19526 Madison, do you have an example page? And direct links to your CSS? Madison, do you have an example page?

And direct links to your CSS?

]]> By: Madison http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-19523 Madison Wed, 08 Apr 2009 21:37:36 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-19523 I used this and it works great for the first png in my page, but the other four it's not working on... Can you only do one? I doubt that. I've tried using a few different of these and none of them are working out like I would like. =( I used this and it works great for the first png in my page, but the other four it's not working on… Can you only do one? I doubt that.

I've tried using a few different of these and none of them are working out like I would like. =(

]]> By: Gabriel de Kadt http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18361 Gabriel de Kadt Fri, 06 Feb 2009 12:20:37 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18361 Hi Rob - Many thanks for getting back to me! Sorry I didn't make it clear before - but I had already set the sizing method to scale just as I think I should - ie everything the same as for the crop method - but changing the sizingMethod : <code> #page { background:url(); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_images/page-bg-test.png',sizingMethod='scale'); } </code> Without the filter this PNG repeats vertically fine - but with the grey background issue. Ultimately I'll knock up a version of that drop shadow without transparency - and not too many people will notice... Hi Rob – Many thanks for getting back to me! Sorry I didn't make it clear before – but I had already set the sizing method to scale just as I think I should – ie everything the same as for the crop method – but changing the sizingMethod :


#page {
background:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/_images/page-bg-test.png',sizingMethod='scale');
}

Without the filter this PNG repeats vertically fine – but with the grey background issue. Ultimately I'll knock up a version of that drop shadow without transparency – and not too many people will notice…

]]> By: rob http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18331 rob Thu, 05 Feb 2009 18:37:33 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18331 Gabriel. The trick with the sides is to use sizingMethod='scale' What that does is stretch the image to fill the container. In the case of the site you showed me, the width will remain stable and the image will stretch to fill the vertical space. Gabriel. The trick with the sides is to use sizingMethod='scale' What that does is stretch the image to fill the container. In the case of the site you showed me, the width will remain stable and the image will stretch to fill the vertical space.

]]> By: rob http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18284 rob Wed, 04 Feb 2009 19:57:06 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18284 hey. I'll take a look tonight and let you know if anything rings any bells. hey. I'll take a look tonight and let you know if anything rings any bells.

]]> By: Gabriel de Kadt http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18281 Gabriel de Kadt Wed, 04 Feb 2009 17:56:40 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-18281 Hi Rob, Many thanks for this wonderful write-up on how to kill the dreaded grey box. I've been using your solution for background images for a while now - it is the only truly usable solution that I've found. I've tried to do my bit to spread the word! Today I've tried it for a drop shadow effect on and can't get the little beggar to scale vertically. The site in question is dccproperty.com. You'll notice the shadow at the foot of the page works just fine - as do a couple of other PNGs scattered through there but these are using the crop method. Flummoxed... any help or suggestions greatly appreciated! Hi Rob,

Many thanks for this wonderful write-up on how to kill the dreaded grey box. I've been using your solution for background images for a while now – it is the only truly usable solution that I've found. I've tried to do my bit to spread the word!

Today I've tried it for a drop shadow effect on and can't get the little beggar to scale vertically. The site in question is dccproperty.com. You'll notice the shadow at the foot of the page works just fine – as do a couple of other PNGs scattered through there but these are using the crop method. Flummoxed… any help or suggestions greatly appreciated!

]]> By: rob http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-17580 rob Thu, 15 Jan 2009 16:41:10 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-17580 It's actually Wordpress that's to blame. I don't use Word to edit blog posts (or any web text, for that matter), but that doesn't save me from WordPress' own text fomatting "feature." I'll need to look into a plugin that shuts off that formatting to properly fix the post. It's actually Wordpress that's to blame. I don't use Word to edit blog posts (or any web text, for that matter), but that doesn't save me from WordPress' own text fomatting "feature." I'll need to look into a plugin that shuts off that formatting to properly fix the post.

]]> By: Jon http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-17579 Jon Thu, 15 Jan 2009 16:34:04 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-17579 As Julie says, there is a typo in the conditional comment code. But, the last [endif] is not missing a hyphen, rather, it has an ndash where two hyphens were meant to be. Methings MS AutoCorrect strikes again! As Julie says, there is a typo in the conditional comment code. But, the last [endif] is not missing a hyphen, rather, it has an ndash where two hyphens were meant to be. Methings MS AutoCorrect strikes again!

]]> By: Graphics File Format « Muhammadfauzie’s Blog http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-17459 Graphics File Format « Muhammadfauzie’s Blog Sun, 04 Jan 2009 06:02:43 +0000 http://www.drunkenfist.com/304/2007/04/04/cross-browser-png-transparency-part-2/#comment-17459 [...] Cross Browser PNG Transparency (CSS) [...] [...] Cross Browser PNG Transparency (CSS) [...]

]]>