CSS: фоновое изображение для ссылки получает родительский цвет фона

Question

Не удалось решить, но я думаю, что проблема - это что-то другое, а не css или pngfix. Спасибо за ваши ответы.

Привет!

Не знаю, как определить проблему, поэтому я просто покажу ее вам. Я пытаюсь установить изображение как небольшое фоновое изображение ссылки. по какой-то причине на IE6 он наследует цвет фона из его родительского класса ...

Изображение здесь: 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; 
} 

и 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> 

Пробовал ВСЕ! :)

был бы признателен за любую помощь!

UPDATE:

также используется iepngfix.htc сценарий и поставить это на

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

Я знаю, что проблема связана с высотой: 30px; on .tabbed-box .top li.current a. когда я удаляю его или уменьшаю значение, получаю разные результаты, но ни один из них не решает проблему.

Answer 1

Проблема не в вашем CSS; это то, что IE6 нарушил поддержку прозрачности в графике PNG.

Мое мнение было бы просто не беспокоить поддержку IE6, потому что у него так много ошибок и проблем вроде этого. Но я понимаю, что это не вариант для всех.

Хорошая новость для этой конкретной ошибки, что есть хак, чтобы обойти это:

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

Надежда, что помогает.

[EDIT] Если это не сработает, я полагаю, что другой вариант заключается в том, чтобы преобразовать графику в формат GIF. Немного об отказе, но будет решать проблему быстрее, чем пытаться работать с ошибками IE6.

Answer 2

В IE6 есть проблема с отображением png-файлов, которые имеют прозрачные части. Есть некоторые обходные пути для JavaScript. Check this site, чтобы увидеть некоторые варианты.

Answer 3

попробуйте следующее:

.classname { 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cnr-heading.png', sizingMethod='scale');background: none; 
}