Pulling my hair out...anylink drop down menu too high in Chrome and Safari

**jackmatthias** · 09-04-2011, 01:05 PM

1) Script Title: AnyLink JS Drop Down Menu v2.3

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

3) Describe problem: I am adding a drop down menu to an image (one of my rollover links). In IE and Firefox its fine and comes up nicely under my image link. But when I view it in Chrome and Safari it appears halfway down the image link. Its hard to describe what I mean so I will link you up...

http://healthtrain.co.uk/about2.html

I just want the menu to appear under the image (courses) link. I have added the default example and it works fine for that so it must be something to do with my image?! Please help, I have been searching for an answer for weeks and tried changing loads of the code! I changed the margin-top so that it looked good in Safari and Chrome but then it was really low in IE and FF.

Here is the page code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HealthTrain About</title>
<link rel="stylesheet" type="text/css" href="anylinkmenu.css" />

<script type="text/javascript" src="menucontents.js"></script>

<script type="text/javascript" src="anylinkmenu.js">

/***********************************************
* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>
<style type="text/css">
html {overflow-y: scroll;}
<!--
body {
	background-color: #2e56a5;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #23407C;
}
a:link {
	text-decoration: none;
	color: #23407C;
}
a:visited {
	text-decoration: none;
	color: #23407C;
}
a:hover {
	text-decoration: none;
	color: #80CEB9;
}
a:active {
	text-decoration: none;
	color: #23407C;
}
.style98 {font-size: 11px; color: #FFFFFF;}
.style10 {font-weight: bold}
.style8 {font-weight: bold}
.style89 {color: #2E56A5;
	font-weight: bold;
}
.style90 {	color: #000000;
	font-weight: bold;
}
.style105 {color: #FFFFFF}
.style106 {font-size: 11px}
.style108 {color: #23407C; font-weight: bold; }
.style109 {color: #23407C; }
.style110 {
	font-size: 12px;
	font-weight: bold;
}
-->
</style>
<script 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];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('','','linkaboutover.png','linkabouthover.png','linkprogrammehvr.png','linkabouthver.png','linkcourseshver.png','linkhcacoursehver.png','linkprogrammehver.png','linkbookingshver.png','linkevaluationshver.png','linkcontacthver.png')">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="627" align="center" valign="top"><table width="850" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td width="268"><img src="HeaderWhiteandGreen.png" width="267" height="100" border="0" usemap="#Map" /></td>
        <td width="582" valign="bottom"><div align="right"><img src="areyouontherighttrack.png" width="186" height="50" /></div></td>
      </tr>
    </table>
      <table width="850" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','linkabouthver.png',1)"><img src="linkabout.png" name="Image5" width="122" height="35" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','linkabouthover.png',1)"></a><a href="courses.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','linkcourseshver.png',1)" class="menuanchorclass" rel="anylinkmenu1"><img src="linkcourses.png" name="Image6" width="121" height="35" border="0" id="Image6"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','linkprogrammehvr.png',1)"></a><a href="hcacourse.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','linkhcacoursehver.png',1)"><img src="linkhcacourse.png" name="Image7" width="121" height="35" border="0" id="Image7" /></a><a href="programme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HealthTrain Programme Link','','linkprogrammehver.png',1)"><img src="linkprogramme.png" alt="HealthTrain Programme Link" name="HealthTrain Programme Link" width="122" height="35" border="0" id="HealthTrain Programme Link" /></a><a href="bookingform.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HealthTrain Bookings Link','','linkbookingshver.png',1)"><img src="linkbookings.png" alt="HealthTrain Bookings Link" name="HealthTrain Bookings Link" width="121" height="35" border="0" id="HealthTrain Bookings Link" /></a><a href="evaluations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HealthTrain Evaluations Link','','linkevaluationshver.png',1)"><img src="linkevaluations.png" alt="HealthTrain Evaluations Link" name="HealthTrain Evaluations Link" width="121" height="35" border="0" id="HealthTrain Evaluations Link" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('HealthTrain Contact Link','','linkcontacthver.png',1)"><img src="linkcontact.png" alt="HealthTrain Contact Link" name="HealthTrain Contact Link" width="122" height="35" border="0" id="HealthTrain Contact Link" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','linkaboutover.png',1)"></a></td>
        </tr>
      </table>
      <table width="850" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="65" valign="bottom" bgcolor="#FFFFFF"><div align="left"><img src="bottomleft.png" width="10" height="10" /></div></td>
          <td width="720" bgcolor="#FFFFFF"><h1 align="justify" class="style110">
            <p><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1">Default Example</a></p></h1>
          </td>
          <td width="65" valign="bottom" bgcolor="#FFFFFF"><div align="right"><img src="bottomright.png" width="10" height="10" align="absbottom" /></div></td>
        </tr>
      </table>
      <table width="850" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="23" class="style98"><div align="left"><span class="style105"><span class="style106">&copy; Website Designed by Jack Rawles</span></span></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


<map name="Map" id="Map"><area shape="rect" coords="4,33,252,85" href="index.html" />
</map></body>
</html>

and CSS:

Code:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #668ad5;
width: 364px; font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:Arial, Helvetica, sans-serif;
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type:none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
padding: 4px 0;
text-decoration: none;
color:#FFFFFF;
font-weight: bolder;
font-size: 12px;
text-indent: 38px;
}

.anylinkmenu a:hover{ /*hover background color*/
background:#80CEB9;
color:#FFFFFF;
}

.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

Thanks guys, any help would be appriciated!

Ps all of the other links are missing because I haven’t uploaded them to my server yet 

**jackmatthias** · 09-04-2011, 01:16 PM

Update: I have just noticed that the same happens with their example "image" (not the text). Is there any way around this?

Safari:

Firefox:

**jscheuer1** · 09-04-2011, 02:07 PM

Add to the anylinkmenu.css file:

Code:

.menuanchorclass {
	display: inline-block;
}

**jackmatthias** · 09-04-2011, 03:00 PM

John you absolute master

thank you so much!

**jackmatthias** · 10-29-2011, 08:45 PM

Hey John...I have another little problem with this. Its amazing in all web browsers on a Windows computer (even safari) but if I am on a mac (using safari) the drop down starts from the top of the page instead of under the 'courses' link.

Here is what I mean...

Any ideas? Thanks mate

**kpjordan** · 02-18-2012, 05:49 PM

Just found this solution and it works! Thanks John. I had been pulling out my hair trying to figure this out.

Thread: Pulling my hair out...anylink drop down menu too high in Chrome and Safari

Thread Tools

Search Thread

Pulling my hair out...anylink drop down menu too high in Chrome and Safari

Bookmarks

Bookmarks

Posting Permissions