WordPress › Support » how to fix PNG transparency problem in IE?

t-p
Member
Posted 2 years ago #

Hi all,
I am using Kubrik.
I have linked my own sitelogo (transparent) in the header.

It works fine in IE8 and FF, Safari.... But it does not in IE6 (perhaps in other versions of IE too!)

I spent about a week to fix this transparency issue in IE. I tried everything I found in google search and this forum search.

But nothing seems to work properly. Owing to my limited knowledge, perhaps I am not applying the fix properly.

Can someone kindly please guide me step-by step how to fix this issue? I can follow step-by-step instructions written in a layman's terms.

Thank you in advance. tara
esmi
Theme Diva & Forum Moderator
Posted 2 years ago #

You can't "fix" the PNG transparency problems that IE7 and earlier versions suffer from. The problem lies in the browser itself. The best you can do is to provide an alternative logo image as non-transparent jpg or a transparent gif file via conditional comment CSS.
t-p
Member
Posted 2 years ago #

Thanks esmi so much for your straightforward answer.

I am so glad that you replied to my post!

The best you can do is to provide an alternative logo image as non-transparent jpg or a transparent gif file via conditional comment CSS.

I also read that page a few times. But I could not figure out how to use it in my situation.

I do have an alternative logo image as non-transparent jpg or a transparent gif I can use.

Say I use the following condition, now where can I specify the alternate logo?



Thanks again esmi. tara
Mark / t31os
Moderator
Posted 2 years ago #

There are javascripts that fix transparency for IE, just to chuck it in as a suggestion.

Here's a jQuery version.
http://plugins.jquery.com/project/iepngfix

Other options for the same.
http://www.google.co.uk/search?q=ie+png+fix
t-p
Member
Posted 2 years ago #

Thanks t31os,

I appreciate your time and help.

I tried all those fixes but could not make 'em to work.

I like esmi's suggestion. But I don't know how to apply it properly.

In Kubrik theme's header file, tried the following but did not work.

<div id="header" role="banner">
<div id="headerimg">
<h1>/">
<img src="http://MYSITE.com/images/gur_roglogo-trans.png" width="256" height="100" title="Blog Home" alt=""/>

<?php bloginfo('name'); ?></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

Iam sure I am doing it roght. Please guide. Thanks
Mark / t31os
Moderator
Posted 2 years ago #

Are you checking in IE, since the IE code will only run for IE.. other browsers will ignore it..

More info/examples on those IE conditions here.
http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
t-p
Member
Posted 2 years ago #

Thanks t310s,

Are you checking in IE, since the IE code will only run for IE..

Yes.

More info/examples on those IE conditions here.
http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

Thanks for the guidance. I read that page a few times over the last few days.

This is my latest attempt(header.php):

</head>
<body <?php body_class(); ?>>
<div id="page">

<div id="header" role="banner">
<div id="headerimg">
<h1>/">


<?php bloginfo('name'); ?></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

Results: (1) in IE8, no problem using transparent.png
(2) in IE6, transparent.gif looks pretty bad (not clear)

any suggestions please. Thanks.
Mark / t31os
Moderator
Posted 2 years ago #

Well what exactly is it that isn't working? I'm not sure i understand what it is you want help with.
Elio Rivero
Member
Posted 2 years ago #

Use the iepngfix behaviour, one of the best solutions out there.
http://www.twinhelix.com/css/iepngfix/
t-p
Member
Posted 2 years ago #

thanks guys.

t31os: Well what exactly is it that isn't working? I'm not sure i understand what it is you want help with.

The image looks pretty crummy. Also is this correct modification in header.php the way I did?

ilovecolors:Use the iepngfix behaviour, one of the best solutions out there.http://www.twinhelix.com/css/iepngfix/

I spent several hours on it yesterday and finally gave up. I just don't know with what and where the header.php need to modoified?

If you can please guide me WHERE I need to insert WHAT in header.php to make iepngfix work. I will really appreciate. Thanks.
Mark / t31os
Moderator
Posted 2 years ago #

Well firstly decide which approach you want to take, the javascript solution, the gif replacement solution and/or the IE conditionals solution.

The link posted by ilovecolors has an easy to follow example here.
http://www.twinhelix.com/css/iepngfix/demo/

If the script solution is beyond you, then it might be easier to forget that approach and focus on the IE conditional statements, but please do decide which one you want to use and i'll help you with it.

NOTE: The gif will naturally look worse then the PNG, it's a matter of choosing the right matt colour to suit the background the image will sit over, if you choose an appropriate matt colour it will blend much better. Gifs can't support what's know as Alpha transparency which means you choose a colour to use in the semi-transparent areas (or a matt layer if you like), this given colour needs to be something that will blend with the underlying image/background, else you'll notice it (default is white if one is not set i believe).
t-p
Member
Posted 2 years ago #

I got it. Thanks to all of you for your patient and guidance.
Great help!

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] how to fix PNG transparency problem in IE? (12 posts)

Topic Closed

About this Topic

Tags

Code is Poetry