Impossible de faire flotter l'image à droite du texte dans IE 6

Question

J'essaie de créer un petit grognement comme div pour un site. Cela fonctionne très bien dans Firefox, mais pas IE6 (je n'ai pas essayé IE7, mais j'ai encore besoin de supporter IE6).

Dans Firefox: texte centré avec image flottant sur le côté droit de div Dans IE6: texte centré avec image à gauche du texte. J'ai essayé de changer l'ordre des balises img et span, mais cela provoque un saut de ligne dans FF entre les deux, et IE rend l'image sur la droite du texte, mais pas ancré sur le côté droit de la div .

HTML

<div id="growl"> 
    <img src="close.gif" class="action" title="hide" /> 
    <span class="text">Grrrrrr.......</span> 
</div> 

En css:

#growl { 
    background-color:yellow; 
    text-align:center; 
    position:absolute; 
    top:0; left:0; 
    width:98%; 
    padding:10px 0; 
    margin-left:1%; 
    z-index:10; 
    border:1px solid #CCCCCC; 
} 

#growl > .text { 
    font-size:120%; 
    font-weight:bold; 
} 

#growl > .action { 
    float:right; 
    cursor:pointer; 
} 

Answer 1

Le> sélecteur ne fonctionne pas sur IE 6.

Il suffit de se débarrasser de celui-ci:

#growl .text { 
    font-size:120%; 
    font-weight:bold; 
} 

#growl .action { 
    float:right; 
    cursor:pointer; 
} 

Answer 2

Le > les sélecteurs css ne sont pas supportés par IE6 , essayez simplement de les supprimer.

Answer 3

Il est inutile d'ajouter une classe à chaque élément de la div lorsque vous n'avez qu'un img et un span. Faites-le à la place pour un code plus propre.

<div id="growl"> 
    <img src="close.gif" title="hide" /> 
    <span>Grrrrrr.......</span> 
</div> 

-

#growl { 
    background-color:yellow; 
    text-align:center; 
    position:absolute; 
    top:0; left:0; 
    width:98%; 
    padding:10px 0; 
    margin-left:1%; 
    z-index:10; 
    border:1px solid #CCCCCC; 
} 

#growl span { 
    font-size:120%; 
    font-weight:bold; 
} 

#growl img { 
    float:right; 
    cursor:pointer; 
}