Click to See Complete Forum and Search --> : png24 transarency fix with css?


shabby
04-23-2007, 04:12 AM
Hey!
I'm having a small problem, I'm designing the myspace page of a band and I want to use a png24 picture with transparent background. This does not work (as you know...) in IE6 and previous versions of it.

I know there are fixes, but they all involve javascript or some kind of external css-file? The problem on myspace is that you are quite limited in what you can do, as far as i'm concerned its only possible to use HTML and some css scripting. So my question is, is it possible to solve this problem using only a css script?

Thanks for your help!
/Joel

edit: this is what my code looks like now...

<style type="text/css">
body{ background-position:top center;margin-top: 505; }

div.topbanner {
top: 0;
left: 50%;
margin-left: -231px;
width: 100%;
height: 505px;
position: absolute;
}
</style>

<div class="topbanner"><IMG SRC="http://whatever.com/pic.png" border="0"></div>

ToonMariner
04-23-2007, 09:16 AM
Yep.

you will need the attached file (rename it iepngfix.htc).

upload it to some webspace that you have.

then in your css add this.

img
{
behavior: url(http://www.yoursite.com/iepngfix.htc);
}

you can also add the behaviour to any element that has png as a backgorund image.

shabby
04-23-2007, 09:27 AM
haha! how stupid of me, didn't even think of that. i will try that, thank you very much!

shabby
04-23-2007, 11:17 AM
hey again
I tried the fix, but I cant really get it to work.. I'm not used to css-coding (i've only used javascript earlier) so I don't really know if this would work...

Do I have to define the picture outside of the css code in a separate div tag, or can it be done in another way?

This is what my code looks like now:

<style type="text/css">
body{
background-position:top center;margin-top: 500;
}

div.topbanner {
top: 0;
left: 50%;
margin-left: -231px;
width: 100%;
height: 500px;
position: absolute;
}

img
{
behavior: url('http://web.telia.com/%7Eu46230155/farabove/iepngfix.htc');
}
</style>

<div class="topbanner"><IMG SRC="http://web.telia.com/%7Eu46230155/farabove/bandbg3_2.png" border="0"></div>