Transparent PNG's in IE? - MediaWiki-l - lists.wikimedia.org

List overview All Threads
Download

Transparent PNG's in IE?

Project Word2MediaWikiPlus

Edit pages problem in MediaWiki

Frederich, Eric P21322

19 Feb 2007 19 Feb '07

9:10 p.m.

I thought that transparency in PNG's wasn't supported in Internet Explorer yet the logo in the upper left of every page appears to be transparent letting that grey background through. How is this happening? Can the same method work with other PNGs placed inside pages? ~Eric

Reply

Show replies by date

Rob Church

19 Feb 19 Feb

9:16 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

On 19/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

How is this happening?

A JavaScript hack, I believe.

Can the same method work with other PNGs placed inside pages?

Tried to see? Rob Church

Reply

Frederich, Eric P21322

9:23 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

I was wondering if there was some one-time process that merged the background with the PNG to give it the appearance of being transparent or if it was being done on the fly. Normally I would be able to right click on the image in firefox and view the image or copy the source and be able to tell but for some reason I can't or Firefox can't figure it out and doesn't even treat it like an image. Anyway, I searched around a bit and found this.... http://www.cit.gu.edu.au/~anthony/wwwlab/pngtest/test2/ This seems nice because it works globally. If I wanted to include the following snippet on EVERY wiki page, where is the place to do it? I'm sure there is a place.  Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Rob Church Sent: Monday, February 19, 2007 4:16 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? On 19/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

How is this happening?

A JavaScript hack, I believe.

Can the same method work with other PNGs placed inside pages?

Tried to see? Rob Church _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l

Reply

Frederik Dohr

9:26 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

Normally I would be able to right click on the image in firefox and view the image or copy the source and be able to tell but for some reason I can't or Firefox can't figure it out and doesn't even treat it like an image.

That's because it's included as a CSS background-image instead of with an IMG tag. That *might* explain the perceived transparency as well, but I'm not sure about that. -- F.

Reply

Frederich, Eric P21322

10:10 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

For some reason with I put the following three lines in skins/MonoBook.php in the <head> section...  ... And have pngfix.js in the main wiki directory I get an "Error on page." message in the bottom of IE and no transparent images, yet if I view the source, save it as a .html and put it in the root of the wiki directory and browse to that as a html page it works fine without error? Any ideas here? Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 4:23 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? I was wondering if there was some one-time process that merged the background with the PNG to give it the appearance of being transparent or if it was being done on the fly. Normally I would be able to right click on the image in firefox and view the image or copy the source and be able to tell but for some reason I can't or Firefox can't figure it out and doesn't even treat it like an image. Anyway, I searched around a bit and found this.... http://www.cit.gu.edu.au/~anthony/wwwlab/pngtest/test2/ This seems nice because it works globally. If I wanted to include the following snippet on EVERY wiki page, where is the place to do it? I'm sure there is a place.  Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Rob Church Sent: Monday, February 19, 2007 4:16 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? On 19/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

How is this happening?

A JavaScript hack, I believe.

Can the same method work with other PNGs placed inside pages?

Tried to see? Rob Church _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l

Reply

Frederich, Eric P21322

20 Feb 20 Feb

2:50 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

Okay, I found the problem. It turned out to be a path issue. I had to change src="pngfix.js" to src="/wiki/pngfix.js". I'm guessing the reason why I could save the html generated from a page and place it in the root directory and have it work differently than what was generated dynamically was because the browser was treating http://example/wiki/index.php/Main_Page like it was up a directory from index.php. Kinda makes sense to me now. Anyway, I would suggest that this script be enabled by default in MediaWiki. http://homepage.ntlworld.com/bobosola/index.htm I found an example of a place it would make a difference in Wikipedia. http://pl.wikipedia.org/wiki/Strona_g%C5%82%C3%B3wna Look at the icons to the right of every heading. For example the books next to Portale. In IE the line doesn't go all the way behind but in Firefox or a browser that handles transparent PNGs correctly it does. I use the kind of blocks on the Main Page of the English Wikipedia and started putting icons on there. And since those aren't a white background, it makes an even bigger difference there. It looks rather nice. ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 5:10 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? For some reason with I put the following three lines in skins/MonoBook.php in the <head> section...  ... And have pngfix.js in the main wiki directory I get an "Error on page." message in the bottom of IE and no transparent images, yet if I view the source, save it as a .html and put it in the root of the wiki directory and browse to that as a html page it works fine without error? Any ideas here? Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 4:23 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? I was wondering if there was some one-time process that merged the background with the PNG to give it the appearance of being transparent or if it was being done on the fly. Normally I would be able to right click on the image in firefox and view the image or copy the source and be able to tell but for some reason I can't or Firefox can't figure it out and doesn't even treat it like an image. Anyway, I searched around a bit and found this.... http://www.cit.gu.edu.au/~anthony/wwwlab/pngtest/test2/ This seems nice because it works globally. If I wanted to include the following snippet on EVERY wiki page, where is the place to do it? I'm sure there is a place.  Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Rob Church Sent: Monday, February 19, 2007 4:16 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? On 19/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

How is this happening?

A JavaScript hack, I believe.

Can the same method work with other PNGs placed inside pages?

Tried to see? Rob Church _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l

Reply

Frederich, Eric P21322

3:30 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

Here is an example of it working on my Wiki. http://www.flickr.com/photos/92189026@N00/396517382/ Those colors should look familiar (same as the English WikiPedia main page). What would it take to get this into MediaWiki and enabled by default? ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Tuesday, February 20, 2007 9:51 AM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? Okay, I found the problem. It turned out to be a path issue. I had to change src="pngfix.js" to src="/wiki/pngfix.js". I'm guessing the reason why I could save the html generated from a page and place it in the root directory and have it work differently than what was generated dynamically was because the browser was treating http://example/wiki/index.php/Main_Page like it was up a directory from index.php. Kinda makes sense to me now. Anyway, I would suggest that this script be enabled by default in MediaWiki. http://homepage.ntlworld.com/bobosola/index.htm I found an example of a place it would make a difference in Wikipedia. http://pl.wikipedia.org/wiki/Strona_g%C5%82%C3%B3wna Look at the icons to the right of every heading. For example the books next to Portale. In IE the line doesn't go all the way behind but in Firefox or a browser that handles transparent PNGs correctly it does. I use the kind of blocks on the Main Page of the English Wikipedia and started putting icons on there. And since those aren't a white background, it makes an even bigger difference there. It looks rather nice. ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 5:10 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? For some reason with I put the following three lines in skins/MonoBook.php in the <head> section...  ... And have pngfix.js in the main wiki directory I get an "Error on page." message in the bottom of IE and no transparent images, yet if I view the source, save it as a .html and put it in the root of the wiki directory and browse to that as a html page it works fine without error? Any ideas here? Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 4:23 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? I was wondering if there was some one-time process that merged the background with the PNG to give it the appearance of being transparent or if it was being done on the fly. Normally I would be able to right click on the image in firefox and view the image or copy the source and be able to tell but for some reason I can't or Firefox can't figure it out and doesn't even treat it like an image. Anyway, I searched around a bit and found this.... http://www.cit.gu.edu.au/~anthony/wwwlab/pngtest/test2/ This seems nice because it works globally. If I wanted to include the following snippet on EVERY wiki page, where is the place to do it? I'm sure there is a place.  Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Rob Church Sent: Monday, February 19, 2007 4:16 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? On 19/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

How is this happening?

A JavaScript hack, I believe.

Can the same method work with other PNGs placed inside pages?

Tried to see? Rob Church _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l

Reply

Dominik Smatana

3:37 p.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

Hello, i am not sure, but "pngfix.js" is working only for <img> and "bgsleight.js" is working for css background images too... is it right? Or am i wrong? Thanks D.S. On 20/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

Here is an example of it working on my Wiki. http://www.flickr.com/photos/92189026@N00/396517382/ Those colors should look familiar (same as the English WikiPedia main page). What would it take to get this into MediaWiki and enabled by default? ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Tuesday, February 20, 2007 9:51 AM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? Okay, I found the problem. It turned out to be a path issue. I had to change src="pngfix.js" to src="/wiki/pngfix.js". I'm guessing the reason why I could save the html generated from a page and place it in the root directory and have it work differently than what was generated dynamically was because the browser was treating http://example/wiki/index.php/Main_Page like it was up a directory from index.php. Kinda makes sense to me now. Anyway, I would suggest that this script be enabled by default in MediaWiki. http://homepage.ntlworld.com/bobosola/index.htm I found an example of a place it would make a difference in Wikipedia. http://pl.wikipedia.org/wiki/Strona_g%C5%82%C3%B3wna Look at the icons to the right of every heading. For example the books next to Portale. In IE the line doesn't go all the way behind but in Firefox or a browser that handles transparent PNGs correctly it does. I use the kind of blocks on the Main Page of the English Wikipedia and started putting icons on there. And since those aren't a white background, it makes an even bigger difference there. It looks rather nice. ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 5:10 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? For some reason with I put the following three lines in skins/MonoBook.php in the <head> section...  ... And have pngfix.js in the main wiki directory I get an "Error on page." message in the bottom of IE and no transparent images, yet if I view the source, save it as a .html and put it in the root of the wiki directory and browse to that as a html page it works fine without error? Any ideas here? Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Frederich, Eric P21322 Sent: Monday, February 19, 2007 4:23 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? I was wondering if there was some one-time process that merged the background with the PNG to give it the appearance of being transparent or if it was being done on the fly. Normally I would be able to right click on the image in firefox and view the image or copy the source and be able to tell but for some reason I can't or Firefox can't figure it out and doesn't even treat it like an image. Anyway, I searched around a bit and found this.... http://www.cit.gu.edu.au/~anthony/wwwlab/pngtest/test2/ This seems nice because it works globally. If I wanted to include the following snippet on EVERY wiki page, where is the place to do it? I'm sure there is a place.  Thanks, ~Eric -----Original Message----- From: mediawiki-l-bounces(a)lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Rob Church Sent: Monday, February 19, 2007 4:16 PM To: MediaWiki announcements and site admin list Subject: Re: [Mediawiki-l] Transparent PNG's in IE? On 19/02/07, Frederich, Eric P21322 <eric.frederich(a)siemens.com> wrote:

How is this happening?

A JavaScript hack, I believe.

Can the same method work with other PNGs placed inside pages?

Tried to see? Rob Church _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org http://lists.wikimedia.org/mailman/listinfo/mediawiki-l

Reply

Jan

12:01 a.m.

New subject: [Mediawiki-l] Transparent PNG's in IE?

Frederich, Eric P21322 schrieb:

How is this happening?

AfaiR its a "new" feature of IE7.

Reply

6279

days inactive

6280

days old

mediawiki-l@lists.wikimedia.org

Manage subscription

8 comments

5 participants

tags (0)

participants (5)

Dominik Smatana
Frederich, Eric P21322
Frederik Dohr
Jan
Rob Church