png transparency in CSS - Need help!! - Webmaster Forum - Web Design, Programming and SEO forums

11-20-2006, 08:08 PM

Sulcalibur

Status: I love this place
Join date: Jan 2005
Location: London
Expertise:
Software:

Posts: 608

iTrader: 4 / 100%

Sulcalibur is on a distinguished road

png transparency in CSS - Need help!!

Does anyone know how I can get a png to have transparency on IE 6 if it's a background image in the CSS. I can get it to work fine if it's in the html (by using some javascript) but in the CSS, I just don't know, I'm stumped.

11-20-2006, 09:31 PM

derek lapp

Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:

Posts: 2,246

iTrader: 0 / 0%

derek lapp is on a distinguished road

ie 6 doesn't support png transparency.

11-20-2006, 09:47 PM

Jeff Andersen

Status: Superstar
Join date: Apr 2005
Location:
Expertise:
Software:

Posts: 4,449

iTrader: 10 / 100%

Jeff Andersen is on a distinguished road

Was there not someone here that used a hack to make it so?

11-20-2006, 09:55 PM

Awesome

Status: Pastafarian
Join date: May 2006
Location: Duct Taped to your Ceiling
Expertise:
Software:

Posts: 3,440

iTrader: 26 / 93%

Awesome is on a distinguished road

Code:

<div id="*****" 
	style="position:relative; 
	height:**px; 
	width:***px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='*****.png',sizingMethod='scale');"></style>

Replace the ***'s as needed.

You could always use the IE7 JS library http://dean.edwards.name/IE7/

11-20-2006, 11:24 PM

Sulcalibur

Status: I love this place
Join date: Jan 2005
Location: London
Expertise:
Software:

Posts: 608

iTrader: 4 / 100%

Sulcalibur is on a distinguished road

sweet cheers

11-21-2006, 02:28 AM

derek lapp

Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:

Posts: 2,246

iTrader: 0 / 0%

derek lapp is on a distinguished road

Originally Posted by Jeff Andersen

Was there not someone here that used a hack to make it so?

yeah but hacking is for noobs.

11-21-2006, 08:21 AM

Sulcalibur

Status: I love this place
Join date: Jan 2005
Location: London
Expertise:
Software:

Posts: 608

iTrader: 4 / 100%

Sulcalibur is on a distinguished road

Originally Posted by derek lapp

yeah but hacking is for noobs.

If it works when it usually doesn't what's the problem?

11-21-2006, 02:49 PM

derek lapp

Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:

Posts: 2,246

iTrader: 0 / 0%

derek lapp is on a distinguished road

you guys need to get senses of humour.

11-21-2006, 06:51 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

Originally Posted by Sulcalibur

If it works when it usually doesn't what's the problem?

Table based design "work" too.

Anyway, here is the (non-valid) CSS method I use to do this sort of stuff:

HTML Code:

background: url('../images/transparent.png') !important; /* Good Browsers */
background-image: none;
filter: none !important; /* so IE7 doesn't do the filter */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png', sizingMethod='scale'); /* IE6 */

Remember that the filter path is relative to the HTML page rather than the CSS file.

11-23-2006, 06:16 PM

#10

Sulcalibur

Status: I love this place
Join date: Jan 2005
Location: London
Expertise:
Software:

Posts: 608

iTrader: 4 / 100%

Sulcalibur is on a distinguished road

Thanks Jonny UK!