xwindowuser

ok I finally got it….I had to do this:

.hMenu li {

list-style: none;
}

that got rid of the dots, but now I want to put a small image in between the buttons like a line : |
but in a graphical representation.
how would i include an image in there instead of the dots?

ok I can add the ol or ul, but then it moves the list of pages down, how should I do this? any suggestions?
here is the code on the header.php page:

div class="hMenuContainer">

			<img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-left.gif" style="float: left;"/>
			<img alt="directory" src="http://www.datingsites-directory.com/wp-content/themes/bluetheme/images/nav-right.gif" style="float: right;"/>
		<div class="hMenu"><img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif"/>

		<a href="<?php echo get_settings('home'); ?>">Home</a><img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif"/>
		<?php wp_list_pages('title_li=&depth=1');?><img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif"/>

	</div>

here is the css file entry:

.hMenuContainer {
	height:43px;
	background:url('images/nav-back.gif') repeat-x;
}

.hMenu {
	float:left;
	width:933px;
}

.hMenu a:link, .hMenu a:active, .hMenu a:visited {
	float: left;
	display: block;
	height: 30px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
	padding: 12px 10px 0px 10px;
}

.hMenu a:hover {
	background: url('images/nav-back2.gif') repeat-x;
	float: left;
	display: block;
	height: 30px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;
}

.hMenu img {
	float: left;
	margin-top:5px;
}

any help is much appreciated.