PNG Files for images

[Guest]

Hi Everyone

I'm hoping someone can help me.

All morning i have tried to understand the fix for PNG's in IE6 and lower

My png shows perfect in FF but in IE6 it fails and shows me a grey background....

Therefore i have tried googling for a solution but i don't understand any of them! LOL pls don't roll your eyes right now.... this is quite new to me so pls be patient

I have tried this solution here PNG for IE6

I'm not sure if i'm doing it wrong!!!!! or what but it just doesn't work!

Here is what i currently have in my index.tpl

<!--[if IE]>

<link href="skins/{VAL_SKIN}/styleSheets/IE-layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/IE-style.css" rel="stylesheet" type="text/css" />

<![endif]-->

Now i did this because some of the formatting in FF obviously was different to IE so therefore i created a new stylesheet to accommodate IE.

Now.....

This is the div i'd like to show as per my css....

#name {

height:70px;

	width:474px;

	background-image: url(../styleImages/backgrounds/name.png);

	background-repeat:no-repeat;

	background-position: right top;	

	float:right;

	margin-top:-115px;

	margin-right:24px;

	behavior: url(../styleSheets/iepngfix.htc);



}

Now... according to that link, i downloaded the pngfix folder

and specified it in my css as per the above.... but i'm not quite sure if this is the way its done!

Can someone please have a look at this code and tell me if i'm doing this incorrectly and how i can get this to work pls.

Thanks so much

Cheers

Antz :unsure:

[Guest]

Hi Again

Well i'm trying another method now,,,,, but still doesn't work... this one doesn't require javascript....

and the comments would go into a stylesheet for IE which is what i have so far.....

Here is the link

This is what i've put on my IE-layout.css

.name  {

	height:70px;

	width:474px;

	background-image: none;

	margin-top:-118px;

	margin-right:11px;

	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../styleImages/backgrounds/name.png',sizingMethod='scale'); 

	 }

and this is what i have in my normal layout.css

.name {

	height:70px;

	width:474px;

	background-image: url(../styleImages/backgrounds/name.png);

	background-repeat:no-repeat;

	background-position: right top;	

	float:right;

	margin-top:-115px;

	margin-right:24px;

}

In my index.tpl is this which links both stylesheets

<link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" />



<!--[if IE]>

<link href="skins/{VAL_SKIN}/styleSheets/IE-layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/IE-style.css" rel="stylesheet" type="text/css" />

<![endif]-->

Now again it shows perfect in FF but nothing in IE6 >> this is absolutely driving me nuts! LOL

Your professional advice would be sooooooo much appreciated.

Thanks

Cheers

Antz

[burgensteen]

You got URL for site for us to see as there may be a simpler way if we see the site ??

[Guest]

Hi Again

I feel strange replying to my posts! LOL

jeje, anyways, as you can see i've been trying all day to understand this png thingi!

aghhhhhh!!!!!

I've gotten it to work by adding in my IE-layout.css the following

width:474px;

	height:70px;

	margin-top:-168px;

	margin-right:11px;

	background-image: none;

	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='FULL STORE LINK ie. http://www.etc /skins/WoodBrown_V1/styleImages/backgrounds/name.png',sizingMethod='fixed');

Now..... my question is,,,,,, is there any other way then putting the whole website link? what do you do if you were going to sell the skin to someone else and their website addy would be completely different?

Thanks

Antz :)

[Guest]

You got URL for site for us to see as there may be a simpler way if we see the site ??

I've just pm'd you Burgensteen

[Guest]

Ok here is my url pls let me know what you think is a better option of doing this without having to write the whole url address in my css for all my pngs as this would make my file heavier.....

Visit My Website

Thank-you.

Kind Regards,

Antz :)

[Guest bennyuk]

I've always uses a conditional js include.

eg just add extra line to 2 global templates in head area, and upload js file.

http://homepage.ntlworld.com/bobosola/pnghowto.htm Another option could be to use your existing solution and apply a global style to all images

<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->

Example is here  (this is not the exact example I use but it explains it well)

img {

   behavior: url("pngbehavior.htc");

}

[Guest]

I've always uses a conditional js include.

eg just add extra line to 2 global templates in head area, and upload js file.

http://homepage.ntlworld.com/bobosola/pnghowto.htm Another option could be to use your existing solution and apply a global style to all images

<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->

Example is here  (this is not the exact example I use but it explains it well)

img {

   behavior: url("pngbehavior.htc");

}

Thank-you for getting back to me.... well after much googling i managed to find a fix... i'm also using a js from this site and LUV IT! it does it all for you

Here is the link for any other ppl who may be interested in PNG files

Hope that may help someone who is struggling in finding a fix.

Cheers

Antz :)