I am attempting to add image bullet dividers on a horizontal list. The problem I am having is that it does not work cross browser. Might there be a better solution for this? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background-color:#003366;
}
#mastNav ul {
list-style: none;
float: right;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #fff;
}

#mastNav ul li {
display: inline;
background-image: url("http://www.geocities.com/johnblz187/whiteBullet.gif");
background-repeat:no-repeat;
background-position: right center;
padding: 0 4px 0 4px;
}
#mastNav ul li a:link {color: #fff; text-decoration: none;}
#mastNav ul li a:visited {color: #fff; text-decoration: none;}
#mastNav ul li a:hover {color: #fff; text-decoration: underline;}

#mastNav ul li.mastNavLast a {
color: #FFCC00;
}

#mastNav ul li.mastNavLast {
background-image: none;
}
</style>
</head>

<body>
<div id="mastNav">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li class="mastNavLast"><a href="#">Item 5</a></li>
</ul>
</div>
</body>
</html>