DD Tab Menu Shifting Right

[ghalverson]

1) Script TitleD Tab Menu

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

3) Describe problem:
My dropdown menus are not aligning properly, they are off to the right and well below the menu in IE7 and in FF they are even further to the right.

I have setup a DIV for the navigation and was thinking that z-index maybe had a part to play with the problem, but no such luck. I have successfully used the Chrome menu, but I can't seem to get this one working.

Here is the test site with the menus not working
http://www.theblastma.com/new/

Here is my implementation of the chrome and it works fine
http://www.theblastma.com

Thanks in advanced, let me know what code you may need to see.

[ddadmin]

Two problems here. Inside your CSS, the code:

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

The part in red should be "absolute". I'm not sure why you had changed that value from the default.

Then, the reason for the misalignment is because your drop down DIVs themselves are contained inside a bunch of other elements that are doing some complex positioning themselves, absolute elements nested in relative elements and so on. Cut out this chunk of code on your page:

<!--1st drop down menu -->                                                   
<div style="top: 220px; left: 230px; visibility: hidden; border-top-width: 0pt;" id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a 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>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px; top: 220px; left: 340px; visibility: hidden; border-top-width: 0pt;">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a 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>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a 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">
//tabdropdown.initializetabmenu("tab_menu_id", optional_selected_tab_number)
//ie: tabdropdown.initializetabmenu("tab_menu_id", 2)
tabdropdown.initializetabmenu("shademenu")
</script>

and move it to the end of your page (just above </body>).

[ghalverson]

Thank you!! Thank you!!

I didn't think I adjusted that inherit setting, but I must have. Also moving that code to the end works like a champ.

Everything is awesome!! This is a really cool site and your help is greatly appreciated.

[killerchutney]

are you aware of this?


Just incase you are using IE6. I'm sure that this is not supposed to happen.

[ghalverson]

Yeah, the problem actually isn't fixed on my test link, just on my development box. If you want to test it with IE6, it will be uploaded later tonight.

What you see in that screen capture is what has been driving me crazy for several days, but the fix that the admin gave me works like a champ in both IE7 and FF2, and I will be doing further testing on IE6 and some others later tonight.

Thanks for looking into it, I appreciate the help!!

This site will be going live tomorrow, so you can also check it then.