Navigation Bar Image Issues

[MR]

Hello All

First off, as always, thanks so much for your assistance, you guys are the best!

I have uploaded an image to use as my navbar, it is working fine. The issue is that when I attempt to change the selected page color, hover color or right border color, it either doesn't work, or I end up losing the navbar image completely. I've tried everything to get this to work, to no avail.

The color I'm trying to use for all of these is #748A4C. Below is the CSS I copied from my Advanced tab: (It includes all of the customized CSS I;ve used, but the NAV section is there):

/* Page Title */
#xg_body h1,
#xg_body ul.navigation a,
#xg_navigation ul li.this a,
#xg_navigation ul li a:hover {
color:/* %pageTitleColor% */ #333333;
}
/* Tab Color */
#xg_navigation ul li a {
background-color:/* %headTabColor% */ #748A4C;
}
/* Module Body: Background & Text */
.xg_module_body,
.xg_module_body legend,
.xg_module_body legend.toggle a,
.xg_module_foot,
ul.page_tabs li.this {
background-color:/* %moduleBodyBgColor% */ #FFFFFF;
background-image:/* %moduleBgImage% */ none;
background-repeat:/* %moduleBgImage_repeat% */ no-repeat;
}
/* Module Body: Headings */
.xg_module_body h3,
.xg_module_body caption {
color:/* %moduleHeadingColor% */ #333333;}

#xg_navigation {
margin-top: 0em;
background: url(http://hapsack.ning.com/img/nav_black.png) center -1px repeat-x;
height: 31px; }

#xg_navigation ul {
margin:0pt 0em;}

#xg_navigation ul li {
margin:0pt 0pt 0pt 0px;}

#xg_navigation ul li a {
padding: 6px 15px;
background-color: transparent;
color: #fff;
text-decoration: none;
line-height: 1.6em;
float: left;
border-right: 1px solid #0c5684;
text-decoration: none;
font-size: 1.0em;
font-weight: bold;}

#xg_navigation ul li a:hover {
text-decoration: none;
border-right: 1px solid #0c5684;
color: #fff;
background: #ddd url(http://hapsack.ning.com/img/nav_black.png) center -33px repeat-x; }

#xg_navigation ul li.this {
background: #ddd url(http://hapsack.ning.com/img/nav_black.png) center -33px repeat-x; }

#xg_navigation ul li.this a {
background: #ddd url(http://hapsack.ning.com/img/nav_black.png) center -33px repeat-x; }


.xg_module_head
{
background-image:url(http://img521.imageshack.us/img521/7513/black34oy4.png);
background-repeat:repeat-x;
border-bottom:1px solid #748a4c;
margin-bottom:0pt;

}
#xg_masthead {
height: 125px;
}

#xg { background-position: 0px 0px;
}

#application_name_header_link {
z-index: 0;
}


Any assistance you can offer would be greatly appreciated.

Thanks,
Michael

[zerox]

Thanks for the codes.
(http://hapsack.ning.com/img/nav_black.png)
That image link including in the code does not work.. Page not found error..!
can i use above css codes with this break link.??
Please reply.. I will be waiting yr answer..
If can't, please re-check your link..
Thanks again..
(So sorry for my english)