Author Topic: PNG images going funky  (Read 2906 times)

Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
PNG images going funky
« on: February 13, 2007, 03:45:20 PM »
I'm just playing with the latest roundcube SVN and am trying to configure the sign in page to match the rest of my site, but something funky is going on with my sites png image files.

Any ideas?


Bad png's




Good png's


Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
Re: PNG images going funky
« Reply #1 on: February 13, 2007, 09:15:26 PM »
Weird... only seems to do it with IE, not with firefox :-\

Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
Re: PNG images going funky
« Reply #2 on: February 14, 2007, 12:35:28 AM »
OK, I may just be replying to my own messages. Hopefully somebody else will chip in...

I found the offending bit of code! It's this line in the common.css file

Code: [Select]
img {behavior: url('skins/default/pngbehavior.htc');}
So what is this supposed to do to my png files?

For now I'm going to simply hide it from the common.css file, I see we'll just have to see what that does to the rest of roundcube!

Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
Re: PNG images going funky
« Reply #3 on: February 14, 2007, 01:01:28 AM »
OK, I'll just reply to myself one more time  :D

Google is my friend! I found out that the pngbehavior.htc fix is not a roundcube thing but a general IE tweak to make png files transparent with IE6. I also found this site http://blog.nkadesign.com/?p=13 which states that:

Quote
Make sure that the PNG images in your pages have their proper width and height set, otherwise if these attributes are missing from the tag the images will appear as single pixel dots in Internet Explorer.

So I guess I just unhide that "offending" code, as I put it, and then add the 'height' and 'width' settings to my html code!

et voila... problem solved!


Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
Re: PNG images going funky
« Reply #4 on: February 14, 2007, 05:17:32 PM »
OK final post to myself!  ;D

I decided I couldn't be bothered to go through my site and add the height/width tags to all my png images. Instead I found this .js fix which essentially does the same thing. All you have to do is upload the file somewhere to your site and stick the link to it somewhere in the tags of your mail.html, settings.html, addressbook.html, and login.html files. This then works on all your png files!

See here for more details:

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

still trying to find where to stick the link to make the taksbar mini-pngs transparent!

Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
Re: PNG images going funky
« Reply #5 on: February 14, 2007, 06:03:35 PM »
hmmm okay, maybe not problem solved!  :-[

The pngfix.js tweak seems to have the effect that my taskbar icons are always faded as if they cannot be selected. For example, in my inbox, the compose message icon is faded out!


Offline FatJonny

  • Jr. Member
  • **
  • Posts: 48
Re: PNG images going funky
« Reply #6 on: February 16, 2007, 04:12:45 PM »
OK... if anybody ever comes across this thread while suffering the same problem, here's the solution:

1. Use width and height settings on the png files on your login page, or:

2. Use the pngfix.js tweak, but also put:
Code: [Select]
img {behavior: none}into style tags in the html header of your login page. This then forces your login page to use the pngfix.js tweak for your login page 's but then applies the pngbehavior tweak to your roundcube pngs.

Problem solved!