Can't float image to the right of text in IE 6 - html

Question

I am trying to create a little growl like div for a site. It works great in Firefox, but not IE6 (haven't tried IE7, but I still need to support IE6).
In Firefox: Centered text with image floated to right side of div
In IE6: Centered text with image to the left of text.
I've tried switching the img and span tag order, but that causes a line break in FF between the two, and IE renders the image on the right of the text, but not docked to the right side of the div.
HTML
<div id="growl">
<img src="close.gif" class="action" title="hide" />
<span class="text">Grrrrrr.......</span>
</div>
In 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

The > selector does not work on IE 6.
Just get rid of it:
#growl .text {
font-size:120%;
font-weight:bold;
}
#growl .action {
float:right;
cursor:pointer;
}

Answer 2

The > css selectors are not supported by IE6, try just removing them.

Answer 3

No point in adding a class to each elements in the div when you only have one img and span. Do this instead for cleaner code.
<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;
}