Results 1 to 3 of 3

Thread: menu expands on subitem in IE, not in FF

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

    Default menu expands on subitem in IE, not in FF

    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.

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

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

    Default

    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):

    Code:
    /* 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:

    Code:
    .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 {}

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
  •