IE6, PNG transparency, background position and others

Hello,

I have a simple style for block menu:

#mc {
background:transparent url(bgd.png) no-repeat 100% 50%;
height:64px;
margin:0;
padding:0;
position:absolute;
left:30px;
top:20px;
}

The file bgd.png have an alpha channel. Well, for IE6 I use filter like
this:

#mc {
background-image:none;
filterrogidXImageTransform.Microsoft.AlphaImag eLoader(enabled='true',
sizingMethod='crop', src='http://www.test.com/bgd.png');
}

to work transparent.

I have two problems:

1. The position of background for IE6 is always top left, but I want to
set center right :/

2. The #mc element in IE6 is "locked". This means that I can not select
anything that is in this block. If I delete a position: absolute,
everything works as expected.

How to solve these problems?

--
Peter

Peter May wrote:

Hello,

I have a simple style for block menu:

#mc {
background:transparent url(bgd.png) no-repeat 100% 50%;
height:64px;
margin:0;
padding:0;
position:absolute;
left:30px;
top:20px;
}

The file bgd.png have an alpha channel. Well, for IE6 I use filter like
this:

#mc {
background-image:none;
filterrogidXImageTransform.Microsoft.AlphaImag eLoader(enabled='true',
sizingMethod='crop', src='http://www.test.com/bgd.png');
}

to work transparent.

I have two problems:

1. The position of background for IE6 is always top left, but I want to
set center right :/

2. The #mc element in IE6 is "locked". This means that I can not select
anything that is in this block. If I delete a position: absolute,
everything works as expected.

How to solve these problems?

Although the filter does help with IE6's PNG deficiencies it does not
support ALL css proprieties, background-position is one of them...


Place after your stylesheet links
<!--[if lte IE 6]>
<style type="text/css">
#mc { background-image: url(CrappySubstituteForIE6.gif); }
</style>
<![endif]-->

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little pisze:

Although the filter does help with IE6's PNG deficiencies it does not
support ALL css proprieties, background-position is one of them...

Suspected that this is the case, but I was not sure. In particular,
Microsoft's documentation that specifically did not help. As we know,
IE's in a lot of "interesting", the thought that someone may have
already solved this problem. I simply delete the background for IE6.

Place after your stylesheet links
!--[if lte IE 6]
style type="text/css"
#mc { background-image: url(CrappySubstituteForIE6.gif); }
/style
![endif]--

I can not do so, because the background is the background, which is in
the menu, and the version without transparency look very bad. I remove
the background for IE6.

--
Peter

Peter May wrote:

Jonathan N. Little pisze:
Although the filter does help with IE6's PNG deficiencies it does not
support ALL css proprieties, background-position is one of them...

Suspected that this is the case, but I was not sure. In particular,
Microsoft's documentation that specifically did not help. As we know,
IE's in a lot of "interesting", the thought that someone may have
already solved this problem. I simply delete the background for IE6.

Place after your stylesheet links
!--[if lte IE 6]
style type="text/css"
#mc { background-image: url(CrappySubstituteForIE6.gif); }
/style
![endif]--


I can not do so, because the background is the background, which is in
the menu, and the version without transparency look very bad. I remove
the background for IE6.

Note the "GIF" in CrappySubstituteForIE6.gif, you can use transparency
for IE6 in this application, just not *alpha* transparency of PNG, you
have to use with GIF or GIF-like palette PNG-8

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com