Drop Down Tabs not dropping down

[Ferretlover]

1) Script Title:
Drop Down Tabs (5 styles)

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

3) Describe problem:
When I went to get this script it was acting really strangely, then I figured out that the problem is that the page linked to the wrong script, so my instructions and files did not match.

Got the right file by typing in the file name, and followed the correct instructions, but it still didn't work. It does the mouse over effect, but no menus drop down, and it does not select the first tab, as I tell it to. It is like this in both IE & FF, except in IE it has an extra line after the menu.

You can see it at http://www.hideyhole.org/

Thank you,
Mike

[ddadmin]

The problem is that your initialization code for the menu is incorrect:

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

Since everything exists on the first line and is prefix with //, you've actually commented out everything by doing so. The correct format should be:

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

When I went to get this script it was acting really strangely, then I figured out that the problem is that the page linked to the wrong script, so my instructions and files did not match.

What do you mean? The link to the zip file? It's correct from what I can tell.

[Ferretlover]

Thank you, I removed the commented line and it worked great! I am still getting the extra line in IE though.

The zip file had been linked to the Drop Down Menu script file rather than the Drop Down tabs. The link name was right, but the target was not, but it seems all fixed now.

Thank you,
Mike

[Ferretlover]

Does anyone know what could cause the extra line to be showing up right below the menu in IE? It works and looks great in FF, but the gap after the menu in IE really makes my site look bad. You can see how it looks here: http://www.hideyhole.org/

[ddadmin]

Right now it's rather difficult for me to test the page out locally due to the imported CSS file(s) and other problems when trying to save the page.

One thing I'd try is to separate the HTML for the Tabs and the drop down menus. Right now, you have them all bunched up together:

<div class="glowingtabs" id="menuid"><ul><li class="selected default"><a href="http://www.hideyhole.org/"><span>Home</span></a></li><li><a href="#" rel="dropmenu1"><span>Articles</span></a></li><li><a href="#" rel="dropmenu3"><span>Features</span></a></li><li><a href="#" rel="dropmenu2"><span>Resources</span></a></li><li><a href="#" rel="dropmenu4"><span>Fun</span></a></li></ul></div><!--1st drop down menu --><div 

The part in red is where the HTML for your drop down DIVs begin. Try taking out that entire chunk, and moving it elsewhere, such as the bottom of your page (right above the </body>).

Then, for the FORM that's below the Tabs, you might want to try setting its margin/padding to 0:

<form action="index.php" method="post" style="margin:0;padding:0">

If that doesn't help, please create a fresh page with just the problematic header portion of your page and the relevant CSS, to make it easier for me to test things out locally.

[Ferretlover]

Thank you! Moving the drop down DIVs down to the bottom of the page did the trick, and it works and looks great now in both browsers.

Thank you again for your help.