CSS: Trying to get a horizontal menu formatted the right way, not consistent accross browsers

I am trying to make a horizontal menu look pretty.

Here's an example of what my HTML looks like.

<div id="menu">
<ul>
    <li><a class="selected" href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="labs.html">Labs</a></li>
    <li><a href="assignments.html">Assignments</a></li>
</ul>
</div>

This is a snippet from my CSS. It does the job in Firefox but not IE.

#menu {
margin:auto;
padding-top: 4px;
width: 800px;
}

#menu ul
{
float:left;
list-style-type:none;
margin:0;
padding:0;
padding-top:7px;
padding-left:20px;
}    

#menu li
{
font: 87.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
display:inline-block;
}

#menu a, #menu a.selected
{
text-decoration:none;
color:#000;
background-color:#fff;
background-image:ur开发者_如何学Gol('../images/menu-unselected.jpg');
background-repeat:repeat-x;
padding-top:4px;
padding-bottom:0px;
padding-left:12px;
padding-right:12px;
border:solid;
border-width: 1px 1px 1px 1px;
border-color:#000;
}

#menu a.selected
{
padding-top:7px;
padding-bottom:1px;
border-width: 1px 1px 0px 1px;
}

#menu a:hover, #menu a.selected
{
background-image:url('');
}

I can make changes to the css to get it working right in IE, but then it doesn't work in FireFox! Here's screenshots of the code above rendered in each browser:

Firefox: here

Internet Explorer: here

---

This worked for me.

On #menu li instead of display:inline; replace it with float:left;

Then on #menu a.selected use padding and margin to reposition it taller than the others. I added:

padding-bottom:4px;
padding-top:7px;
margin-top:5px;

display:block; on #menu a seems optional. I'm on a Mac in FF 7.0.1 and it looks correct. Can't see it in IE. Hope that helps.

---

i tend to use display:inline-block; instead of float:left; when it's possible, and never had problems cross-browsers. So what i suggest to you is to use #menu li{ display:inline-block;}.

Obviously all changes are relative to your default layout ... wrappers,pages,body,html etc etc ..

---

Change display: inline-block; to display: inline; in your li.

Then add display: block; float: left; to your a.

You would then change the style of the tabs through the a tag (things such as text-align, width, etc).