[RESOLVED] css navbar

[Bill Crawley]

Ok guys,

I've got a css navbar going horizontal and so far it looks good.

I want to replace the look such that I have a graphic on each button.

the html currently:

<div id="navcontainer">
            <ul id="navlist">
                <li id="active"><a href="QuickSearch.aspx" id="current">Quick Search</a></li>
                <li><a href="FullSearch.aspx">Full Search</a></li>
                <li><a href="OfficeSearch.aspx">Office Search</a></li>
                <li><a href="ProfileEdit.aspx">Edit Profile</a></li>
                <li><a href="#">Group Directory</a></li>
                <li><a href="Help.aspx">Help</a></li>
            </ul>
        </div>

and this is the css:

#navcontainer ul
{
	padding-left: 0;
	margin-left: 0;
	background-color: #039;
	color: White;
	float: left;
	width: 100%;
	font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
	padding: 0.2em 1em;
	background-color: #039;
	color: White;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
	background-color: #369;
	color: #fff;
}

The above comes from the listmatic site, so I dont want to take credit for it.
Ordinarily, I'd have just used a set of Image Controls, but I'm not allowed.

So far to try and get this working, I've created a new style that points to an image (dont care at this stage what te image is)

#navcontainer ul li a.home
{
	background-image: url(  '../Images/button_search_off.gif' );
	background-repeat: no-repeat;
	float: left;
}

and in the html I've placed a new li item referencing the above

<li class="home"><a href="QuickSearch.aspx" class="home"></a></li>

In the designer of vs2008 in design mode, the graphic displays as expected. However, when I run the page, the graphic almost disappears off the top of the navbar