Navigation bar CSS is not properly displayed in Firefox but it's OK with IE

navigation bar css not properly display in firefox but its ok with IE

css code

#topnav ul
{
    display:table;
    list-style-type:none;
    margin:0;
    padding:0;

    overflow:hidden;
}

#topnav li
{   

    float:left;

}

#topvav a:link,
#topnav a:visited
{
    display:block;
    width:120px;
    font-weight:bold;
    font-family:calibri;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

#topnav a:hover,
#topnav a:active
{
    background-color:#7A991A;
}

html code

<ul id="topnav">
    <li id="topnav"><a  href="#home">Home</a><开发者_JAVA百科/li>
    <li id="topnav"><a  href="#news">OPD</a></li>
    <li id="topnav"><a  href="#news">IPD</a></li>
    <li id="topnav"><a  href="#news">Infrastucture</a></li>
    <li id="topnav"><a  href="#news">Gallery</a></li>
    <li id="topnav"><a  href="#news">Media</a></li>
    <li id="topnav"><a  href="#contact">Site Map</a></li>
    <li id="topnav"><a  href="#about">About</a></li>
</ul>


</tr>

---

You are using ids not properly. ID's have to be unique for the whole page. Also you do not need li elements with ids. You can access the li elements by CSS like this.

#topnav li

Then, your selector #topnav ul is not valid. it should be ul#topnav (as far as what I can see from your posted HTML)

---

Change "float: left;" in #topnav li to "display: inline;".