Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE7 and alpha transparent PNGs

Status
Not open for further replies.
CliffLandin

CliffLandin

Programmer
Nov 14, 2004
81
US
What do I have to do to make .pngs with alpha transparency work in IE7. I was under the impression that IE7 was supposed to handle them correctly, but it appears that what was the bane of my work day continues to be the bane of my work day.

Any help would be appreciated.

Thanks,

When in doubt, go flat out!

 
Sort by date Sort by votes
I have used png alpha transparency in IE7 extensively to see it working and it never failed. I would suggest you try adding a doctype. Beyond that, I would just say: Put them in and they will work.

Can you come up with an example where png alpha transparency is failing in IE7?
 
Upvote 0 Downvote
png24
Click to expand...
Try using png32 <-- I never believed this might be part of a problem I was experiencing... but it was! IE doesn't seem to handle the Alpha part of a transparent PNG unless it's 32 bit.

Worth a try!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
I had 2 issues that after pulling out most of my hair I have resolved.

1st - if you are applying transparency to make a background color transparent, for example;

Code: 
	filter:alpha(opacity=80);
	-moz-opacity:.8;
	opacity:.8;

IE will then ignore the transparency of a .png.

2nd - When using the * html hack for IE 6 or 5.5 you cannot apply the hack to a class. It must be an id. That one took a while to figure out and much cussing.

I'll dust off the Fireworks and give the png-32 a go.

Thanks

When in doubt, go flat out!

 
Upvote 0 Downvote
When using the * html hack for IE 6 or 5.5 you cannot apply the hack to a class
Click to expand...
That's not true. Try this:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
  <title>Litmus Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
    .ie6 { border: 1px solid; background: #eec; padding: 2px}

    * html .ie6 { background: #f99; }
  </style>
</head>
<body>
   <p class="ie6">This bit of paper turns red on crappy browsers</p>
</html>
What probably happened is that you hit on some specificity problem - styles applied to an id trump those applied to a class, regardless of any * htmling.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
411
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
112
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
310
PeDa
PeDa
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
63
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
iPhone browsers (chrome and safari) output different compared to other browsers 1
Replies
2
Views
85
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top