.png Transparency

[tburger]

Hey guys-

I've read that IE6 has issues handling .png images that make use of transparent backgrounds...any ways to get around this?

Tom

[drhowarddrfine]

Yes but I don't have my links handy. Google for that and you'll find some javascript solutions for IE. Of course, .png works fine in modern browsers.

[tburger]

Modern browsers...yes..looks great in Firefox...

any specific search suggestions?

Thanks again, Dr.

Tom

[drhowarddrfine]

Actually, I forgot about IEs filter stuff that only works on IE but that's what you want. Here's an article explaining it all.

[ctoz]

: ) to cut a long story short...

Use css to vary the opacity (of any element, not just images)—PNGs not necessary:

img#mygif {filter:alpha(opacity:80);opacity:0.8;-moz-opacity:0.8}

"filter:alpha(opacity: )" is MSIE's proprietary code;

"opacity: ;" is standard CSS;

and "-moz-opacity: ;" is needed for some early versions of Mozilla.

Use "0.9", as some browsers choke on "1.0"... if you want things that shady.

[tburger]

Thanks for the input so far:

I am not primarily concerned with the opacity of the object, but with the opacity of the object's background. IE7, which I tested on yesterday, handles this background transparency properly, but IE6 and below does not. These browsers leave an ugly border around the image.

There are some javascript fixes for this, but I could only get it to work when the images were static on the page. My navigation system also uses a single .png image, but changes position based on which link is "hovered" over. The javascript is apparently broken by this :hover behavior and results in a larger mess than what I started with...I am also hesitant to rely so heavily on javascript because many people do not have this enabled.

The navigation model works on the same principles as Apple's home navigation bar. (I believe it is called the Navigation Matrix). I'm not sure how to handle this.

Any ideas would be of great assistance:

SITE

Tom

[drhowarddrfine]

Possibly not related but you have quite a few html and css errors that need fixing.

[tburger]

Possibly not related but you have quite a few html and css errors that need fixing.

Thanks for the heads up...

The CSS file ran clean...no errors, but a few places where repeated code can be consolidated...

What is the "alt" attribute inside of a link tag? The validation service says this is required, but I've never seen it used...

I didn't know that <br> needed a closing tag..Doesn't this represent a line break?
Is the proper sytanx <br></br>?

The validation service is not allowing the attribute onMouseOut, which I am using for java script...but this is the how the attribute is listed in Dreamweaver...I've seen "onmouseout" used, but I haven't had trouble with it in practice...

Concerning the transparency quesiton, I think the best option might be to just match the background on the image with the page itself, and stop worrying about inconsistent transparency...

Thoughts?

Tom

[drhowarddrfine]

The alt tag is for accessability for screen readers and browsers when images aren't displayed.

In xhtml, you need the closing />, so it's <br />

In xhtml, case matters so it's complaining it's not in lower case. In html, case does not matter.

[tburger]

Thanks for the clarification.

Tom