CSS: image d'arrière-plan pour le lien obtient la couleur d'arrière-plan parent

Question

Non résolu mais je pense que le problème est autre chose et non le css ou pngfix. Merci pour vos réponses.

Salut!

Je ne sais pas comment définir le problème, je vais donc vous le montrer. J'essaie de définir une image comme une petite image d'arrière-plan d'un lien. pour une raison quelconque sur IE6, il hérite de la couleur de fond de sa catégorie mère ...

image ici: 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; 
} 

et le code 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> 

Essayé TOUT! :)

apprécierions toute aide!

MISE À JOUR:

également utilisé le script iepngfix.htc et de mettre cela sur

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

Je sais que le problème est lié à la hauteur: 30px; sur .tabbed-box .top li.current a. quand je l'enlève ou baisse la valeur j'obtiens des résultats différents mais aucun d'entre eux ne résout le problème.

Answer 1

Le problème n'est pas votre CSS; c'est que IE6 a cassé le support de la transparence dans les graphiques PNG. Mon avis serait de ne pas déranger IE6 parce qu'il a tellement de bugs et de problèmes comme celui-ci. Mais je comprends que ce n'est pas une option pour tout le monde.

Les bonnes nouvelles sont pour ce bug particulier, qu'il ya un hack pour contourner:

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

espoir qui aide.

[EDIT] Si cela ne fonctionne pas, je suppose que l'autre option consiste à changer le graphique pour qu'il soit un fichier GIF. Peu d'un cop-out, mais va régler le problème plus rapidement que d'essayer de contourner les échecs d'IE6.

Answer 2

IE6 a un problème d'affichage des fichiers PNG qui ont des parties transparentes. Il y a quelques solutions de contournement JavaScript. Check this site pour voir quelques options.

Answer 3

les opérations suivantes:

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