navbar misbehaving... Options

[Maccabee]

Im making a site for someone and the nav is currently a image map but i dont like using image maps.
So im trying to make it from just css and an image but it aint working!
Heres what its supposed to look like:

click to enlarge

And here is the code im trying to change it too.

CODE

<style type="text/css">
#nav{
width:800px;
height:100px;
background-image:url(http://www.amelia.wefuze.com/designimages/blank_bar.png);
background-repeat:no-repeat;
padding-top:29px;
word-spacing:30px;
text-align:center;
}

a.nav:link, a.nav:active, a.nav:visited{
font-family:sans-serif;
color:#6F6F6F;
text-decoration:none;
font-size:24px;
padding-bottom:10px;


}

a.nav:hover{
color:#5e5e5e;
}

.divider{
padding-bottom:-10px;

}
</style>

<div id="nav">
<a class="nav" href="index.php">home</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="literary/">literary</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="art/">art</a> <img class="divider" src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="performance/">performance</a> <img class="divider"

src="http://www.amelia.wefuze.com/designimages/divider.gif">
<a class="nav" href="contact/">contact</a>
</div>

You can put the code in here to see it:
html editor

So you see whats happening?! The dividers are images but when i put them in the links moved down. So im trying to get the dividers to stay where they are but move up the links up to the center!?!

[fixtatik]

just quickly before this is closed...
using so many margins and padding is a little "risky," as some browsers read them differently than others. the easiest way to do it, using your original code, is to change this:

CODE

.divider { padding-bottom:-10px; }

to this:

CODE

.divider { vertical-align:middle; }