Drop Down Tabs - Centering Example 1

[gingertea]

1) Script Title: Drop Down Tabs (5 styles) - I am using Example 1, though I've gotten rid of the line beneath the tabs because I want to center this layout.

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm

3) Describe problem: I am currently having trouble trying to center the Drop Down Tabs utilizing the style in Example 1. I don't want to confine my tabs to a table of set width because of problems across browers shifting buttons and so on. Yet if I set the width to 100% and set margins to auto... I'm still not coming up with a layout that's perfectly centered. From what I've been reading, it appears to be the result of elements with float:left. I fiddled for several hours now and can't seem to get it right. If anyone could provide me with a centered css version of this script, I'd be incredibly grateful.

Aloha and Mahalo,

Kelly

[rangana]

Have you tried changing the text-align property from left to center

.basictab ul{
margin: 4px;
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

[gingertea]

Aloha Rangana,

Mahalo for helping me - I really appreciate your time and energy. I added the text-align element to the ul of ddcolortabs.css and it does not center. I noticed that two of the other stylesheets (bluetabs & halfmoontabs) come with the text-align element in their ul though ddcolortabs does not. Have any other suggestions?

I'm posting the standard css for ddcolortabs below:

.

ddcolortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background: black url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #591f20;
}

.ddcolortabs a:hover span{
background-color: #591f20;
}

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #591f20;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: black;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid black; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #8a3c3d;
color: white;
}

[ddadmin]

To be honest I've yet to find a solution based on my limited research to centering floated elements using CSS. Using JavaScript to dynamically center the menu tabs should be possible, but the effect definitely won't be as seamless as using CSS as the tabs jump to their correct position after the page has loaded and also, each time the browser is resized.