PNG as background - opacity problems

[yutewa00]

Hello!

I'm doing a design and I need transparent PNG images to create a border. It works in firefox and opera but IE is causing major problems as always

You can find my design here. If anyone knows a solution to this problem please let me know.

[djr33]

IE6? IE7 has added PNG transparency support, but IE6 does not. This has been discussed before, and I believe there is an IE-only filter available to fake the same thing, so that should work for you. (IE-only is fine, since it only needs to fix IE6).

If not, you could always use GIF instead.

[yutewa00]

Unfortunately GIF is not an option.

I found this but I can't get it to work for me

[djr33]

I know there is a filter-based solution, but I haven't used it myself, so I'm not sure. That looks like a good page to try, though. Good luck. Maybe someone else will have more info. Also, if you could paste a link to your page, perhaps someone could take a look and see what is wrong.

[tech_support]

Try this:

<!--[if IE]>
<style>
#container
{
 background-image: none;
 filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/YourImage.png,
sizingMethod='scale');
}
</style>
<![endif]-->

Remember to add this AFTER your CSS Stylesheet.

[yutewa00]

I resolved most of the problems. I have one left.

In IE background is only visible if height is specified. I would like to have min-height:400px; and then if more text is added I want to be fluid.

Someone knows how to deal with this bug ?

[jscheuer1]

I believe there are other ways to display the background, like:

position:relative;

[yutewa00]

I'm not sure I know what you mean.

[jscheuer1]

In place of specifying a style width, specifying a style position (of absolute). The relative value is usually easier to work with in an established page, but I was mistaken, it says below that it needs to be absolute (relative might work). There are other options:

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

- from:

http://msdn2.microsoft.com/en-us/library/ms532969.aspx

Of interest in the above is the fact that you may set the height or the width. Setting just the width might work out.

[yutewa00]

Setting width worked. Thank you!