Question

I need some help trying to get floats to display properly in IE. IE wants to add a newline after I try to float it [the arrow] to the right…

I would like it to display like Firefox (right), where it all fits in one line, but I can’t seem to figure out how…

Cheers.

background-image: url( '/img/arrow_down.gif' ); 
background-repeat: no-repeat;
height: 8px;
width: 15px;
display: inline;
float: right;

Answer 1

Posting your markup would help. A common cause of this is the arrow appearing after the text in the markup. If you move the arrow to before the text, it should look right in both. Like:

<span class="arrow-image"></span>This is the the text.

When I first started with web layout, this sounded really weird to me, but I was surprised to find it worked (and now that I understand float a little better, it makes a little sense to me).

You might be able to get away with this much simpler markup instead, though:

<ul id="menu">
    <li>Some text</li>
    <li>Some text</li>
    <li>Some text</li>
</ul>

And CSS:

#menu > li
{
    background-image: url('/img/arrow_down.gif');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right:16px; /* Width of the image */

    /* ... */
}