Center DD Tab Menu

[mstyers]

1) DD Tab Menu / Example #3
2) http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
3) I am trying to center the DD Tab menu. I can get it centered by removing the float: left and adding the correct padding but then the hover will not work correctly. I am getting a gap between the menu items.

Can someone help?

Thanks.

CSS


.solidblockmenu ul{
margin: 0;
padding: 9px 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.jpg) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
/*float: left;*/
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li a.current{
color: white;
background: transparent url(images/blockactive.jpg) center center repeat-x;
}



HTML


<div id="ddtabs3" class="solidblockmenu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="firstpage.html">First Page</a></li>
<li><a href="secondpage.html">Second Page</a></li>
<li><a href="thirdpage.html">Third Page</a></li>
</ul>
</div>

[mstyers]

I also tried changing the CSS below from a previous post and I'm getting the same issue.



.solidblockmenu ul{
margin: 0 auto;
padding: 9px 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(images/blockdefault.jpg) center center repeat-x;
width: 780px;
}

.solidblockmenu li a{
/*float: left;*/
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}


The menu is centered but with the hover there is an image gap on the left side of the menu items.

Any help would be appreciated.

Thanks.

[mstyers]

One of the suggestions in another post was to use the Chrome CSS menu (http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm). I took a look at that page and these demo's have the same problem.

[mstyers]

I'm really disappointed that I didn't even get one reply.

However, I was able to find a solution from another forum.

Here are the css changes that worked. I'm sorry but some of the code has been modified for my specific application.

CSS


.solidblockmenu {
margin: 0;
padding: 0;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
background: black url(images/blockdefault.gif) center center repeat-x;
}

.solidblockmenu ul {
width: 443px; /* Width of menu UL block. Used FF Developer Toolbar Ruler to determine the width. */
margin: 0 auto;
padding: 0;
}

.solidblockmenu li {
display: inline;
}

.solidblockmenu li a {
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid #FFFFFF;
}

.solidblockmenu li a:visited {
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current {
color: white;
background: transparent url(images/blockactive.gif) center center repeat-x;
}


I hope this helps someone else.