Не удается разместить изображение справа от текста в IE 6

Question

Я пытаюсь создать небольшое рычание, как div для сайта. Он отлично работает в Firefox, но не в IE6 (я не пробовал IE7, но мне все еще нужно поддерживать IE6).

В Firefox: центрированный текст с изображением перемещен в правую сторону от div В IE6: центрированный текст с изображением слева от текста.

Я пытался изменить порядок тегов img и span, но это вызывает разрыв строки в FF между ними, и IE отображает изображение справа от текста, но не пристыковано к правой стороне div.

HTML

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

В 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

Селектор> не работает в IE 6.

Просто избавься от этого:

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

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

Answer 2

Селекторы> css не поддерживаются IE6, попробуйте просто удалить их.

Answer 3

Нет смысла добавлять класс к каждому элементу в div, если у вас есть только один img и span. Сделайте это вместо чистого кода.

<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;
}