SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
-
Nov 25, 2007, 09:09 #1
- Join Date
- Jan 2007
- Posts
- 34
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Problems with transparent PNG + alpha filter under IE6&7
I want to apply alpha opacity filter to transparent PNG file however I stumble a serious problems under IE6 and IE7 because one doesn't want to display transparency and the second displays sharp edgy inner corners.
This is an example image
http://hdd001.republika.pl/test8.png
here is a html
Code:<div class="example"></div>
Code:.example { background-image: url(test8.png); background-repeat: repeat-y; filter:alpha(opacity=65); -moz-opacity:.65; opacity:.65; opacity:0.65; }
IE6 - corners are smooth but no transparency
IE7 - corners are sharp and bad looking, transparency is OK
I wanted to use iepngfix.htc or AlphaImageLoader but it looks it doesn't like background images.
any solution ?
-
Nov 25, 2007, 09:32 #2
- Join Date
- Mar 2001
- Location
- Northwest Florida
- Posts
- 1,707
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE6 doesn't support PNG transparency. You will need to use a .gif.
intragenesis, llc professional web & graphic design
-
Nov 25, 2007, 09:35 #3
- Join Date
- Jan 2007
- Posts
- 34
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Nov 25, 2007, 09:44 #4
- Join Date
- Mar 2001
- Location
- Northwest Florida
- Posts
- 1,707
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Take a look at this article :
http://bjorkoy.com/past/2007/4/8/the...st_way_to_png/intragenesis, llc professional web & graphic design
-
Nov 25, 2007, 09:49 #5
- Join Date
- Jan 2007
- Posts
- 34
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Nov 25, 2007, 10:02 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
First of all IE needs the element to have "haslayout" before the op-acity filter will work.
IE6 can only crop, scale or leave at image size when you use the alpha image loader filter. It cannot position or repeat.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body{ background:red } .example { background: url(http://hdd001.republika.pl/test8.png) repeat-y; filter:alpha(opacity=65); -moz-opacity:.65; opacity:.65; opacity:0.65; width:100%;/* IE needs layuot*/ } * html .example{ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hdd001.republika.pl/test8.png',sizingMethod='scale'); } </style> </head> <body> <div class="example"> <p>this is some text : this is some text : </p> <p>this is some text : this is some text : </p> <p>this is some text : this is some text : </p> <p>this is some text : this is some text : </p> </div> </body> </html>
Look at this example as to what you can do.
http://www.pmob.co.uk/temp/transparent-test4.htm
The borders and the image have the filter applied but the borders are scaled so there is limited scope for using the fliter for any other uses.
I would need to see your design to decide if it was possible or not but it sounds like its not possible for IE6.
IE7 should understand png transparency ok.
-
Nov 25, 2007, 10:04 #7
I used this fix recently and it worked it pretty well, though it does have some issues depending on how the background image is applied/used (as Paul alluded to above - it won't work in all situations).
If you carefully choose the matte color you can sometimes get away with an alpha transparent GIF, but I know it can be to much of a compromise for some situations.
^Is anyone aware of an IE 6 PNG fix that will allow you to position and/or repeat the background?
-
Nov 25, 2007, 10:53 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Is anyone aware of an IE 6 PNG fix that will allow you to position and/or repeat the background?
-
Nov 25, 2007, 11:00 #9
^That's what I was afraid of - I hadn't found anything and I dug around fairly thoroughly - of course to the boss who insists it must look exactly like the super rich, multi-overlayed, shadowed and glowed comp that the stakeholders bought into doesn't care much
.
Sometimes no means no,- even if you are used to never hearing it (hear me boss man?!). Apparently there is indeed not a publicly available complete hack/fix for every situation - sometimes we all need to be reminded of that I suppose.
Ah, the bittersweet taste of compromise.
-
Nov 25, 2007, 11:06 #10
- Join Date
- Jan 2007
- Posts
- 34
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK this is an example of a layout
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body{ background-image: url('http://hdd001.republika.pl/bgtest.gif');} .a { background: url(http://hdd001.republika.pl/test8.png) repeat-y; filter:alpha(opacity=65); -moz-opacity:.65; opacity:.65; opacity:0.65; width:38px; height:200px; float:left; display:inline; margin:0px } .b{width:200px;background:green;display:inline;float:left;margin:0px} </style> </head> <body> <div> <div class="a"></div> <div class="b">bbbb</div> </div> </body> </html>
I've add this to the <style>
Code:img{ behavior: url(iepngfix.htc); } * html .a{ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hdd001.republika.pl/test8.png'); }
-
Nov 25, 2007, 11:48 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I understand that eliminating white spots while having an opacity is not possible so I wonder if I can do something to that ugly edges in IE7
Maybe you could use a transparent background png on a parent instead to get the effect you want instead of using filter:alpha(opacity=65);.
Also note that the png fix is just for ie6 so make sure you are only giving ie6 (and ie5.5) the pngfix.
-
Nov 25, 2007, 12:46 #12
- Join Date
- Jan 2007
- Posts
- 34
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Do you think I should report it ?
yes I'm doing it right now but it's not exactly the solution I need
I'm aware of that fact and for the present moment I see only this solution :
Special graphics for IE7 or switching to opacity PNGs only + GIFs for IE6
-
Nov 25, 2007, 16:40 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Do you think I should report it ?Just remember it for next time and keep it with a list of all the bugs you come across so you don't have to keep remembering what they were. I've seen the same bug mentioned on other forums so its a known issue.
I'm aware of that fact and for the present moment I see only this solution :
-
Nov 25, 2007, 17:03 #14
- Join Date
- Jan 2007
- Posts
- 34
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Bookmarks