Drop Down Tabs position

[arrowd]

1) Script Title: Drop Down Tabs

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

3) Describe problem: The script works great with the example code. I want to utilize example 5 and I have the nav tabs inside two other divs. The first has:

margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
width:768px;

And the second has:

margin-left:0;
position:relative;
padding:0;
float:right;

Two of the tabs (second and fifth) have drop downs. They both appeared too far to the right - by the amount of the offset from the left edge to the first tab. If I set the first div to margin-left:0; then everything is fine.

I looked at the js code and see that it's trying to figure the proper x-offset by stepping up through the parent element's offsets but something is wrong as shown in my case - it's adding the same offset twice. I changed the getposOffset function in the dropdowntabs.js code to:

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
if (offsettype=="top") {
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
}
return totaloffset;
},

This made things OK for me. I'm no expert in either CSS, DOM, or js so I can't say that this is the right thing to do in the general case.

Don

[ddadmin]

Hmmm perhaps a URL to the problem on your site would be helpful.

[arrowd]

See http://roomsrejuvenated.com/ddtdemo.htm.

The key is the "position:relative" inside the surround div. Without it all is well with the original js. I'm not sure why "position:relative" was in the code in the first place. I've removed it and the whole site looks fine.