PDA

View Full Version : 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/dynamicindex1/dropmenuindex.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:


<!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','linkpr ogrammehver.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:


.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! :confused:

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

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:

http://img.photobucket.com/albums/v88/jackbaps/safari.png

Firefox:

http://img.photobucket.com/albums/v88/jackbaps/ff.png

jscheuer1
09-04-2011, 02:07 PM
Add to the anylinkmenu.css file:


.menuanchorclass {
display: inline-block;
}

jackmatthias
09-04-2011, 03:00 PM
John you absolute master :D 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...

http://img.photobucket.com/albums/v88/jackbaps/healthtrainmac.jpg

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.