[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

[Bill Crawley]

strange thing is, my solution works in i.e. fine. The strange behaviour is in firefox.

[PeejAvery]

Can I suggest a different method?

<style type="text/css">
.menu_item {font-size: 0px; text-indent: -1000px; overflow: hidden; display: block; width: 120px; height: 24px;}
.menu_item:hover {background-position: 0px -24px;}
#menu_home {background-image: url(path/to/image.jpg);}
</style>

<a href="#" class="menu_item" id="menu_home">home</a>
<a href="#" class="menu_item" id="menu_about">about</a>
<a href="#" class="menu_item" id="menu_contact">contact</a>

With this example you stack the image in two just like the attached example.

[Bill Crawley]

The bar has to be horizontal. Tis strange as I cannot see anything that would cause it to fail in firefox. I'm using firefox 3.0.11

[PeejAvery]

You can make it horizontal by encasing it in a <div> tag with the same width.

P.S. Internet Explorer and Firefox/Safari render lists differently. Most of it is because of changes in how they handle margin and padding. Since you have not supplied all parameters for margin and padding, this might be the problem.

[Bill Crawley]

solved it, though i think I need a ceffeine fix now.

Here's the solution for anyone else that might hit this prob.

Assuming you have the code I originally pasted:

#navcontainer ul li a.home
{
	background-image: url(  '../Images/button_search_off.gif' );
	background-repeat: no-repeat;
	float:left;
	padding:1em 1em;  /* needed for firefox, remove for i.e. */
}

It's the padding that needs to be concentrated on.