asked on

PNG Transparency and DIV absolute positioning help.

I am having 2 issues with my web page. The first is that in IE6 my PNGs are not transparent, is there a work-around for this? I need something fairly simple...

My second issue is that I have a flower I am wanting to put in the middle of my page, kind of like at this site: http://www.markup4u.com/, but when I re-adjust my browser window, the flower moves also, but I want it to stay in one spot.

Their code and my code look the same to me.

My Code:
<div style="position:absolute; background-image:url(../images/flower.png); width:350px; height:300px; right:50px; top:50px; clear:both; z-index:5;"></div>
 
Their code:
#content div.deco {
	position: absolute;
	left: 522px;
	top: -125px;
	width: 185px;
	height: 261px;
	background: url(../images/deco.png) no-repeat;
	clear: both;
	z-index: 4;
}

Open in new window

Jeffrey Dake

Unfortunately there is no support in IE6 for transparent pngs. You can look at the user agent that comes from the request and do a custom style for IE using the following style

background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/flower.png',sizingMethod='crop');

v2Media

png fix: http://homepage.ntlworld.com/bobosola/pnghowto.htm

To fix the flower, move it's code out of the #content div and reposition. The content div uses position: relative, so all absolutely positioned elements within #content will 'move' with it.

v2Media

BTW: nice design.

dbestcomputers

ASKER

jman56: Works great in IE, but doesnt' show at all in Firefox because of the background:none;, anyway to fix that?

v2Media: Works great on his site, but I CANNOT get it to work on my page, I've tried using it via including the js file and I've tried directly pasting the code (as per his demo page), which also fails. This shouldn't be that hard, I don't know why it won't work...Mine shows exactly like it does without his script. I've copied his page almost to a T, and it doesn't work when I do it.

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial