I've been working to eliminate the nested tables from my flooring site (http://jmfloorcovering.com). I also decided to get rid of the JavaScript used in the upper navbar too. My efforts have resulted in this: http://www.jmfloorcovering.com/test/...eader_nav.html

I have tried to follow the advice that some have given to other people concerning navbars using UL/LI techniques. For a n00b, I am not unhappy with what I've done so far, but it really puzzles me why the navbar is centered nicely in IE and Opera, but drops the last nav item to the next line in FireFox.

You are welcome to download the CSS file, but here is the relevant section for your perusal:

#topnav {
	position: relative;
	top: 150px;
	background-color: transparent;
	margin: auto;
	width: 552px;
	height: 30px;
	text-align: center;
	z-index: 300;
}
#navbar_t ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}
#navbar_t li
{
	float: left;
	list-style-type: none;
}
#navbar_t li.tile
{
	background-color: transparent;
	width: 25px;
	height: 30px;
}
#navbar_t li.home
{
	background:url(images/nav/btn_home_f2.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.about
{
	background:url(images/nav/btn_about_f2.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.projects
{
	background:url(images/nav/btn_projects_f2.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.guides
{
	background:url(images/nav/btn_guides_f2.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.resources
{
	background:url(images/nav/btn_resources_f2.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t a
{
	display: block;
	width: 90px;
	height: 30px;
}
#navbar_t li.home a
{
	background:url(images/nav/btn_home.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.about a
{
	background: url(images/nav/btn_about.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.projects a
{
	background:url(images/nav/btn_projects.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.guides a
{
	background:url(images/nav/btn_guides.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
#navbar_t li.resources a
{
	background:url(images/nav/btn_resources.gif) no-repeat left top;
	width: 90px;
	height: 30px;
}
ul#navbar_t a:hover
{
	background: transparent;
}
ul#navbar_t a:focus
{
	background: transparent;
}

Here, too, is the relevant markup:

<div id="topnav">
	<ul id="navbar_t">
		<li class="home"><a href="#"></a></li>
		<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
		<li class="about"><a href="#"></a></li>
		<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
		<li class="projects"><a href="#"></a></li>
		<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
		<li class="guides"><a href="#"></a></li>
		<li class="tile"><img src="images/nav/navtile.gif" alt="" /></li>
		<li class="resources"><a href="#"></a></li>
	</ul>
</div>

I've tried several things, including changing the width of the container from 552px to 600px and to 100%. Both resizes put the navbar all on one line, but the 600px (and I tried a lot of numbers in between) made the navbar off-center by 20 or 30 pixels and 100% made the navbar move all the way to the left side of the browser.

I hope someone can guide me to a solution. Next, I will be adding popup (drop-down) menus to all the buttons except Home.

Thank you,

Grump

change

#navbar_t ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

to

#navbar_t
{
	margin: 0;
	padding: 0;
	list-style: none;
}

Thank you. That was too easy.