I am trying to get a small image to show up as a "bullet" in my menu items. I have serached the forums and tried everything listed here (http://forum.bytesforall.com/showthread.php?t=452) as well as some solutions listed in other threads. Nothing changes in my menu with any of them.

http://thedawgsavers.com/ is the site. Any help would be appreciated. Thanks.

After some playing with Juggledad's code, I have the image showing up... but having some issues with the spacing around it. This is what I have now.

/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height:40px;  
	margin-top:0px; 
	background: #white; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: #white;
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                   */
/* ================================================ */
ul.rMenu li a:link, 
ul.rMenu li a:hover, 
ul.rMenu li a:active, 
ul.rMenu li a:visited, 
ul.rMenu li {
	background: url('http://thedawgsavers.com/wp-content/themes/atahualpa364/images/dogsilo.jpg') !important;
        background-repeat:no-repeat !important;
        color: #000000 !important;
        height: 30px;
}
/* ================================================ */
/* Category menu background                         */
/* ================================================ */
div#menu2 { 
	height: 40px;  
	margin-top:0px; 
	background: #green; 
}
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
	background: #orange;
	border: none 0px; 
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li a:link, 
#menu2 ul.rMenu li a:hover, 
#menu2 ul.rMenu li a:active, 
#menu2 ul.rMenu li a:visited, 
#menu2 ul.rMenu li {
	background: #purple !important;
	color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

As you can see at the link, I have the border hanging down over an area where the page background is showing through... how do I get rid of that or fill it in with white?

Also, I am having trouble with spacing the text for the menu items over so its not overlapping the image.

I'm going to keep working on this, hopefully I'll sort it out but if not, looking forward to some help.

Thanks.

I went back to check something and my images have vanished... no changes were made in between. Any suggestions as to what I did wrong?

You are in luck - there was a new addition in 3.6.4 - the text of a menu is now surrounded by a <span>...</span> so you can add a margin like this

ul.rMenu li a span {
         margin-left: 30px;
}

when I copied your code, the images showed up for me.

would you also use that span to center the text vertically? My icon is a smidge larger than my text, and I'd like to have it show up in the middle of the graphic.

http://kancmotorlodge.totalscopemarketing.com/

jrobie23 - the <span> is in the header menu, not the page widget. I'd use firebug in firefox to see what you could adjust