float: right with <li> is not working

Question

Hello All:

I have following code which works fine in firefox and ie 8, but in IE 7 the second li is coming with some top space instead of same line.

    <LI style="PADDING-LEFT: 20px">
           Sort by: <SELECT id=ddSortOrder class='content-select'> 
    <OPTION selected value=0>Recommended
    </OPTION></SELECT> 
    </LI>
    <LI id=lipageAnchors><<&nbsp;|&nbsp;<&nbsp;|&nbsp;Previous&nbsp;|&nbsp;
    <A class=current title=1 >1</A>&nbsp;|&nbsp;
    <A title=2>2</A>&nbsp;|&nbsp;
<A title=3 >3</A>&nbsp;|&nbsp;
<A title=Next >Next</A>&nbsp;|&nbsp;>&nbsp;|&nbsp;>></LI>

The First <li> comes in left as expected but the second <li> should float to right, but it is to right with some extra space. I want both the <li> in same line (position), which works in firefox and IE 8 but in IE 7 is not.

Image link http://www.imagechicken.com/viewpic.php?p=1275649526056730400&amp;x=jpg

Please help!

Thanks Ashwani

Answer 1

This is because you have the following html code:

</LI>
<LI>

You should be fine if you put them into one line.

Answer 2

There are a few html errors in your code.

Replace your < with %lt; and your > with >. Because <&nbsp> will render as a invalid html tag.

And remember to wrap your html-tag attributes values within " (double quotes) like this:

<li id="lipageAnchors"><!-- Content goes here --></li>

And to answer your question about the float:right, put it on the <ul> tag. You might also set a width on it to be sure you get it to the right.

I Hope this will be to any help.