My website nav menu renders badly in IE7 and below - Need your advice

Question

I'm working on a site currently which has a simple css nav menu with css that looks like so:

#nav {
    background: #ffffff;
    list-style: none; 
    width:300px;
    height:100px;
    float:right;

    border-color: #600;
    border-width: 1px 1px 1px 1px;
    border-style: solid;

    }

#nav a {
    color: #bf511e;
    text-decoration: none;
    margin: 55px 15px 0px;
    font: bold 18px/100% georgia, verdana, Helvetica, sans-serif;
    font-style: italic;
    float:right;
    }

#nav ul {
    clear:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    text-align:right;
    display:block;
    }

#nav li {
    margin: 0 auto;
    display:block;
    text-align:right;
    }

#nav a:hover {
    color: #ea895c;
    }

with the HTML code looking like:

<div id="nav">  
                <ul>
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="/">Home</a></li>
                </ul>
            </div>

The result is that,

on Chrome, FF, Opera and IE8 (I think), it looks fine (SO lets me add only one hyperlink, so I've linked you to the broken image)

On IE7 and lower, it looks like so: http://tinypic.com/r/2r5u5a1/7

Is there something obvious I'm doing wrong here? or is this a known bug?

I'm pretty much a beginner to CSS layouts, so help pointing me in the right direction will be appreciated. Didn't come across similar issues after some googling.

Answer 1

use display:inline instead of display block in UL and Li css

nav ul {

clear:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
text-align:right; 
display:inline; 
} 

nav li {

margin: 0 auto; 
display:inline; 
text-align:right; 
} 

if you have anymore concerns leave comment i can rectify.

Answer 2

Remove float: right from your #nav a, and add float: right to #nav li