By trantt on

My logo.png was render correctly in Fire Fox (since it is a transparency logo, the logo blend in perfectly with the header background) but it got a square and a different color around the logo when I was ran in IE. How do I fix this problem? Here is the link to the website that I’m supporting http://www.icevn.org

⋅ Categories: Drupal 4.6.x

Comments

redinkdesign’s picture

redinkdesign commented

http://homepage.ntlworld.com/bobosola/

http://homepage.ntlworld.com/bobosola/pnghowto.htm

works like a charm.

JohnnyMoney’s picture

JohnnyMoney commented

Thanks, that works well.
Only thing is that doesn't work when I go to the link of one of my page nodes (to see the complete content) and in some aras of the administration menu (this last one is unimportant).
Will have to look inside the code or use firebug to see if I can figure out why.

*****************************
Drupal Video Tutorials (Spanish)
www.drupalcarmen.com

naheemsays’s picture

naheemsays commented

Try the pngfix module - in the settings just specifiy what classes to act on and it works pretty well (for places with few transparencies).

capmex’s picture

capmex commented

Unfortunately, as far as I know, IE doesn't support transparency in png images. To overcome this without using javascript as ashwin suggested use a gif image.
--
Webmaster Resources | Canadian Directory

chx’s picture

chx commented

http://www.kevinfreitas.net/pro/articles/png-magic/

This is really magic :) and yes, IE support transparency in PNG -- 1bit. 8bit (aka alpha) transparency indeed does not work.
--
My developer blog. | The news is Now Public | Ask not what Drupal can do for you -- ask what you can do for Drupal.

--
Drupal development: making the world better, one patch at a time. | A bedroom without a teddy is like a face without a smile.

trantt’s picture

trantt commented

Thank you for your help guys. It works perfertly...

twoblackeyes’s picture

twoblackeyes commented

Where do you paste in the code for the include (method 2 on http://homepage.ntlworld.com/bobosola/pnghowto.htm)?

I'm guessing you put the include in /includes and then change src= to "includes/pngfix.js" but do you just paste the above into style.css for the theme as is? I'm new to coding CSS so any help would be appreciated.

PS I'm using semi-transparent PNG images as background files for nodes and blocks.

Thanks for the help guys.

redinkdesign’s picture

redinkdesign commented

You can put the .js file anywhere, just make sure you point to it correctly. If you're using phptemplate, add the code between your head tags on page.tpl.php.

www.redinkdesign.net

twoblackeyes’s picture

twoblackeyes commented

what if I'm using the core theme engine--where do I put it then? Just in the css file?

heine’s picture

heine commented

Put it in the head section of xtemplate.xtmpl (the one in your theme directory).

--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.

twoblackeyes’s picture

twoblackeyes commented

Actually, is there a more elegant way to do this with a straight php/css theme? I keep randomly getting this "cannot modify headers" php error, but usually a page refresh or a back-forward makes it go away.

heine’s picture

heine commented

I think that's an unrelated error.
--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.

twoblackeyes’s picture

twoblackeyes commented

I don't think so, it only started when I changed the chameleon.theme file. Error is this ('username'=my username):

Cannot modify header information - headers already sent by (output started at
/home/username/public_html/prototype/themes/chameleon/chameleon.theme:2) in /home/username/public_html/prototype/includes/common.inc on line 192

twoblackeyes’s picture

twoblackeyes commented

Also, the fix only seems to affect my site logo .png file; the 40% gray opaque .png background I have behind text nodes (assigned in style.css) don't get fixed. I don't know why that happens either...

redinkdesign’s picture

redinkdesign commented

I use it w/ a phptemplate theme and it fixes all .png's.

www.redinkdesign.net

heine’s picture

heine commented

Ok, I assumed you modified the default theme, bluemarine which uses the core theme engine.

Chameleon doesn't use a theme engine, probably the source of the confusion.
--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.

twoblackeyes’s picture

twoblackeyes commented

Ok, so I got rid of the headers error by adding in the call to the .js file as a part of the $output variable in chameleon.theme, so now it's in the HTML output of every page in the head section.

But, the fix only appears to work on images that have img tags in the HTML output. Those that are coded into the theme's style.css page, such as a background image for nodes, are not fixed. My .css node section looks like this:

.node .content {
	background-image: url(gray20.png);
	background-position: left;
	background-repeat: repeat;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
	border-top-style: none;
	border-width: 1px;
	clear: both;
	color: #d5d5d5;
	font-family: "Arial";
	font-size: 11pt;
	padding-left: 1em;

Any ideas? I'm totally stumped now. So frustrating that this functionality doesn't just exist in IE.