Transparent .PNGs in IE5.5 and 6..

[lsatblu]

Hi,

I am having a lot of trouble with my banner in IE5.5 and IE6. I am trying to set it up so I have my style sheet like this:

screen.css (gateway css)
-->style.css (normal css)
-->ie.css (contains ie hacks)

I was unable to figure that out so I am first trying to at least get the .PNGs to be transparent in IE5.5 and IE6.

My Ie.css file with the IE hack: http://talesotaku.com/v3/css/ie.css
My main layout: http://talesotaku.com/v3/layout.php

I have this code in the header: <!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

Yet, the banner on my layout is not showing up transparent in IE5.5 or IE6. Any idea what I am doing wrong?

http://talesotaku.com/v3/css/screen.css

When I use the screen.css instead of the style.css on my layout.php, the style works like normal, but the transparency doesn't either.

Any help would be great. :)

[BWiz]

Why is javascript in a CSS file??

It shouldn't be "ie.css", it should be "ie.js"

[lsatblu]

Hmm..I just got the code off a tutorial. It didn't say anything about a .js file. How would I make one of those with the code in it?

[BWiz]

I'm pretty positive that you cannot put javascript in a css file and except it to run. Did the tutorial had <script> tags wrapping the JS code?

Just change the file extension to .js instead of .css. Alternately, you could always just save as, and save it as a .js file.

[lsatblu]

Hi,

This is the tutorial: http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/

The site has it as a css file and uses conditional comments to hide the hacky code. That is pretty much what I am trying to do.

It doesn't use javascript, but if you have a better method that works, please let me know. :)

Edit: I tried another method, but still no luck.

Tutorial: http://homepage.ntlworld.com/bobosola/pnghowto.htm

Layout: http://talesotaku.com/v3/layout.php (I put the code where the tutorial says too)

JS: http://talesotaku.com/v3/pngfix.js

Still no luck. My banner image is not transparent in IE5.5 or IE6. I'm confused..

[DakotaChick]

Transparent PNG Fix (http://homepage.ntlworld.com/bobosola/)

[Apostropartheid]

@ BWiz: IE accepts JavaScript in CSS by the use of dynamic expression()s. It's basically a shortcut so you don't have to use normal JS files. These are also disabled when JS is.

[lsatblu]

Transparent PNG Fix (http://homepage.ntlworld.com/bobosola/)

Hi,

I posted above that, that site is not working for me either.

Layout: http://talesotaku.com/v3/layout.php (I put the code where the tutorial says too)

JS: http://talesotaku.com/v3/pngfix.js

Any idea?

[DakotaChick]

your problem is right here. remove the . in the conditional statement.
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

[lsatblu]

Didn't work: http://talesotaku.com/v3/layout.php

IE5.5 and 6 are not transparent :/

[Apostropartheid]

But what isn't?

[lsatblu]

Sorry I didn't specify. The image that says "Tales Otaku" in the banner. That is transparent in every browser except IE 5.5 and 6. I am trying to get the area behind it transparent like it is in FireFox, Opera, IE7, etc..

When it is transparent, you only see the words "Tales Otaku" on the landscape background. When its not transparent, the area is all grey behind "Tales Otaku".

I can take screen shots in each browser if you need me too. But I have tried it on different computers and it is always transparent on everything but IE5.5 and IE 6.

[Apostropartheid]

I really don't see the point. What's wrong with having it all as a single image?

[DakotaChick]

I really don't see the point. What's wrong with having it all as a single image?

Load time...but then again with the way the image looks in ie it looks like the transparent image is the same size as the image would be if it was just one solid image....

[DakotaChick]

Per the site you got the script from:
Cons:

CSS backround PNGs not supported - experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs, but then background-repeat would not work, and anchors placed over non-transparent parts of the image were not clickable :-(


Insert the png as an actual image on the page and it will work fine.


<div id="header">
<div id="title">
<img src="http://talesotaku.com/v3/img/title.png" />
</div>
</div>

[lsatblu]

I really don't see the point. What's wrong with having it all as a single image?

The image is not compete. I plan on putting more pictures with the text and they need to be separate from the background or there would be no way to center it with a fluid background behind.

This has to be possible, I just can't figure out how to get that one image transparent.

[Apostropartheid]

Load time? A second HTTP request takes a lot of time to perform. You've just made a bigger image to place on top. If it were just one file, it'll be 1) a smaller file size & b) only one HTTP request. There's no real need for transparency.

<edit>just read the above post. Never mind.</edit>

[lsatblu]

I think I got it working in IE6 and 5.5. It seems to work when I don't have the image set to a background on a div.

http://talesotaku.com/v3/layout2.php

I changed my html from:

<div id="header"><div id="title"><h1>Tales Otaku</h1></div></div>


To:


<div id="header"><div id="title"><img src="img/title.png" border="0" /></div></div>

I basically removed the image from the background of the title div. The only problem now, is if a viewer has images turned off. They won't see anything. With my old setup, the text "Tales Otaku" would be shown if images are turned off.

Any suggestions?

[abduraooft]

<img src="img/title.png" border="0" alt="talesotaku"> ?