Question

Not solved but I think the problem is something else and not the css or pngfix.
Thanks for your replies.

Hi!

Don’t know how to define the problem so I’ll just show it to you.
I’m trying to set an image as a small background image of a link. for some reason on IE6 it inherits the background color of it’s parent class…

Image here: http://lh4.ggpht.com/_Gj0LjMkd2XM/TOPp4gpuEzI/AAAAAAAAANE/0omEfRzIzho/2010-11-17_1637.png

CSS:

.tabbed-box .top li a {
    background: none repeat scroll 0 0 transparent;
    color: #8A8B86;
    display: block;
    float: left;
    font-size: 11px;
    font-weight: bold;
    height: 16px;
    margin: 0;
    padding: 6px 0 3px 12px;
    text-decoration: none;
}

.tabbed-box .top li.current {
    background-color: white;
    background-image: none;
    border: 1px solid #95B776;
    margin-top: -2px;
    z-index: 10;
}

.tabbed-box .top li.current a {
    background: url("quotes-arrow.png") no-repeat scroll 15px 24px transparent;
    color: #006697;
    position: relative;
    height: 30px;
}

and the HTML:

<div class="top">
            <ul>
                <li id="tab-forex" class="current">
                    <a href="#"><span>Forex</span></a>
                </li>
                <li id="tab-commodities" class="">
                    <a href="#"><span>Commodities</span></a>
                </li>
                <li id="tab-indices" class="">
                    <a href="#"><span>Indices</span></a>
                </li>
                <li id="tab-stocks" class="">
                    <a href="#"><span>Stocks</span></a>
                </li>
            </ul>
        </div>

Tried EVERYTHING! 🙂

would appreciate any help!

UPDATE:

also used iepngfix.htc script and put this on

<!--[if lte IE 6]>
    <style>
        .tabbed-box .top li.current a { behavior: url('iepngfix.htc'); }
    </style>
<![endif]-->

I know the problem is related to the height: 30px; on .tabbed-box .top li.current a. when I remove it or lower the value I get different results but none of them solves the problem.

Answer 1

The problem isn’t your CSS; it is that IE6 has broken support for transparency in PNG graphics.

My opinion would be just not to bother supporting IE6 because it has so many bugs and issues like this. But I understand that’s not an option for everyone.

The good news is for this particular bug, that there is a hack to get around it:

http://www.twinhelix.com/css/iepngfix/

Hope that helps.

[EDIT]
If that doesn’t work, I suppose the other option is to switch the graphic to be a GIF. Bit of a cop-out, but will sort out the problem quicker than trying to work around IE6’s failures.