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...

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...

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...

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

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...

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!