Results 1 to 4 of 4

Thread: DD Tab Menu problem with IE

  1. #1
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Tab Menu problem with IE

    DD Tab Menu

    http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    Hi -

    I'm using the DD Tab Menu for a 2 level menu. All seems to be working fine in FF and Safari, but when I view it in IE the top level of the menu steps down with each tab instead of staying in a straight horizontal line

    Test site - http://www.companyx.com.au/sant/

    I've looked on the forums and couldn't find anyone else with a similar problem. I've been playing around with the CSS all day and I'm no closer to an answer. Any help would be much appreciated.

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

    Default

    Hi:
    There may be other things missing, but in your solidblackmenu.css file, you need to add back in:

    Code:
    .solidblockmenu li{
    display: inline;
    }
    That was part of the original CSS btw.

  3. #3
    Join Date
    Sep 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi -

    Thanks so much for your help!

    I've added those lines back in and it seems to have fixed the problem in IE. But now it creates a problem in FF - the first tab is positioned correctly but the rest are one step below

    From memory that's why I took out those lines in the first place

    Any ideas?

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

    Default

    I see the problem in Firefox. Also in IE, the tab content (2nd level content) actually is partially hidden. Since you're not too familiar with CSS, it's probably best that you minimize the amount of editing you do, and try and start out with a menu design that pretty much resembles what you need already. One menu on DD that seems to fit that design is Underline Horizontal Menu. I reworked it for the purpose of the script. Try replacing your current .css file's contents with this one instead:

    Code:
    .solidblockmenu{
    margin: 0;
    padding: 0;
    }
    
    .solidblockmenu ul{
    margin: 0;
    padding-left: 0;
    float: left;
    font-weight: bold;
    width: 100%;
    border: 1px solid #DFDFDF;
    border-width: 1px 0;
    }
    
    * html .solidblockmenu ul{ /*IE only rule. Delete extra margin-bottom*/
    margin-bottom: 0;
    }
    
    .solidblockmenu ul li{
    display: inline;
    }
    
    
    .solidblockmenu ul li a{
    float: left;
    color: gray;
    font-weight: bold;
    padding: 4px 6px 3px 6px;
    text-decoration: none;
    border-right: 1px dashed gray;
    background: white url(media/menudivide.gif) top right repeat-y;
    }
    
    .solidblockmenu ul li a:hover, .solidblockmenu ul li a.current{
    color: black;
    background-color: #F3F3F3;
    border-top: 4px solid black;
    padding-top: 0;
    }
    
    .tabcontainer{
    clear: left;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }
    
    *:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/
    margin-top: -1em;
    }
    
    * html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/
    margin-top: -1em;
    }
    
    .tabcontent{
    display:none;
    }
    Now at least you're starting out with a menu that should work reliably in all the major browsers.

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
  •