Drop Down Tabs in Container Problem

[hilikus0826]

Hello,

In reference to the tutorial "Drop Down Tabs (5 styles): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

I am using example #3, but from what I have been able to test, this problem applies to all of the examples. I am attempting to center all content on my site by placing everything in a container div and centering. I'm using the following code to do this:



#container{
position:relative;
height:auto;
width:1004px;
margin-left:auto;
margin-right:auto;
}




Well, this works well for the tabs, but the drop downs are coming out misaligned. They are also being centered along the page, but according to a different center point. When you expand the browser window, the drop downs expand along with them (like the rest of my content), just at a different centering point. If you resize the window small enough, they will show correctly, so someone with a lower screen resolution might see these correctly, but they are still not coded the way they should for everyone to see them. These tab drop downs work perfectly when they are not in a container. Here is the CSS code I have been using for the tabs, which is almost identical of that from the example. I've changed dimensions and such to allow for my images.



.slidetabsmenu{
float:left;
width:939px;
font-size: 12px;
line-height:normal;
}

* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

.slidetabsmenu ul{
list-style-type: none;
margin:0;
padding:0;
font: bold 14px Arial, Verdana, sans-serif;
}

.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
text-transform:uppercase;
}

.slidetabsmenu a{
float:left;
background:url(media/slide-right.gif) no-repeat left top;
margin:0;
margin-right: 0px;
padding-top:11px;
text-decoration:none;
width:313px;
height:21px;
}

.slidetabsmenu a span {
color:#1c3d57;
letter-spacing: 1px;
padding: 11px 8px 11px 11px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: black;
}

.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:bottom;
}

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:bottom;
}

html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}


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

.dropmenudiv_c{
width: auto;
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width:0 1px 1px 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
visibility: hidden;
}


.dropmenudiv_c a{
width: auto;
display: block;
text-indent: 5px;
padding: 2px 0;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: black;
width:311px;
}

* html .dropmenudiv_c a{ /*IE only hack*/
width: 311px;
}

.dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/
background-color: #eaeaea;
}


You can view the example of the problem HERE (http://www.alexcarvallo.com/test/example.html)

Any and all help would be greatly appreciated. Thanks!!

[ddadmin]

Try moving the HTML for the drop down tabs themselves outside any container other than the BODY, such as to the very bottom of the page:


<!--1st drop down menu -->
<div style="top: 276px; left: 447px; visibility: hidden;" id="dropmenu1_c" class="dropmenudiv_c">
<a style="border-top-width: 0pt;" href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></div>


<!--2nd drop down menu -->
<div style="top: 276px; left: 760px; visibility: hidden;" id="dropmenu2_c" class="dropmenudiv_c" align="left">
<a style="border-top-width: 0pt;" href="http://www.cssdrive.com/">CSS Drive</a>
<a href="http://www.javascriptkit.com/">JavaScript Kit</a>
<a href="http://www.codingforums.com/">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("slidemenu")
</script>
</body></html>

[hilikus0826]

Thanks!

That works perfectly. I had tried putting it at the top, but putting it at the bottom WITH the script works perfectly. Thanks again!

[lattzo]

It sucks that I can't ever figure out how to do this.