Results 1 to 5 of 5

Thread: DD Tab Menu Shifting Right

  1. #1
    Join Date
    Mar 2007
    Location
    Madison, WI
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Tab Menu Shifting Right

    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.
    Last edited by ghalverson; 03-16-2007 at 02:40 AM. Reason: misspelling

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Two problems here. Inside your CSS, the code:
    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:

    Code:
    <!--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>).

  3. #3
    Join Date
    Mar 2007
    Location
    Madison, WI
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  4. #4
    Join Date
    Jan 2007
    Location
    Bournemouth, England
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    are you aware of this?


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

  5. #5
    Join Date
    Mar 2007
    Location
    Madison, WI
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •