I'm creating boxed elements to display in a page and I have stars that show a rating on the right-hand side. These do not display correctly in IE and it seems that that they are being pushed down and occluded in IE, but not in Firefox. Is there any styling I can add to stop this happening? Thanks.

 

<div class = "aaa" style="height:18px; background-color:#ffcb99; font-weight:900;padding:8px;border-bottom-style:solid; border-bottom-width:2px;">
	The Tullie Inn 

	<span style="float:right;"> 
	<img src="/images/assets/_star.png" alt="" width="15" height="15" /><img src="/images/assets/_star.png" alt="" width="15" height="15" /><img src="/images/assets/_star.png" alt="" width="15" height="15" />		</span>

	</div >

firstly you would be better off using a css class in an external style sheet rather than doing it inline.

 

Try this for the css class:

 

.float_right {
   float: right;
   display: inline-block;
}

 

apply it to the span as:

 

<span class="float_right">

This an annoying ie bug which, to confirm craftgeeks response, can be fixed by explicitly specifying the display property when an element is floated. I automatically add

display:inline; 

when specifying

float

.

Thanks for the tips. Unfortunately, it's still not working: IE still adds an extra line before displaying the images on the right hand side, which means they don't fit within the corresponding element. I've tried adding display:inline; to the existing div element and changing it to a class as craftygeek suggested, but with no success. The element in which it sits is defined:

#aa{
height:18px; background-color:#000; color:#ffa743; font-weight:900;padding:3px;border-bottom-style:solid; border-bottom-width:2px;
}

 

I don't know if that might be causing problems. Any suggestions?

Have you got a link to the page

Does this do what you want?

<div class = "aaa" style="height:18px; background-color:#ffcb99; 
font-weight:900;padding:8px;border-bottom-style:solid; 
border-bottom-width:2px;">
	<span style="float:left;">The Tullie Inn</span>

	<span style="float:right;"> 
	<img src="/images/assets/_star.png" alt="" width="15" 
height="15" /><img src="/images/assets/_star.png" alt="" width="15" 
height="15" /><img src="/images/assets/_star.png" alt="" width="15" 
height="15" />		</span>

	</div >

 

The images were on a lower line in IE7 until I added the span with float: left for the text.

Nice 1! Thanks Wickham -- that works a treat. (die ie7, die).

Seems like you have your answer.. damn i hate IE..