DD Tab Menu problem with IE

[audio1]

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.

[ddadmin]

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

.solidblockmenu li{
display: inline;
}

That was part of the original CSS btw.

[audio1]

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?

[ddadmin]

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:

.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.