Results 1 to 2 of 2

Thread: Anylink Drop-down - ie incompatible - help!

  1. #1
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Anylink Drop-down - ie incompatible - help!

    1) Script Title: Anylink Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

    3) Describe problem: I applied the code to my menu and the drop down function works in firefox but not in IE. Instead, IE tried to open the menu title link instead of using it to expand the drop down menu.

    I would appreciate any help, thanks!

    Here is my code (and I will follow this by the attached css):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- InstanceBegin template="/Templates/index3columns.dwt" codeOutsideHTMLIsLocked="false" -->
    
    <head>
    
    <meta name="Description" content="Information architecture, Web Design, Web Standards." />
    <meta name="Keywords" content="your, keywords" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Distribution" content="Global" />
    <meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
    <meta name="Robots" content="index,follow" />
    
    <title>Culture International</title>
    <link href="file:///C|/Documents and Settings/Nobody/Desktop/culture_international_website/images/BrightSide.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style1 {color: #FFFFFF}
    -->
    </style><br />
    
    
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:0px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #FFFFFF;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down Menu-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="history.html">History</a>'
    menu1[1]='<a href="mission.html">Our Mission</a>'
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="southeastasia.html">Southeast Asia</a>'
    menu2[1]='<a href="india.html">India</a>'
    menu2[2]='<a href="indonesia.html">Indonesia</a>'
    
    //Contents for menu 3, and so on
    var menu3=new Array()
    menu3[0]='<a href="officers.html">Officers</a>'
    menu3[1]='<a href="directors.html">Board of Directors</a>'
    menu3[2]='<a href="leaders.html">Program Leaders</a>'
    menu3[3]='<a href="volunteers.html">Volunteers</a>'
    
    var menuwidth='165px' //default menu width
    var menubgcolor='white'  //menu bgcolor
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top="-500px"
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    
    </script>
    
    
    </head>
    
    
    <body>
    
    		<!-- Menu Tabs -->
    		<!-- InstanceBeginEditable name="topnav" -->
    		<ul>
              <li id="current"><a href="index.html"><span>Home</span></a></li>
    <li><a href="about.html"><span>About Us</span></a></li>
    <li><a href="programs.html"><span>Programs</span></a></li>
    <li><a href="staff.html"><span>Staff</span></a></li>
    <li><a href="volunteer.html"><span>Volunteer</span></a></li>
    <li><a href="contact.html"><span>Contact</span></a></li>
    </ul>
    		<!-- InstanceEndEditable --></div>	
    				
    
    </body>
    <!-- InstanceEnd --></html>
    Last edited by ddadmin; 10-20-2008 at 05:47 AM.

  2. #2
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default and here is the css

    Here is the css:


    Code:
    /********************************************
       AUTHOR:  			Erwin Aligam 
       WEBSITE:   			http://www.styleshout.com/
    	TEMPLATE NAME: 	Bright Side of Life
       TEMPLATE CODE: 	S-0005
       VERSION:          1.0          	
     *******************************************/ 
     
    /********************************************
       HTML ELEMENTS
    ********************************************/ 
    
    /* top elements */
    * { padding: 0; margin: 0; }
    
    body {
    	margin: 0;
    	padding: 0;
    	font: .70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
    	color: #666666;
    	text-align: center;
    	background-color: #A9BAC3;
    	background-image: url(bg.gif);
    	background-repeat: repeat-x;
    }
    
    /* links */
    a { 
    	color: #4284B0;
    	background-color: inherit;
    	text-decoration: none;
    }
    a:hover {
    	color: #9EC068;
    	background-color: inherit;
    }
    
    /* headers */
    h1, h2, h3 {
    	font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
    	color: #333;	
    }
    h1 { font-size: 1.5em; color: #6297BC; } 
    h2 { font-size: 1.4em; text-transform:uppercase;}
    h3 { font-size: 1.3em; }
    
    p, h1, h2, h3 {
    	margin: 10px 15px;
    }
    ul, ol {
    	margin: 10px 30px;
    	padding: 0 15px;
    	color: #4284B0;
    }
    ul span, ol span {
    	color: #666666; 
    }
    
    /* images */
    img {
    	border: 0px solid #CCC;
    }
    img.no-border {
    	border: none;
    }
    img.float-right {
      margin: 5px 0px 5px 15px;  
    }
    img.float-left {
      margin: 5px 15px 5px 0px;
    }
    a img {
    	border-top-color: #568EB6;
    	border-right-color: #568EB6;
    	border-bottom-color: #568EB6;
    	border-left-color: #568EB6;
    }
    a:hover img {  
      border: 2px solid #CCC !important; /* IE fix*/
      border: 2px solid #568EB6;
    }
    
    code {
      margin: 5px 0;
      padding: 10px;
      text-align: left;
      display: block;
      overflow: auto;  
      font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
      /* white-space: pre; */
      background: #FAFAFA;
      border: 1px solid #f2f2f2;  
      border-left: 4px solid #4284B0; 
    }
    acronym {
      cursor: help;
      border-bottom: 1px solid #777;
    }
    blockquote {
    	margin: 15px;
    	padding: 0 0 0 20px;
    	background: #FAFAFA;
    	border: 1px solid #f2f2f2;
    	border-left: 4px solid #4284B0;
    	color: #4284B0;
    	font-family: Georgia, 'Bookman Old Style', Serif;
    	font-size: 1em;
    	line-height: 1.5em;
    	font-weight: bold;
    }
    
    /* form elements */
    form {
    	margin:10px; padding: 0;
    	border: 1px solid #f2f2f2; 
    	background-color: #FAFAFA; 
    }
    label {
    	display:block;
    	font-weight:bold;
    	margin:5px 0;
    }
    input {
    	padding: 2px;
    	border:1px solid #eee;
    	font: normal 1em Verdana, sans-serif;
    	color:#777;
    }
    textarea {
    	width:300px;
    	padding:2px;
    	font: normal 1em Verdana, sans-serif;
    	border:1px solid #eee;
    	height:100px;
    	display:block;
    	color:#777;
    }
    input.button { 
    	margin: 0; 
    	font: bold 1em Arial, Sans-serif; 
    	border: 1px solid #CCC;
    	background: #FFF; 
    	padding: 2px 3px; 
    	color: #4284B0;	
    }
    
    /* search form */
    form.searchform {
    	background: transparent;
    	border: none;
    	margin: 0; padding: 0;
    }
    form.searchform input.textbox { 
    	margin: 0; 
    	width: 120px;
    	border: 1px solid #9EC630; 
    	background: #FFF;
    	color: #333; 
    	height: 14px;
    	vertical-align: top;
    }
    form.searchform input.button { 
    	margin: 0; 
    	padding: 2px 3px; 
    	font: bold 12px Arial, Sans-serif; 
    	background: #FAFAFA;
    	border: 1px solid #f2f2f2;
    	color: #777;	
    	width: 60px;
    	vertical-align: top;
    }
    
    /***********************
    	  LAYOUT
    ************************/
    #wrap {
    	background: #FFF;
    	width: 760px;
    	height: 100%;
    	text-align: left;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    #content-wrap {
    	clear: both;
    	margin: 0; padding: 0;	
    	background: #FFF;
    }
    
    /* header */
    #header {
    	position: relative;
    	height: 85px;	
    	background: #000 url(headerbg.gif) repeat-x 0% 100%;	
    }
    #header h1#logo {
    	position: absolute;
    	margin: 0; padding: 0;
    	font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
    	letter-spacing: -2px;
    	text-transform: lowercase;
    	top: 0; left: 5px;	
    }
    #header h2#slogan {
    	position: absolute;
    	top:37px;
    	left: 20px;
    	color: #666666;
    	text-indent: 0px;
    	font: bold 11px Tahoma, 'trebuchet MS', Sans-serif;
    	text-transform: none;
    }
    #header form.searchform {
    	position: absolute;
    	top: 0; right: -12px;	
    }
    
    /* main */
    #main {
    	float: left;
    	padding: 0;
    	width: 370px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 5px;
    }
    
    .post-footer {
    	background-color: #FAFAFA;
    	padding: 5px; margin: 20px 15px 0 15px;
    	border: 1px solid #f2f2f2;
    	font-size: 95%;	
    }
    .post-footer .date {
    	background: url(clock.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .comments {
    	background: url(comment.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .readmore {
    	background: url(page.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    
    /* main2 */
    #main2 {
    	float: right;
    	margin-left: 5px;
    	padding: 0;
    	width: 573px;
    }
    
    .post-footer {
    	background-color: #FAFAFA;
    	padding: 5px; margin: 20px 15px 0 15px;
    	border: 1px solid #f2f2f2;
    	font-size: 95%;	
    }
    .post-footer .date {
    	background: url(clock.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .comments {
    	background: url(comment.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    .post-footer .readmore {
    	background: url(page.gif) no-repeat left center;
    	padding-left: 20px; margin: 0 10px 0 5px;
    }
    
    /* sidebar */
    #sidebar {
    	float: left;
    	width: 180px;
    	margin: 0;
    	padding: 0;
    	display: inline;
    }
    #sidebar ul.sidemenu {
    	list-style:none;
    	margin:10px 0 10px 15px;
    	padding:0;		
    }
    #sidebar ul.sidemenu li {
    	margin-bottom:1px;
    	border: 1px solid #f2f2f2;
    }
    #sidebar ul.sidemenu a {
    	display:block;
    	font-weight:bold;
    	color: #333;	
    	text-decoration:none;	
    	padding:2px 5px 2px 10px;
    	background: #f2f2f2;
    	border-left:4px solid #CCC;	
    	
    	min-height:18px;
    }
    
    * html body #sidebar ul.sidemenu a { height: 18px; }
    
    #sidebar ul.sidemenu a:hover {
    	padding:2px 5px 2px 10px;
    	background: #f2f2f2;
    	color: #339900;
    	border-left:4px solid #9EC630;
    }
    
    /* rightbar */
    #rightbar {
    	float: right;
    	width: 200px;
    	padding: 0;
    	margin:0;
    }
    
    /* Footer */
    #footer { 
    	clear: both; 
    	color: #FFF; 
    	background: #A9BAC3; 
    	border-top: 5px solid #568EB6;
    	margin: 0; padding: 0; 
    	height: 50px;	  
    	font-size: 95%;		
    }
    #footer a { 
    	text-decoration: none; 
    	font-weight: bold;	
    	color: #FFF;
    }
    #footer .footer-left{
    	float: left;
    	width: 65%;
    }
    #footer .footer-right{
    	float: right;
    	width: 30%;
    }
    
    /* menu tabs */
    #header ul {
    	z-index: 999999;
    	position: absolute;
       margin:0; padding: 0;
       list-style:none;
    	right: 0; 
    	bottom: 6px !important; bottom: 5px;
    	font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;	
    }
    #header li {
       display:inline;
       margin:0; padding:0;
    }
    #header a {
       float:left;
       background: url(tableft.gif) no-repeat left top;
       margin:0;
       padding:0 0 0 4px;
       text-decoration:none;
    }
    #header a span {
       float:left;
       display:block;
       background: url(tabright.gif) no-repeat right top;
       padding:6px 15px 3px 8px;
       color: #FFF;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a span {float:none;}
    /* End IE5-Mac hack */
    #header a:hover span {
    	color:#FFF;
    }
    #header a:hover {
       background-position:0% -42px;
    }
    #header a:hover span {
       background-position:100% -42px;
    }
    #header #current a {
       background-position:0% -42px;
    	color: #FFF;
    }
    #header #current a span {
       background-position:100% -42px;
    	color: #FFF;
    }
    /* end menu tabs */
    
    /* alignment classes */
    .float-left  { float: left; }
    .float-right {	float: right; }
    .align-left  {	text-align: left; }
    .align-right {	text-align: right; }
    
    /* additional classes */
    .clear { clear: both; }
    .green {	color: #9EC630; }
    .gray  {	color: #BFBFBF; }
    Last edited by ddadmin; 10-20-2008 at 05:47 AM.

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
  •