css div and span display differently in browsers. How to unify?

I have a CSS file that displays correctly in FF12, but it is different in Safari and Chrome.

IF IMAGES DON'T LOAD, VIEW A LIVE DEMO at http://beattrack.net/test.php

Here is what it should and does look like in FF:

FF correct css

And here is what happens in Safari and Chrome:

Safari and Chrome difference

Here is the relavant CSS and HTML:

<style type="text/css">
    #topbar p.infotext {
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: 15px;
        color: #D8DFEA;
    }
    #topbar a.name, #topbar a.home {
        font-weight: bold;
        margin-top: 4px;
        line-height: 32px;
        font-size: 13px;
        text-align: right;
        color: #D8DFEA;
        padding-left: 12px;
        float: right;
        text-decoration: none;
        padding-right: 0px;
    }
    .divider {
        margin-top: 7px;
        line-height: 19px;
        border-right: 1px solid #5CCD3E;        
        float: right;
    }
</style>

<html>
  <div id="topbar">
    <a class="home" href="#">Home &nbsp; <span class="divider">&nbsp;</span></a>
    <a class="name" href="#"><?php echo $first_name . " " . $last_name . " &nbsp; ";?>
    <span class="divider">&nbsp;</span>
    </a>
  </div>
</html>

Solution

Although I'd recommend using an image rather than tacking on an extra .divider class, here is how I would modify your markup: http://jsfiddle.net/Wexcode/z9Esg/

HTML:

<div id="topbar">
    <a href="#">
        <strong>Home</strong><span></span>
    </a><a href="#">
        <strong>Adam Wexler</strong><span></span>
    </a>
</div>

CSS:

#topbar { text-align: right; }
#topbar a { 
    padding: 0 0 0 12px;
    vertical-align: middle;
    display: inline-block; }
#topbar strong, #topbar span { 
    vertical-align: middle;
    display: inline-block; }
#topbar strong { font-weight: normal; }
#topbar a:hover strong { text-decoration: underline; }
#topbar span { 
    background-color: #5CCD3E;
    height: 19px;
    width: 1px;
    margin: 0 0 0 12px; }