By DarrinRich on

I basically only have two transparent pngs on the the site. Here is the method I used.

I place the folowing code in the head of the page.tpl.php file

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/png_fix/pngfix.js"></script>
<![endif]-->

Then uploaded the pngfix.jsfile.

When I was at a pc that used IE there wasnt any change. I made sure the path was correct so I know thats not the issue. What do you think could be wrong?

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

clear you machines cache ? and the DB cache tables ?

where did you upload the .js file ? yourtheme/png_fix/.jsfile ?

is the .js file showing at the top of your page, when you view source ?

DarrinRich’s picture

DarrinRich commented

I cleard the machines cache. Not sure how to go about clearing the DB cache. Do I just select "cache" in mysql gui and then choose "empty"?

I uploaded the pngfix.js file inside a folder called png_fix which is in my root directory.

Yes. When viewing the source code the site, on top it shows:

 <!--[if lt IE 7.]>
		<script defer type="text/javascript" src="/png_fix/pngfix.js"></script>
		<![endif]-->

.

Steven’s picture

Steven commented

I've never seen the version specified as "7.", only as "7" or as a full decimal number (e.g. 5.5000). I remember reading about IE being picky with this syntax, and treating it as a regular comment (i.e. ignoring it) if there was something wrong.

--
If you have a problem, please search before posting a question.

DarrinRich’s picture

DarrinRich commented

I will remove the "." after the 7 and see if that makes a difference.

DarrinRich’s picture

DarrinRich commented

Tested it and still doesnt work. Any other thoughts?

vm’s picture

vm commented

are you recieving a javascript error of any sort ?

have you tried using firebug ? to debug ?

DarrinRich’s picture

DarrinRich commented

No errors displaying. Just doesnt seem to work for some reason. I havent checked out firebug. Ill give that a try. Thanks

zirafa’s picture

zirafa commented

maybe need to be more explicit about the filepath?

  <!--[if lt IE 7]>
    <script defer type="text/javascript" src="<?php print base_path().path_to_theme() ?>/misc/pngfix.js"></script>
  <![endif]-->

that will look for the file in theme_directory/misc/pngfix.js

I just tried this and it works (note I also got rid of that 7. steven mentioned).

DarrinRich’s picture

DarrinRich commented

Thanks Zirafa. Im going to try this one out and see how it goes.

holydrupal’s picture

holydrupal commented

It doesn't work for background PNG
any other solution?

dman’s picture

dman commented

I don't believe there is a good solution for background PNGs.
I have seen one, but it hurt my eyes to look at what the code was doing.

My approach is instead to set the 'transparent' background to a good colour. It doesn't have to be the default silver or black that some image programs give you.
Transparent PNG is RGB+Alpha. It follows that you can have "blue+100%" and even if the 100% transparency (it counts the opposite direction from 'opacity') isn't supported, you can still get the browser to show 'blue' instead.

Unfortunately I cannot yet offer a simple HOWTO, most image programs I tried (Gimp, Fireworks, PaintshopPro) didn't save what I was trying to do. I Did get it working with imageMagick however...

That was an experimental project of mine anyway. The short answer is "don't even try" - give up and go with GIF instead. Honestly.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

grahamshepherd’s picture

grahamshepherd commented

For background pngs, this works although repeating and placement can be problematical.
http://mydrupalblog.lhmdesign.com/drupal-5-1-png-ie6

For foreground pngs http://homepage.ntlworld.com/bobosola/ works if the sizingMethod in pngfix.js is modified. See http://msdn2.microsoft.com/en-us/library/ms532920.aspx

I put the script in the theme directory (with page.tpl.php) and called it with:

<!--[if lt IE 7]>
    <script defer type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/pngfix.js"></script>
<![endif]-->

For foreground pngs I actually prefer the method in http://drupal.org/node/69261 because it is independent of javascript.

Alternatively try http://drupal.org/node/98609

Chi Loop’s picture

Chi Loop commented

I've used the same condition on my website. It works fine. Maybe the problem is the path. Try hard coding the src destination into page.tpl.php to isolate the problem. Most probably, it should work now. Once you know that it's a path issue, you can then fix the relative path. Btw, i used an absoute path because while the png fix would be applied to the home page, it would not be applied to any other page. So if you know the right way to write the relative path, let us know.

The absolute path in my case was: http://www.mywebsite.org/sandbox1/themes/my_theme/pngfix.js

robloach’s picture

robloach
he/him
commented

Since this PNG Fix shouldn't really be theme specific, I created a PNG Fix Module that will add the Javascript into the site for you. If you find any bugs or small fixes, please fill out an issue report.

AndriaD’s picture

AndriaD commented

The module isn't any more helpful than just adding the script defer line into the page.tpl.php; I can't get any method to work for png's with transparency in IE, stupid program, I can't believe I used it for so long.

To wit: I have a bg image behind my .block h2's, a gradient that shades from a pale color to transparent; looks great in FF and Opera, goes from pale color to mid-gray in IE, no matter what I do -- absolute path, clearing the cache, pngfix module, et al.

Maybe the best bet is just to add a line on the page somewhere that says "if you're using IE, you're not seeing this page correctly. Use Firefox or Opera instead to see it properly."

(I finally got FF so I could use that ATCK grid builder thingie; still don't understand how to get the right code into the right divs, or even how to figure out which div is where, since they're not in any logical order (compared to tables) but at least now I have FF which IS in fact an improvement over Opera, which was a vast improvement over IE!)

Maybe we should just start ignoring IE the way we ignored netscrap, and the same thing will happen -- it'll just go away. :)

Andria

dman’s picture

dman commented

IE6 cannot, will not, and cannot be made to use transparencies in background images/css. AFAIK.
The known filter fixes apply only to actual embedded img tags.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

phacts’s picture

phacts commented

I just did some research and I've got PNG's showing up correctly as a background image in IE6. I used the method found at this link: http://snipplr.com/view/137/png-background-transparency-ie/

The site is in development, so this url won't last long, but if you want to see it working you can point IE6 to http://candabuilders.com/dev/listings/10/beautiful-3-bedroom-house

The background images need to be moved around a bit (and maybe this will break my fix), but I won't get to that for a few days.

dman’s picture

dman commented

Is that really showing up in the background of the element, or is the filter rendering as the element?
... I mean, are you seeing no problems with content, links and stuff within the element with this effect on it?

I think that adding this effect in this way is not identical to setting a background, as you don't (AFAIK) get css positioning and tiling like with backgrounds..
It looks from your example (which isn't exactly stretching the limits) that you don't have the need for the png to actually be behind anything. You are just setting it as a background on a fixed element to get it to show up. Which is fine, and what 'background' settings in CSS are most often used for, even!

Actually, I think I prefer it to the hacky, flickery post-load scripted image-swap method. If I'm going to be using image backgrounds in my theme, I can put this in my CSS...

... My real problem this week is that beautiful PNGs are much much larger than either GIF or JPG, and the site the designer did with alpha trans over textures everywhere is over 1MB per page ... :( . Yay PNG. I'd love to give you a link, because it's beautiful .. but pre-release and I don't want spiders all over it yet!

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

phacts’s picture

phacts commented

Ahh spiders on my pre-release site... hadn't thought of that!

Yeah, if I understand what you are asking, the PNG is actually showing up behind something. I mean, I've got numbers on top of those little circles... but you are right, I've got nothing really in front of the images, so I'm certainly not pushing any limits. It appears to work though for my circumstances, and every other time I've been unable to avoid PNGs in the past. Anyone not able to do this?