Block Elements Inline

Hey,
I'm doing a nav bar that is made up of css image rollovers but I'm having a problem making them inline in Firefox. If I use inline-block, firefox doesn't work, Safari does. If I just use block, they are not inline. What is a way around this? Do I have to use a <ul>? Here's my code:

HTML:

<a href="#" class="about">About</a>
<a href="#" class="news">News</a>
...etc.


CSS:

a.about {
height:24px;
width:74px;
overflow:hidden;
background:url(about.png) top left no-repeat;
display:inline-block;
text-indent:-5000px;
}

a.about:hover{
background-position: bottom left;
}

a.news {
height:24px;
width:70px;
overflow:hidden;
background:url(news.png) top left no-repeat;
display:inline-block;
text-indent:-5000px;
}

a.news:hover{
background-position: bottom left;
}

...etc.


site's here:
http://homepages.nyu.edu/~mlm440/thissideup3/

I'd just float them. If you're making a navbar, I'd also use a list as it makes more sense semantically. Check out http://css.maxdesign.com.au/floatutorial/.

Thanks for the quick help...must have had a brain fart, can't believe I forgot to float. Worked great though! Now it's all fixed.