[WSG] PNG in IE6

2008-02-21 Thread Amrinder 
Hi

I looked for the working of .png image in internet explorer and found two 
articles. 
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://www.alistapart.com/articles/pngopacity
I tried using 'filter' according to both these articles but can't got a way.  
Following is the HTML code: 
div id=mlogo
div id=extradiv1/div !-- Empty div to display logo-- 
img src=images/logo_header.gif height=54 width=379 alt=A way back - 
logo/
div id=extradiv2/div
/div

The css code for #extradiv1 is:

#extradiv1 {
 background-image: url(../images/logo.gif);
 background-attachment: scroll;
 background-repeat: no-repeat;
 background-position: center top;
 position:relative;
 height: 129px;
 width: 120px;
 filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/logo.png', 
sizingMethod='scale');
 margin: 0 auto;
}

Please help. 

Kind Regards,
Amrinder www.awayback.com 

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] PNG in IE6

2008-02-21 Thread Matt Fellows 
If you have Adobe CS, you can try exporting the PNG image as PNG-8.

Cheers,

Matt
http://www.onegeek. http://www.onegeek.com.aucom.auhttp://www.onegeek.com.au


On 2/21/08, Amrinder [EMAIL PROTECTED] wrote:


 Hi

 I looked for the working of .png image in internet explorer and found two
 articles.
 http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
 http://www.alistapart.com/articles/pngopacity
 I tried using 'filter' according to both these articles but can't got a
way.

 Following is the HTML code:
 div id=mlogo
 div id=extradiv1/div !-- Empty div to display logo--
 img src=images/logo_header.gif height=54 width=379 alt=A way
 back - logo/
 div id=extradiv2/div
 /div

 The css code for #extradiv1 is:

 #extradiv1 {
  background-image: url(../images/logo.gif);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: center top;
  position:relative;
  height: 129px;
  width: 120px;
  filter:
 progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='../image/logo.png',
 sizingMethod='scale');
  margin: 0 auto;
 }

 Please help.

 Kind Regards,
 Amrinder www.awayback.com
 ***
 List Guidelines:
 http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe:
 http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: [EMAIL PROTECTED]
 ***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] PNG in IE6

2008-02-21 Thread Svip 
My preferred method is shrugging at the IE6 users and just let them
see their own browser rendering PNGs as ugly as it can.

/Svip

On 21/02/2008, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:



 Good time of day.




 1. Your mistake:

 Addressing in Filter is from your html, not from your css.




 2. Ordinary way to support png, in my practice, is next:




 With hack:




 css/element.css

 css/element_ie.css

 images/logo.png

 index.html




 index.html:

 --

 link rel=stylesheet href=css/element.css type=text/css/

 ...

 div id=mlogo

 div id=extradiv1/div

 img src=images/logo_header.gif height=54 width=379 alt=A way
 back - logo/

 div id=extradiv2/div

 /div




 element.css

 ---

 #extradiv1{

  background-image: url(../images/logo.png);

  background-attachment: scroll;

  background-repeat: no-repeat;

  background-position: center top;

  position:relative;

  height: 129px;

  width: 120px;

  margin: 0 auto;

 }




 * html #extradiv1{

 background: none;

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png',
 sizingMethod='scale');

 }




 Without hack:




 css/element.css

 css/element_ie.css

 images/logo.png

 index.html




 index.html:

 --

 link rel=stylesheet href=css/element.css type=text/css/

 !--[if IE 6]

 link rel=stylesheet href=css/element_ie.css
 type=text/css/

 ![endif]--

 ...

 div id=mlogo

 div id=extradiv1/div

 img src=images/logo_header.gif height=54 width=379 alt=A way
 back - logo/

 div id=extradiv2/div

 /div




 element.css

 ---

 #extradiv1{

  background-image: url(../images/logo.png);

  background-attachment: scroll;

  background-repeat: no-repeat;

  background-position: center top;

  position:relative;

  height: 129px;

  width: 120px;

  margin: 0 auto;

 }




 element_ie.css

 

 #extradiv1{

 background: none;

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png',
 sizingMethod='scale');

 }







 This should work.




 __




 Raven. Night folk studio.

 http://nightfolk.net/

 ***
 List Guidelines:
 http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe:
 http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: [EMAIL PROTECTED]
 ***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] PNG in IE6

2008-02-21 Thread kevin mcmonagle 
If its not a repeating background this is the easiest way to get png 
support:


http://www.twinhelix.com/css/iepngfix/

-best
kevin



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] PNG in IE6

2008-02-21 Thread Tim Palac 
Why not just use http://dean.edwards.name/IE7/ as the plugin to display your
PNG?  That way, if people are using IE6 with Javascript enabled, you can add
png functionality, advanced CSS support, etc. I know Eric Meyer personally
endorses this method (well at least he did at An Event Apart) and I've used
it before with much success.

Tim
AIM: TymArtist
http://www.timpalac.com

On Thu, Feb 21, 2008 at 4:07 AM, Amrinder [EMAIL PROTECTED]
wrote:

  Hi

 I looked for the working of .png image in internet explorer and found two
 articles.
 http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
 http://www.alistapart.com/articles/pngopacity
 I tried using *'filter' *according to both these articles but can't got a
 way.
 Following is the HTML code:
 div id=mlogo
 div id=extradiv1/div !-- Empty div to display logo--
 img src=images/logo_header.gif height=54 width=379 alt=A way
 back - logo/
 div id=extradiv2/div
 /div

 The css code for #extradiv1 is:

 #extradiv1 {
  background-image: url(../images/logo.gif);
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: center top;
  position:relative;
  height: 129px;
  width: 120px;
  filter: 
 progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../image/logo.png',
 sizingMethod='scale');
  margin: 0 auto;
 }

 Please help.

 Kind Regards,
 Amrinder www.awayback.com

 ***
 List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
 Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
 Help: [EMAIL PROTECTED]
 ***


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] PNG in IE6

2008-02-21 Thread David Hucklesby 
On Thu, 21 Feb 2008 09:30:08 -0600, Tim Palac wrote:

 Why not just use http://dean.edwards.name/IE7/ as the plugin to display your 
 PNG?  That
 way, if people are using IE6 with Javascript enabled, you can add png 
 functionality,
 advanced CSS support, etc. I know Eric Meyer personally endorses this method 
 (well at
 least he did at An Event Apart) and I've used it before with much success.


Good solution.

Dean has just updated IE7.js to conform to the real IE 7, which
should save us all a ton of grief:

 http://dean.edwards.name/weblog/2008/01/ie7-2/

Then there is IE8.js ...

 http://code.google.com/p/ie7-js/

Cordially,
David
--



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re[2]: [WSG] PNG in IE6

2008-02-21 Thread raven 
Hi all.

 Good solution.
Is this a good practice and good idea to use active component (i mean
js) where passive (css) could be used?

Is using library, which you don't write by you own (and, perhaps, don't
fully understand), which contain redundant potential, a good idea?

Is not using css fork (conditional comment for ie) is better solution?
Don't understand me wrong.
I interested in finding and using best solution also.
And now i am using conditional comment's to solve IE problem.
Where is the trick with them?

__

Raven.
nightfolk.net



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] PNG in IE6

2008-02-21 Thread Tim MacKay 
I wholeheartedly second this suggestion. This solution works brilliantly. As KM 
wrote below:

http://www.twinhelix.com/css/iepngfix/

I originally found it via this site which has a friendly introduction to the 
concept:

http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

One problem you will encounter is that if a link is placed over something that 
uses this filter as a background image the link will be inactive. There is a 
solution here: http://www.satzansatz.de/cssd/tmp/alphatransparency.html (start 
at 'Problem: Link's don't work').

Cheers,

Tim


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of kevin mcmonagle
Sent: Friday, 22 February 2008 2:17 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] PNG in IE6

If its not a repeating background this is the easiest way to get png 
support:

http://www.twinhelix.com/css/iepngfix/

-best
kevin



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***