menu expands on subitem in IE, not in FF

[bobloblaw]

Hi all,

New to this forum. I'm trying to get an expandable menu to open on the selected subitem when the subitem displays its page. That is, if a user selects the "About Us" subitem, the "About Us" page is displayed and the menu opens showing the "About Us" subitem as selected.

That's how the menu works in IE6 and IE7, but the menu doesn't expand in FF. I thought that there might be a javascript that I could use to force open the menu in FF.

I'm using an Interakt MX CSS menu (now owned but not supported by Adobe). The javascript for this menu system is long (2500 lines when formatted) and complicated, so I hesitate to post it. It uses PHP and MySQL so a typical subitem has a url value of something like "about.php".

It seems as though IE is able to pass "a:selected" or "a:active" to the selected page and then use it to open the menu to the correct subitem.

This could also be a CSS problem, but I've been unable to identify it.

Any help greatly appreciated.

[thetestingsite]

The best way for us to figure out a solution for your problem is by posting a link to your problem page and/or posting the code for the script in question.

Hope this helps.

[bobloblaw]

Yes you're right; I should have done that in the first place, so here's the site: http://confresctr.org

I'll gladly post the js for the Interakt menu, but I'm not sure it's allowed on this forum since it's code from a commercial product, and I wouldn't want to ask anyone to try to analyze 2500 lines of script.

Here's the relevant CSS for "staff.php" (the "about us" link), followed by the CSS skin for the expandable menu (I'm still learning CSS so it's not as clean as it could be):

/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}

body {
	width:100%;
	height:100%;	
	background-color: #F3F5F5;
}
a:link {
	text-decoration:none
}
h1 {
	width:222px;
	position:relative;
	top:0px;
	left:292px;
	font-size: 14px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	color:#333333;
	line-height: 18px;				
}
h2 {
	width:222px;
	position:relative;
	top:28px;
	left:292px;
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	color:#333333;
	line-height: 16px;			
}
p {
	width:464px;
	position:relative;
	top:0px;	
	left:0px;
	font-size: 11px;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	color:#333333;
	text-align:justify;
	line-height: 14px;			
}
ul {
	width:449px;
	position:relative;
	top:8px;
	left:0px;
	font-size: 11px;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	text-align:left;
	line-height: 14pt;
	list-style-type: disc;
	list-style-image:none;
	margin: 0px;
	list-style-position: outside;
	padding-left: 15px;
	text-indent: 0px;
}
ol.compact {
	list-style-type: disc;
	list-style-position: outside;
	margin-left:0px;
	list-style-image:none;
	display: list-item;
}
li {
	width:449px;
	position:relative;
	top:-4px;
	left:0px;
	font-size: 11px;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#0004BB;
	text-align:justify;
	line-height: 14px;
	margin: 0px 0px 0px 0px;
	display:list-item;
	padding-left: 0px;
	text-indent: 0px;
	vertical-align: text-top;
	padding-top: 0px;
}
select { 
	background-color: #F0ECEC; 
	font-size: 10pt;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	color:#998282;
}
textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	font-size: 11px;  
	font-weight: normal;
	text-align:justify;
	line-height: 14px;			
	color: #333333; 
	background-color: #FFFFFF; 
}

/********************** IDS ****************************************/
#wrapper {
	background-color: transparent;
	width:100%;
	height:100%;
	min-width:810px;
	min-height:660px;	
	position:relative;
	top:0px;
}
* html #wrapper{height:100%;}
#header {
	width:810px;
	height:154px;
	position:relative;
	top:30px;
	text-align:center;	
	margin-left:auto;
	margin-right:auto;		
}
#main {
	width:810px;
	height:486px;		
	position:relative;	
	top:30px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;	
}
#content {
	background-color: transparent;
	width:222px;
	height:400px;
	position:absolute;
	top:38px;
	left:50px;
	background-position:center;
	text-align:left;	
}
#mainnavmenu {
	width:464px;
	height:400px;
	text-align:left;
	top: 0px;
	left:0px;
}

This is the CSS skin for the expandable menu:

.gray_expand {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.gray_expand ul {
	background-color: transparent; 
}
.gray_expand li {
	top:0px;
	width: 180px;
	background-color: transparent; 	
}
.gray_expand ul li {
	margin: 0px 0px 0px 12px;
	background-color: transparent; 
	width: 180px;
}
.gray_expand a {                  
	font-size: 10px;
	font-weight: normal;		
	text-decoration: none;
	color: #6D8F92;    
	line-height: 16px;
	padding: 0px 0px 0px 12px;
	cursor: pointer;
	background-image: url('img/arrow_dark_hrizontall2.gif');
	background-repeat: no-repeat;
	background-position: 0px center;
}
.gray_expand ul a {                
	font-size: 10px;
	font-weight: normal;
	line-height: 16px;
	padding: 0px 0px 0px 12px;
}
.gray_expand li.hover {}
.gray_expand ul li.hover {}
.gray_expand a.hover {                  
	font-weight: normal;		
	color:#6D8F92; 
}
.gray_expand ul a.hover {                
	font-weight: normal;
}
.gray_expand li.selected {}
.gray_expand ul li.selected {}
.gray_expand a.selected {
	color:#0298CA;                  
}
.gray_expand ul a.selected {        
	color:#0298CA;                       
}
.gray_expand .arrow {
	background-image: url('img/arrow_dark_hrizontall2.gif');
	background-repeat: no-repeat;
	background-position: 0px center
}
.gray_expand a.hover {                  
	background-image:url('img/arrow_dark_verticall1.gif') !important;
	color:#3227F8;
}
.gray_expand .hover ul .arrow,
.gray_expand ul .arrow {
	background-image:url('img/arrow_dark_hrizontall2.gif');
	
}
.gray_expand .hover .arrow {
	background-image:url('img/arrow_dark_verticall1.gif') !important;
		
}
.gray_expand ul .hover .arrow {
	background-image:url('img/arrow_dark_verticall1.gif') !important;
	
}

div.expandable {
	clear: both;
}
div.expandable br {
	clear: both;
}
div.expandable ul {
	margin: 0px;
	padding: 0px;
	display: block;
	float: left;
	clear: both;
}
div.expandable li {
	list-style-type: none;
	display: block;
	float: left;
	clear: both;
	text-align: left;
    position: relative;
}
div.expandable li img {
	border: none;
}
div.expandable a {
	clear: both;
	float: none;
	display: block;
	margin: 0px;
}
div.expandable ul li ul {
	position: static;
	visibility: visible;
	display: block;
	clear: both;
	margin: 0px;
	margin-top: -5000px;
}
div.expandable ul li ul li ul {
	display: none;
}
div.expandable ul li ul li {
	clear: both;

}
div.expandable ul li ul li a {
	clear: both;
}
.hasImg,
.hasImg a {
	padding: 0px !important;
	margin:	0px	!important;
	border:	none !important;
	outline: none !important;
	background:	transparent !important;
	width: auto !important;
}


#DynCSSMenu2 {}
#DynCSSMenu2_item_0 {}
#DynCSSMenu2_item_1 {}
#DynCSSMenu2_item_1 a {}
#DynCSSMenu2_item_1 a.hover {}
#DynCSSMenu2_item_2 {}
#DynCSSMenu2_item_2 a {}
#DynCSSMenu2_item_2 a.hover {}
#DynCSSMenu2_item_3 {}
#DynCSSMenu2_item_3 a {}
#DynCSSMenu2_item_3 a.hover {}
#DynCSSMenu2_item_4 {            
	margin: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_4 a {
	background-image: url(none) !important;
	padding: 0px 0px 0px 12px !important;
	color:#333333 !important;         
}
#DynCSSMenu2_item_4 a.hover {    
	background-image: url(none) !important;
	color:#333333 !important;         	
}
#DynCSSMenu2_item_5 {            
	margin: 0px 0px 0px 36px !important;         
}
#DynCSSMenu2_item_5 a {          
	padding: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_5 a.hover {    
}
#DynCSSMenu2_item_6 {            
	margin: 0px 0px 0px 36px !important;         
}
#DynCSSMenu2_item_6 a {          
	padding: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_6 a.hover {}
#DynCSSMenu2_item_7 {            
	margin: 0px 0px 0px 36px !important;         
}
#DynCSSMenu2_item_7 a {          
	padding: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_7 a.hover {}
#DynCSSMenu2_item_8 {            
	margin: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_8 a {          
	background-image: url(none) !important;
	padding: 0px 0px 0px 12px !important;         
	color:#333333 !important;         
}
#DynCSSMenu2_item_8 a.hover {   
	background-image: url(none) !important; 
	color:#333333 !important;         	
}
#DynCSSMenu2_item_9 {            
	margin: 0px 0px 0px 36px !important;         
}
#DynCSSMenu2_item_9 a {          
	padding: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_9 a.hover {}
#DynCSSMenu2_item_10 {            
	margin: 0px 0px 0px 36px !important;         
}
#DynCSSMenu2_item_10 a {          
	padding: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_10 a.hover {}
#DynCSSMenu2_item_11 {            
	margin: 0px 0px 0px 36px !important;         
}
#DynCSSMenu2_item_11 a {
	padding: 0px 0px 0px 12px !important;         
}
#DynCSSMenu2_item_11 a.hover {}