Dropdown Tab Div not correctly positioned

[ecp5]

1) Script Title: Drop Down Tabs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem:
My DIV is getting a position attrbiute that I can't figure out where it is coming from. I have copied the example CSS and some CSS from another site that works correctly and nothing works. If I don't give it a DIV at all, it moves to the left margin of the parent DIV, but still not immediately below the main menu. Not sure what I am doing wrong. When I look in Firebug I see: (I can't find where the "element.style" is getting its positioning from)
element.style {
left:192px;
top:207px;
visibility:hidden;
}
.dropmenudiv_b {layout.css (line 47)
background-color:#757367;
border-color:#918D8D;
border-style:solid;
border-width:0 1px;
color:#FFFFFD;
font-family:Verdana;
font-size:9px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:12px;
opacity:0.9;
position:absolute;
top:0;
visibility:hidden;
width:150px;
z-index:100;

I have attached what it looks like when main menu moused over. If you need the site or full CSS, let me know.

Thanks for any help.

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[ecp5]

Currently, "Obituary Announcements" is the only live one for testing.

http://www.pearsonfuneralhome.com/2008_work/test.php

N.B. None of the links are live.

[Snookerman]

I'm pretty sure it comes from the .js file dropdowntabs.js. You can see this on lines 78 and 79:

this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
so it's somewhere around there. I'm not that good with java script so someone else will have to help you out there if you don't know how to fix it.

[ddadmin]

Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, you'd move this part over to here:


<div id="1" class="dropmenudiv_b">
<ul>
<li><a href="obit/main/">Current Obituaries</a></li>
<li><a href="obit/search/">Search Obituaries</a></li>
</ul>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("nav","auto")
</script>

</body>

[ecp5]

Ok, will try that. It had worked to start with, then moved a DIV, so that must have caused it. Was nested only for floating, so not sure how will deal with that.

Thanks.

[ecp5]

Ok, worked. I see what you were saying, that the DIV of the dropdown, which is invisible, doesn't need to be nested.

So all good. Had frustrated me for days.