| |
|
Welcome to KnowledgeSutra - Dear Guest | |
Which Png Fix For Ie Is The Best
Started by web_designer, Dec 30 2009 09:39 PM
8 replies to this topic
#1
Posted 30 December 2009 - 09:39 PM
as many designer know
png transparency is a real problem that every designer should deal with when he is about to publish his website
there is may techniques
now the question what is the best?
the most known techniques
twin helix
unit png fix
supersleight
DD_belatedPNG
but the most important which one fit to your layout
the strange thing is i used twin helix v2.0 but as wordpress plugin
but when i disabled it and try to add it manually it didn't work
so where is the problem
png transparency is a real problem that every designer should deal with when he is about to publish his website
there is may techniques
now the question what is the best?
the most known techniques
twin helix
unit png fix
supersleight
DD_belatedPNG
but the most important which one fit to your layout
the strange thing is i used twin helix v2.0 but as wordpress plugin
but when i disabled it and try to add it manually it didn't work
so where is the problem
#2
Posted 30 December 2009 - 10:50 PM
From experience, they tend to not work as expected or are hard to implement properly, so i wouldn't recommend any. Likewise, while you could suggest for the user to upgrade to IE7 or to switch to another popular browser, i would either avoid the use of transparent PNGs (which you may never need) or simply not care. I am not sure what instance demands for transparent PNGs, especially since we've been doing good without their use in web design for a long time, but what kind of dilemma are you in?
#3
Posted 31 December 2009 - 01:52 AM
thanks for your reply
and my problem is i have several images in png in my wordpress blog and unfortunately i can't replaced them to gif coz they will have very ugly edges, so i made them in png and they worked great in firefox, opera, google chorm, but not in ie6. so i tried fix them by using these methods, but i couldn't make them work until i used plugin in wordpress theme which is work when i added twin helix v2.0. but when i tried to add it manually it didn't work. i don't know why, but i think the problem where to put the <style> tag. i put it in the header, it didn't work, also in css file. by the way, my wordpress theme not a free theme but a theme i made it my self using apache, php and photoshop and of course my own CSS, so i had a full control on it . but the point why it is not working so i decided to ask about it here in these forums, in case somebody can help.
and my problem is i have several images in png in my wordpress blog and unfortunately i can't replaced them to gif coz they will have very ugly edges, so i made them in png and they worked great in firefox, opera, google chorm, but not in ie6. so i tried fix them by using these methods, but i couldn't make them work until i used plugin in wordpress theme which is work when i added twin helix v2.0. but when i tried to add it manually it didn't work. i don't know why, but i think the problem where to put the <style> tag. i put it in the header, it didn't work, also in css file. by the way, my wordpress theme not a free theme but a theme i made it my self using apache, php and photoshop and of course my own CSS, so i had a full control on it . but the point why it is not working so i decided to ask about it here in these forums, in case somebody can help.
#4
Posted 31 December 2009 - 02:53 AM
There is such thing as over coding.
I'm pretty sure less than 10% of web surfers are still using IE6. It's time to upgrade to IE7, if you still can find the download. Yahoo did a wonderful job alerting and converting just about every user to IE8.
And before I eat my words, I did some research and see the result of web browser trend
http://www.w3schools...wsers_stats.asp
I was off by < 2%
I'm pretty sure less than 10% of web surfers are still using IE6. It's time to upgrade to IE7, if you still can find the download. Yahoo did a wonderful job alerting and converting just about every user to IE8.
And before I eat my words, I did some research and see the result of web browser trend
http://www.w3schools...wsers_stats.asp
I was off by < 2%
#6
Posted 31 December 2009 - 07:11 AM
For years I'm using the method to fix PNG transparency on IE6 without any problems and it works well, it's called IEPNGFIX!
All you need to do is to use this code.. It doesn't work on CSS images though when you use background-image property, but works on all <img /> html tags.. Just write in your CSS file or between <style></style>
As behavior: is not a valid property, I used to use PHP to output it only when it's IE6, but for now I use a different method in html using in comment statement if it's IE6, I think it's called conditional comments. For example:
you can use anything associated with HTML between the comment tags, but I use:
Because it's much better..
By the way, the link to the PNG FIX hack is here: http://www.twinhelix.com/css/iepngfix/
And I think they've updated the version, I think I'm using an older one, but the main thing it works
All you need to do is to use this code.. It doesn't work on CSS images though when you use background-image property, but works on all <img /> html tags.. Just write in your CSS file or between <style></style>
img { behavior: url(files/iepngfix.htc); }
As behavior: is not a valid property, I used to use PHP to output it only when it's IE6, but for now I use a different method in html using in comment statement if it's IE6, I think it's called conditional comments. For example:
<!--[if IE 6]>
<style>img { behavior: url(files/iepngfix.htc); }</style>
<![endif]-->
you can use anything associated with HTML between the comment tags, but I use:
<!--[if IE 6]> <link rel="stylesheet" href="ie6.css" type="text/css" /> <![endif]-->
Because it's much better..
By the way, the link to the PNG FIX hack is here: http://www.twinhelix.com/css/iepngfix/
And I think they've updated the version, I think I'm using an older one, but the main thing it works
#7
Posted 01 January 2010 - 04:16 PM
hi quatrux HAPPY NEW YEAR to you and to everyone in trap17, and thanks for your help, i checked on the net and it was the same png fix that i'm talking about but i used v2.0 but you are using v1.0
i followed your instruction
but nothing happen
i don't know why
i put the conditional comments in the header of my wordpress theme
and checked that the file .htc is exist in my main folder
but i don't know why the php didn't link to it
in the same time
i checked the main file of png fix and it works very good in my ie6
so why not reading from my info that is the problem
any more suggestions?
i followed your instruction
but nothing happen
i don't know why
i put the conditional comments in the header of my wordpress theme
and checked that the file .htc is exist in my main folder
but i don't know why the php didn't link to it
in the same time
i checked the main file of png fix and it works very good in my ie6
so why not reading from my info that is the problem
any more suggestions?
#8
Posted 03 January 2010 - 09:53 AM
First of all, remember it works only on img tags images and not for images in stylesheets.. Well it works for me..
Download the file iepngfix.htc and put it to your folder, create an index.html file or use your index.php file or whatever and use this:
It needs to be in between <head></head> elements, it will use the ie6hacks.css file if it will be IE6 or IE5.5 and lighter versions, but for them it won't work anyways..
put the ie6hacks.css file in the same folder with this content in it:
Where iepngfix.htc needs to the in the same folder too, even though you can use different folders, like I do though, but you need to use the right paths.
I also use the iehoverfix.htc hack for IE6 to solve the problems with :hover on IE6 ;]
Download the file iepngfix.htc and put it to your folder, create an index.html file or use your index.php file or whatever and use this:
<!--[if lte IE 6]> <link rel="stylesheet" href="ie6hacks.css" type="text/css" /> <![endif]-->
It needs to be in between <head></head> elements, it will use the ie6hacks.css file if it will be IE6 or IE5.5 and lighter versions, but for them it won't work anyways..
put the ie6hacks.css file in the same folder with this content in it:
img {
behavior: url(iepngfix.htc);
}
Where iepngfix.htc needs to the in the same folder too, even though you can use different folders, like I do though, but you need to use the right paths.
I also use the iehoverfix.htc hack for IE6 to solve the problems with :hover on IE6 ;]
#9
Posted 04 January 2010 - 07:58 PM
i think my main problem that makes this code doesn't work is all the images i use had been added as a background image in my css file, but what puts me in a puzzle that it works when i use plug in but where is the problem?!!
even i made a another css file like quatrux said before but it didn't work either, and now i really give up
i dis activated the plugin and tried to add the code manually because my previous hosting didn't support wordpress plugin but now i will transfer my hosting here to trap17 so i hope here there is support to worpress plugins, if anyone know they didn't please tell me...
even i made a another css file like quatrux said before but it didn't work either, and now i really give up
i dis activated the plugin and tried to add the code manually because my previous hosting didn't support wordpress plugin but now i will transfer my hosting here to trap17 so i hope here there is support to worpress plugins, if anyone know they didn't please tell me...
Reply to this topic

1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users















