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