Problem with aligning menu text and expand image correctly

[brixton]

Hello,

I have an "accordion menu" where I want the structure to be like this for a menu item with "children" who are supposed to drop down when an "expand image" is clicked:

<li>
    <span>some text</span>
    <img src="the_expand_image.gif" />
</li>

Now, for each menu item like that I want to align the span to the left, and the img to the right in my <li>. I haven't been able to find a cross-browser solution, setting float:left and float:right respectively doesn't work in older versions of IE (with compatibility view in IE8). I've also tried putting divs around the items and displaying the whole thing as a table (display:table, display:table-cell), but without success (maybe I'm doing that wrong, since I feel it SHOULD work) in IE.

So, pros, how would you do it? :)

Thanks!

[drhowarddrfine]

Not sure if this is what you mean but floating the image right alone doesn't do what you want?

[brixton]

It is, put simply, exactly what i WANT to do.
But doing this messes up the size of the <li> in IE7.
I need it to be exactly 30px high, and for some reason it becomes a few pixels higher than that if I do float:right on the image?