Horizontal Navigation Bar Display Question

[we_got_tops]

I have a CSS horizontal nav bar up on my site. I started by copying the code from another forum topic, and tinkered with things until it looked decent.

I'm trying to have the whole bar centered in my page. The problem is that the buttons aren't getting centered in all browsers. I can get it to look good in firefox by changing the padding (px and em) for the links. But then it doesn't look right in IE and vice versa.

I have also experimented with changing the border-width of the links, the ul border and width, and I don't have a firm grasp on what exactly these all exactly do.

Why is the navigation bar looking different in different browsers? Are there any fixes to make it display consistently? I've looked around for other forum topics, but I haven't seen one that clearly answers these questions.

I'm also pretty new to HTML/CSS, so if I'm doing anything wrong with this, please let me know.

Thanks.


#nav_bar ul{
font: bold 16px arial;
height: 30px;
width: 840px;
border: 2px ridge #000;
margin-left: auto;
margin-right: auto;
background-color: #AF3030;
}

#nav_bar ul li{
display: inline;
list-style: none;
text-align: center;
}

#nav_bar ul li a{
padding: 3px 1em;
text-decoration: none;
float: left;
color: white;
border-width: 4px;
}

#nav_bar ul li a:hover{
background-color: FFE271;
border-style: ridge;
}


<div id="nav_bar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="main_pages/award_winners.html">Award Winners</a></li>
<li><a href="main_pages/other_stories.html">Other Stories</a></li>
<li><a href="about/faq.html">FAQ</a></li>
<li><a href="main_pages/other_content/other_content.html">Fun Features</a></li>
<li><a href="main_pages/merchandise.html">Merchandise</a></li>
</ul>
</div>

[farcaster]

You will be discovering that IE conforms to its own standards - not the standards that the rest of the world adhere to.

Google searches will get you plenty on the subject, and many fixes for IE bugs.

I'll get you started at this web-site article. Go from there.

http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

[felgall]

The difference will be due to different default values assumed by the different browsers for those sizes that you don't specify.

If you specify

#nav_bar * {margin:0; padding:0;}

then that will override the defaults for the margin and padding on everything in your nav bar so that it should now look the same in all browsers.