SitePoint Sponsor |
|
User Tag List
Results 1 to 20 of 20
Thread: transparency issues in IE again
-
Oct 9, 2006, 19:18 #1
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
transparency issues in IE again
I'm unable to get IE to see the Alpha fix for this image. I must be missing something.
http://www.e-centricity.net
-
Oct 9, 2006, 19:34 #2
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Looks like you should be applying the filter to the image, not the container.
-
Oct 10, 2006, 02:01 #3
- Join Date
- Sep 2006
- Location
- Poland
- Posts
- 28
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can use this javascript instead.
PHP Code:function correctPNG() {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='noscale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
if (navigator.appName.indexOf('Microsoft') != -1){
window.attachEvent("onload", correctPNG);
}
Tom.
-
Oct 10, 2006, 09:52 #4
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
at the risk of being bad I'm really trying to stay away from JavaScript as a solution right now. I just don't want it to be dependent on a technology that can be shut off by the user.
-
Oct 10, 2006, 12:21 #5
- Join Date
- Jul 2006
- Location
- Florida
- Posts
- 118
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't think you can do it without js?
-
Oct 10, 2006, 12:33 #6
- Join Date
- Aug 2006
- Location
- earth
- Posts
- 923
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why not re-comp and slice so that the butterfly is included in the header image?
No, I REALLY dislike having to use Joomla.
-
Oct 10, 2006, 12:56 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just so you know, any type of expression, filter, .hta/.htc file will use either JavaScript or Microsoft's "JScript" to render the effects you seek, and can be disabled by the user just as easily as actual JavaScript can. Browsers by and large don't care what the client-side scripting language is, if they can disable it, they will (when the user says to, of course).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 10, 2006, 13:36 #8
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you for that information...so based on what I have in there now what seems to be the problem?
-
Oct 10, 2006, 15:59 #9
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by amidude
Looks like you should be applying the filter to the image, not the container.
-
Oct 10, 2006, 21:15 #10
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry about that...forgot to tell you I tried that and it didn't work. I even tried taking out the image called in the <div>. IE then displayed it fine but FF couldn't find the image. So I'm truly at a loss here. I apologize if I am missing something here. This is my first time trying to get something like this to work and whereas I have fixed a multitude of other problems I seem to have this one big one that I can't get over.
I've looked at the code over and over and I've been to stupid Microsoft's lame website and still I can't see the problem here. It should be working the way it is written...shouldn't it?
-
Oct 10, 2006, 21:36 #11
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It could be the space in enabled=' true'. Try removing the space or try taking it out altogether (I've not needed it in the past).
-
Oct 10, 2006, 21:55 #12
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Holy Monkeys!!!! That did it!!!! Thank you so much!!!! Man, and I was told over and over by this other guy that "that's how it's supposed to be". Thank you so much for your help. Man, if there's anything I can ever do for you just let me know.
Also, I really like your work on your site. Would you by chance have any pointers for me on my sites design? I'm open to any suggestions.
-
Oct 10, 2006, 22:38 #13
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by amidude
And you might want to give your nav a height in em and make the bg-color the same as the bottom of the bg-image so that when the text size is increased, the bar increases in size too.
-
Oct 11, 2006, 08:01 #14
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks so much. I will look into that.
-
Oct 11, 2006, 12:34 #15
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is it okay to have more than one transparent .PNG on a page? If so...what are the considerations to keep in mind prior to doing so? I'm thinking about making the background shadow a PNG as no matter what I do I can't seem to save an image that won't have that problem with the blending.
-
Oct 11, 2006, 13:06 #16
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I do it all the time, but I use the PNG-8 encoding, rather than PNG-24.
Also, Internet Explorer 7 will be shipping this month, so you won't have to worry too much about alpha-transparency problems for much longer (assuming you tell your IE6 visitors to either upgrade or get a real browser, like Opera).Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Oct 11, 2006, 13:15 #17
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
LOL...sweet. I'll keep that in consideration. Maybe I should add the link down at the bottom with the Firefox link. ;-)
-
Oct 11, 2006, 13:32 #18
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
tried PNG 8 and it wouldn't display in either IE or FF. Went back to PNG 24 and it shows up in FF again. IE stops displaying any graphics in the middle container if I try and make a transparent PNG for the shadow in the DIV titled "mainCtr".
This is what I tried and it failed to show the background shadow as transparent and didn't display any of the title images inside the container.
Code:* html #butterfly {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/butterfly2.png');} * html #butterfly img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);} * html #mainCtr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgs/backgrd.png');} * html #mainCtr img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);} *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
-
Oct 11, 2006, 15:26 #19
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As far as I know, you don't need the line with opacity=0. If you're using bg-images though you do need to make IE bg-image { none } in conjuction with using the filter because otherwise you'll still be showing the unfiltered PNG.
-
Oct 12, 2006, 11:21 #20
- Join Date
- Feb 2004
- Location
- Minnesota
- Posts
- 123
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Tyssen
I understand that I would use Background-image:none; but I'm totally lost where to put it. Since I am calling the image in this portion of the normal browser CSS file.
Code:#mainCtr { width: 708px; height: 757px; margin: 0 auto 0 auto; background: url(../imgs/backgrd.png); background-repeat: no-repeat; }
Last edited by amidude; Oct 12, 2006 at 14:32.
Bookmarks