Help with PNG IE6 issue

richieboy · 20 Feb 2008 at 13:44

I recently started using DokuWiki with the Monobook template and am having some problems with my PNG logo in the top right. Every time a page loads it will be non-transparent/grey where it should be transparent for a few seconds until the page finishes loading.

I'm using IE6 (have to be, im afraid) and know there is an issue with PNG transparency but wasn't sure if this is the same thing. The site is here:

http://www.richl.com/gpt/ooold/

If you refresh the page or move to a different page etc i see this for a few seconds until the page finishes loading:

After which it looks normal, like this:

Can anyone help?

Edit: by the way, i tried the PNG transparency JS fix but it didn't make any difference for me. I assumed this wasn't the issue as the PNG's aren't always not transparent...just until the page finishes loading! I know it can be done as for some reason the MediaWiki install with Monobook template and my same little logo works perfectly. I used the same HTML from Mediawiki but didn't have any luck so assume there must be more to it than that...

Tripnologist · 20 Feb 2008 at 14:04

It goes transparent on load as that's when the script executes.

If you've copied the script, you've probably got something wrong and/or are missing the transparent .gif.

I can upload the one I use if you want. It works for img tags and css backgrounds (provided the background isn't tiled) and is controlled with css.

unwashed potato! · 20 Feb 2008 at 14:06

haven't bothered reading the whole thread so sorry if you know this but ie6 doesn't support png, it does however use gif but they aern't as good. if the image will never be moving from that backgound you could just screen shot it where it is and then use a jpg

Tripnologist · 20 Feb 2008 at 14:15

Ahh, I found the website I got it from.

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

richieboy · 20 Feb 2008 at 14:34

Tripnologist said:
It goes transparent on load as that's when the script executes.

If you've copied the script, you've probably got something wrong and/or are missing the transparent .gif.

I can upload the one I use if you want. It works for img tags and css backgrounds (provided the background isn't tiled) and is controlled with css.

Everything you see is straight from the original templates, the only thing i have modified is the image. I have had a look through to see if i can find what it is that is making it transparent on load as it seems to keep overriding anything else i do (e.g. using the method in your last response), there are so many different style sheets for the template i have no idea where to look!

Edit: here is the original author's page with more details on the template, and all of his pages using the template show the same problem as mine in IE6! Would someone mind taking a look at the template files from his site and seeing what's up?

richieboy · 20 Feb 2008 at 17:12

If anybody has time to look into this for me it appears to happen only with the Monobook theme applied, all the files for the theme can be downloaded from here and i would hugely appreciate any help.

richieboy · 20 Feb 2008 at 21:52

Come on, somebody must know the answer - you guys are freaking lovely clever people...you know you want to try and help...

unwashed potato! · 20 Feb 2008 at 22:41

im a little confused here as afaik transparency in images that are pngs don't work with ie6, unless of course you are using some js to get it to work? are you?

if so this may be the problem as the page will load, the png won't be transparent in ie, this is then shown to the user, and then javascript will be carried out, making the png transparent and then showing this new effect to the user.

perhaps the problem is that the image is styled in the html and not the stylesheet, can't see why but maybe with the way you have got ie6 to display transparent pngs, try changing the styling to the stylehseet and see if it works.

have you thought about my suggestion in my first post about screenshotting the correct image and then just using a jpeg?

richieboy · 20 Feb 2008 at 23:02

Mammalian said:
im a little confused here as afaik transparency in images that are pngs don't work with ie6, unless of course you are using some js to get it to work? are you?

I'm not 100% sure i'm afraid as i didn't put any of it together, i just downloaded the template. I have had a good look through and found an IEfixes.js file (if you download the template files using the link i posted above you can see it) that contains some PNG transparency stuff...but when i renamed the file it didn't seem to make a difference! I know it must be do-able properly as i tried a completely different template/wiki system (Monobook template for MediaWiki, not ported to Dokuwiki) and it displays the PNG logo perfectly in IE6.

For example, if you compare these two in IE6:
This one works perfectly
But this one, which uses the template i am using...doesn't!

Mammalian said:
have you thought about my suggestion in my first post about screenshotting the correct image and then just using a jpeg?

That's a good point that i overlooked, if i don't get any further getting the PNG transparency to work properly i'll give that a try. Although i'd like to try and sort the PNG issue if possible...

Tripnologist · 20 Feb 2008 at 23:12

I dunno, in the example of the one you say doesn't work, it works fine for me in IE6.

richieboy · 20 Feb 2008 at 23:39

Have tried it on a few different machines running IE6 and had the same problem, it can however only be "non-transparent" for a second or less until the page has finished loading, but is really annoying and noticable! Especially as the Wiki i am using it on is very plain/white/light and so a large grey square flashing up everytime you navigate between pages is really getting on my moobs

unwashed potato! · 20 Feb 2008 at 23:42

Tripnologist said:
I dunno, in the example of the one you say doesn't work, it works fine for me in IE6.

i think this is just because the server is much faster and gets the site to you quicker, meaning if js is used to make the png workl that it is done before you even can load it, if that makes sense. i have viewed the image in ie6 and it has a very faint grey background.

richieboy · 20 Feb 2008 at 23:43

Mammalian said:
perhaps the problem is that the image is styled in the html and not the stylesheet, can't see why but maybe with the way you have got ie6 to display transparent pngs, try changing the styling to the stylehseet and see if it works.

Did try this with no luck unfortunately, but i did notice that the other templates that do work, here for example, uses:

Code:

	<div class="portlet" id="p-logo">
		<a style="background-image: url(http://upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png);" href="/wiki/MediaWiki" title="Visit the Main Page [z]" accesskey="z"></a>
	</div>

And that one seems to work ok...

unwashed potato! · 20 Feb 2008 at 23:53

you're lucky atm as i should be doing my work but you are distracting me.

afaik it is js that is fixing the transparency, using the function fixalpha() on the iefixes.js

it does it by looking for the p-logo class and not the image itself which will be why the image name can change but the effect still happen. what you basically need to do is find out how to make it so the javascript function fixaplha() is loaded whilst the rest is still loaded and not after as that is why you get a quick flash of the transparency not working.

i haven't looked into this before so maybe someone else can help with getting it to load first or a good google session is in order.

good luck

robmiller · 21 Feb 2008 at 02:38

You either need to execute your code when the DOM is loaded but before it's rendered (which might not even fix the issue), or just put up with the tiny flash on a browser that's becoming increasingly irrelevant. I know which I'd do.

richieboy · 21 Feb 2008 at 09:17

Thanks for your help chaps, unfortunately i gave up in the end and did Mammalian's suggestion of screenshotting and JPEG'n...works a treat!