SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dropdown menus: work in IE6 but not Mozilla

    using ypSlideOutMenus.

    problem #1
    i was successful to implement this in IE6 but not Mozilla (1.4, 1.5). the menus don't slideout relative to where their respective actuators are in mozilla but they do in IE.

    problem #2
    i was able to make the menus have a transparent background. anyone know a way to make the text/link solid (non-transparent). i tried having a span on the submenu/options as well as putting a class on the <a> tag.


    thanks in advance,
    sherwin

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    
    <style type="text/css">
    <!--
    body, table, tr, td, p {
    	font-family:Verdana, Arial, Helvetica, sans-serif; 
    	font-size:10px;
    }
    .menu {
    	font-size:9px;
    	color:#CCCCCC;
    	text-transform:uppercase;
    	cursor:default;
    	position:relative; z-index:1;
    }
    .menu a {
    	color:#666666;
    	text-decoration:none;
    	background-color:transparent;		
    }
    .menu a:hover {
    	color:#CC3333;
    	text-decoration:none;
    }
    .nav {
    	background-color:#F7F7F7;
    	border:1px solid #CCCCCC;
    	padding:8px;
    	filter:alpha(opacity=80);
    	-moz-opacity: .80;
    }
    .nav a {
    	text-decoration:none;
    	text-transform:none;
    }
    -->
    </style>
    
    <script language="javascript" src="ypSlideOutMenusC.js"></script>
    <script language="javascript"> 
    	new ypSlideOutMenu("menu1", "down", 0, 18, 100, 100), 
    	new ypSlideOutMenu("menu2", "down", 0, 18, 100, 100), 
    	new ypSlideOutMenu("menu3", "down", 0, 18, 100, 100),
    	new ypSlideOutMenu("menu4", "down", 0, 18, 100, 100) 
    </script>
    
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    	if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    	else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body bgcolor="#FFFFFF" background="/images/bkg.jpg" text="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     
    
    <table width="780" height="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC3333">
    	<tr valign="top">
    		<td width="760">
    <!-- NAV: START -->
    			<table width="708" height="72" border="0" cellpadding="0" cellspacing="0">
    				<tr valign="bottom" height="48">
    					<td align="left" width="200"><a href="/" target="_parent"></a></td>
    					<td align="right" nowrap>
    						<table height="100%" cellpadding="0" cellspacing="0" border="0">
    							<tr valign="bottom">
    								<td align="right" nowrap bgcolor="#FFFFFF">
    									<table width="100%" cellpadding="0" cellspacing="0" border="0">
    										<tr>
    											<td class="menu">
    												<a href="/" target="_parent" id="act0" onmouseover="ypSlideOutMenu.hideAll()">menu0</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    											</td>
    											<td class="menu">
    												<a href="/about/" target="_parent" id="act1" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')">menu1</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    												<div id="menu1Container">
    													<div id="menu1Content" class="nav">
    														<a href="#">m1.option 1</a><br>
    														<a href="#">m1.option 2</a><br>
    														<a href="#">m1.option 3</a><br>
    														<a href="#">m1.option 4</a><br>
    														<a href="#">m1.option 5</a><br>
    														<a href="#">m1.option 6</a>
    													</div>
    												</div>
    											</td>
    											<td class="menu">
    												<a href="/services/" target="_parent" id="act2" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')">menu2</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    												<div id="menu2Container">
    													<div id="menu2Content" class="nav">
    														<a href="#">m2.option 1</a><br>
    														<a href="#">m2.option 2</a><br>
    														<a href="#">m2.option 3</a><br>
    														<a href="#">m2.option 4</a><br>
    														<a href="#">m2.option 5</a><br>
    														<a href="#">m2.option 6</a>
    													</div>
    												</div>
    											</td>
    											<td class="menu">
    												<a href="/products/" target="_parent" id="act3" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')">menu3</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    												<div id="menu3Container">
    													<div id="menu3Content" class="nav">
    														<a href="#">m3.option 1</a><br>
    														<a href="#">m3.option 2</a><br>
    														<a href="#">m3.option 3</a><br>
    														<a href="#">m3.option 4</a><br>
    														<a href="#">m3.option 5</a><br>
    														<a href="#">m3.option 6</a>
    													</div>
    												</div>
    											</td>
    											<td class="menu">
    												<a href="/clients/" target="_parent" id="act4" onmouseover="ypSlideOutMenu.showMenu('menu4')" onmouseout="ypSlideOutMenu.hideMenu('menu4')">menu4</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
    												<div id="menu4Container">
    													<div id="menu4Content" class="nav">
    														<a href="#">m4.option 1</a><br>
    														<a href="#">m4.option 2</a><br>
    														<a href="#">m4.option 3</a><br>
    														<a href="#">m4.option 4</a><br>
    														<a href="#">m4.option 5</a><br>
    														<a href="#">m4.option 6</a>
    													</div>
    												</div>
    											</td>
    											<td class="menu"><a href="/contact/" target="_parent" id="act5" onmouseover="ypSlideOutMenu.hideAll()">menu6</a></td>
    										</tr>
    									</table>
    								</td>
    							</tr>
    					  </table>
    					</td>					
    				</tr>
    				<tr valign="top" height="26">
    					<td colspan="2"></td>
    				</tr>
    			</table>
    <!-- NAV: END -->
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    Attached Files Attached Files

  2. #2
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^bump


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
  •