CSS problem: links delayed in Firefox in 800x600 window
I am using a css dropdown menu on static HTML pages
The problem is that the divs used for the menu add a margin to the bottom of the page
I can adjust that by giving the main page container a negative bottom margin
However, when the page is viewed in Firefox in an 800x600 window or screen, the links on the top left side are not activated at first - moving the mouse around can activate them.
I have checked, this is definitely caused by the negative bottom margin (-800px).
Realizing that we are probably talking about a fraction of a percent of viewers, and even then the problem "goes away" before most people would notice it - anybody got a bright idea?
HTML:
<html>
<head>
<title>NYICC - Business development and branding specialists who work with startups and existing companies.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-US">
<meta name="Rating" content="General">
<meta name="copyright" content="NYICC">
<meta name="author" content="removed for this post">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="30 days">
<meta name="description" content="By offering anything from ad/marketing strategy and execution to new product and sales development, NYICC helps companies to obtain stronger market exposure and improved profits by repairing identified weak spots* in such areas as business operations, marketing/promotions, and sales strategy.">
<meta name="keywords" content="NYICC, business development, branding, advertising, marketing, promotions, corporate identity, web development, business consultants, company finances, market planning, product development, startup, sales strategy, business expansion, small business, turnaround specialists, channel distribution, all media design, all media content development, business communications">
<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />
<script type="text/javascript" src="anylinkcssmenu.js">
/***********************************************
* AnyLink CSS Menu script 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/anylinkcss.htm for full source code
***********************************************/
</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];}}
}
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>
<body background="llbt/bgall.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('bildlib/tinylogo2.png','llbt/NVxLL1.jpg','llbt/NVxLL4.jpg','llbt/NVxLL8.jpg','llbt/tb_2.jpg','llbt/tb_4.jpg','llbt/tb_6.jpg','llbt/tb_8.jpg','llbt/tb_10.jpg','llbt/tb_12.jpg','llbt/LSID_1.jpg','llbt/LSID_3.jpg','llbt/LSID_5.jpg','llbt/LSID_7.jpg')">
<div id="container" align="center">
<table width=767 height="64" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td height="0" valign=top><div align="center"><img src="llbt/TOPSPC.png" width="19" height="6"></div></td>
</tr>
<tr>
<td height="16" valign=top><table width=767 height="48" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td width="284" valign=top> <table width=284 height="38" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td height="16" valign=top><a href="articles.htm" target="_self" onMouseOver="MM_swapImage('Image34','','llbt/NVxLL1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/NVxLL.jpg" name="Image34" width="284" height="46" border="0"></a></td>
</tr>
<tr>
<td height="16" valign=top><img src="llbt/NVxLL2.jpg" width="284" height="57"></td>
</tr>
</table></td>
<td width="207" height="16" valign=top><a href="index.htm" target="_self" onMouseOver="MM_swapImage('Image31','','llbt/NVxLL4.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/NVxLL3.jpg" name="Image31" width="207" height="103" border="0"></a></td>
<td width="70" valign=top><img src="llbt/NVxLL5.jpg" width="70" height="103"></td>
<td width="206" valign=top><table width=206 height="38" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td height="16" valign=top><a href="login/index.htm" target="_self" onMouseOver="MM_swapImage('Image30','','llbt/NVxLL8.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/NVxLL7.jpg" name="Image30" width="206" height="41" border="0"></a></td>
</tr>
<tr>
<td height="16" valign=top><img src="llbt/NVxLL6.jpg" width="206" height="62"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="16" colspan="4" valign=top><a href="index.htm" target="_self" onMouseOver="MM_swapImage('Image19','','llbt/tb_2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/tb_1.jpg" name="Image19" width="135" height="38" border="0"></a><a href="aboutus.htm" class="anchorclass" rel="submenu1" target="_self" onMouseOver="MM_swapImage('Image20','','llbt/tb_4.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/tb_3.jpg" name="Image20" width="124" height="38" border="0"></a><a href="services.htm" class="anchorclass" rel="submenu2" target="_self" onMouseOver="MM_swapImage('Image21','','llbt/tb_6.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/tb_5.jpg" name="Image21" width="125" height="38" border="0"></a><a href="news.htm" class="anchorclass" rel="submenu3" target="_self" onMouseOver="MM_swapImage('Image22','','llbt/tb_8.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/tb_7.jpg" name="Image22" width="125" height="38" border="0"></a><a href="articles.htm" class="anchorclass" rel="submenu4" target="_self" onMouseOver="MM_swapImage('Image23','','llbt/tb_10.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/tb_9.jpg" name="Image23" width="124" height="38" border="0"></a><a href="contact.htm" target="_self" class="anchorclass" rel="submenu5" onMouseOver="MM_swapImage('Image24','','llbt/tb_12.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/tb_11.jpg" name="Image24" width="134" height="38" border="0"></a></td>
</tr>
<tr>
<td height="16" colspan="4" valign=top><img src="llbt/tnsepnv.jpg" width="767" height="18"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="16" valign=top background="llbt/bg1.jpg"><table width=767 height="16" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td width="232" valign=top><table width=232 height="12" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td width="19" height="12" valign=top><p><img src="llbt/TOPSPC.png" width="19" height="6"></p></td>
<td width="213" valign=top><div align="left"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif"><strong><font color="#666666">About</font><font size="2"><br>
<img src="llbt/TOPSPC.png" width="19" height="6"><br>
· Our Team<br>
<img src="llbt/TOPSPC.png" width="19" height="6"><br>
· <a href="mission.htm" target="_self">Our Mission</a><br>
<img src="llbt/TOPSPC.png" width="19" height="6"><br>
· <a href="faqs.htm" target="_self">FAQs</a><br>
<img src="llbt/TOPSPC.png" width="19" height="6"><br>
· <a href="press.htm" target="_self">Press</a> </font></strong></font><font size="2"><strong><font face="Arial, Helvetica, sans-serif"><br>
<img src="llbt/TOPSPC.png" width="19" height="6"> </font></strong></font></div></td>
</tr>
</table>
<table width=232 height="93" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td width="282" height="16" valign=top><a href="news.htm" target="_self" onMouseOver="MM_swapImage('Image35','','llbt/LSID_1.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/LSID_2.jpg" name="Image35" width="232" height="125" border="0"></a></td>
</tr>
<tr>
<td height="11" valign=top><img src="llbt/LSID_spc.jpg" width="232" height="11"></td>
</tr>
<tr>
<td height="11" valign=top><a href="advice.htm" target="_self" onMouseOver="MM_swapImage('Image29','','llbt/LSID_3.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/LSID_4.jpg" name="Image29" width="232" height="123" border="0"></a></td>
</tr>
<tr>
<td height="11" valign=top><img src="llbt/LSID_spc.jpg" width="232" height="11"></td>
</tr>
<tr>
<td height="11" valign=top><a href="contact.htm" target="_self" onMouseOver="MM_swapImage('Image32','','llbt/LSID_5.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/LSID_6.jpg" name="Image32" width="232" height="107" border="0"></a></td>
</tr>
<tr>
<td height="11" valign=top><img src="llbt/LSID_spc.jpg" width="232" height="11"></td>
</tr>
<tr>
<td height="11" valign=top><a href="contact.htm" target="_self" onMouseOver="MM_swapImage('Image33','','llbt/LSID_7.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="llbt/LSID_8.jpg" name="Image33" width="232" height="91" border="0"></a></td>
</tr>
<tr>
<td height="11" valign=top> </td>
</tr>
</table></td>
<td width="10" height="16" valign=top><img src="llbt/TOPSPC.png" width="8" height="8"></td>
<td width="525" valign=top><table width=100% height="16" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td width="10" valign=top><img src="llbt/TOPSPC.png" width="12" height="8"></td>
<td width="507" height="16" valign=top><p align="justify"><font color="#598F50" size="4" face="Arial, Helvetica, sans-serif"><strong>About
Our Team</strong></font><font color="#333333" size="2" face="Arial, Helvetica, sans-serif"><img src="img/25p%5B6.png" width="66" height="66" align="right"></font></p>
<p align="justify"><font color="#333333" size="2" face="Arial, Helvetica, sans-serif">At
NYICC, our team of business experts with different specialties
has more than 50 years of combined experience in building
successful businesses large and small.</font></p>
<p align="justify"><font color="#333333" size="2" face="Arial, Helvetica, sans-serif">We
act as a full-service business development, marketing, and
branding consultancy and agency. Whether it’s something
simple like an ad/marketing campaign or a complete business
or identity overhaul, we will work with you to establish
solutions that work for you today and, more importantly,
tomorrow. We are able to work with new and established businesses
on everything from creating a face to establishing proper
internal and/or external operations. </font></p>
<p align="justify"><font color="#333333" size="2" face="Arial, Helvetica, sans-serif">As
turnaround specialists, we can work with you to expand your
sales, create promotions, or come up with new and effective
marketing solutions to stimulate and motivate brand awareness
and sales, or to enter into new channels or direct distribution.
We can also, should you require it, help you during key
transition times, whether you are changing locations, rationalizing
inventory, shuffling internal staff, or implementing new
processes.</font></p>
<p align="justify"><font color="#333333" size="2" face="Arial, Helvetica, sans-serif"><img src="img/USA.png" width="31" height="31" align="left">Our
team of specialists runs the gamut of successful business
development areas, including:<img src="img/Trash-Empty.png" width="190" height="190" align="right"></font></p>
<p align="justify"><font color="#333333" size="2" face="Arial, Helvetica, sans-serif">•
Business Development<br>
• Sales and Sales Management<br>
• Effective Promotional Development<br>
• Market Planning and Creation<br>
• New Product Development<br>
• Company Identity and Branding<br>
• All Media Content Development<br>
• Web Development<br>
<br>
<img src="img/Stylo.png" width="36" height="36" align="left">
Have questions about how the process works? <a href="contact.htm" target="_self">Contact
us</a> and one of our business development professionals
will assist you.</font></p>
</td>
<td width="10" valign=top><img src="llbt/TOPSPC.png" width="26" height="8"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="16" valign=top><table width="767" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="52" background="llbt/xbott.png"><div align="center">
<table width=749 height="12" border=0 cellpadding=0 cellspacing=0 class=contentTable>
<tr>
<td width="391" height="12" valign=top><p><font color="#333333" size="1" face="Arial, Helvetica, sans-serif">©
<strong>NYICC</strong> 2 Executive Blvd Suite 301 Suffern,
NY 10901 • 877-25-NYICC</font></p></td>
<td width="358" valign=top><div align="right"><font color="#333333" size="1" face="Arial, Helvetica, sans-serif"><a href="index.htm" target="_self">Home</a>
<a href="sitemap.htm" target="_self">Sitemap</a> <a href="contact.htm" target="_self">Contact</a>
<a href="privacy.htm" target="_self">Privacy Policy</a>
Powered by <a href="http://www.colorfury.com" target="_blank">Colorfury</a></font></div></td>
</tr>
</table>
</div></td>
</tr>
</table></td>
</tr>
</table>
<!-- dropdown menus -->
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="aboutus.htm">Our Team</a></li>
<li><a href="mission.htm">Our Mission</a></li>
<li><a href="faqs.htm">FAQs</a></li>
<li><a href="press.htm">Press</a></li>
</ul>
</div>
<div id="submenu2" class="anylinkcss">
<ul>
<li><a href="services.htm">How We Work</a></li>
<li><a href="businessdev.htm">Business Development</a></li>
<li><a href="marketingpromo.htm">Marketing/Promotion</a></li>
<li><a href="companybranding.htm">Company Branding</a></li>
<li><a href="servicefeatures.htm">Service Features</a></li>
<li><a href="industriesserved.htm">Industries Served</a></li>
<li><a href="clientstories.htm">Client Stories</a></li>
</ul>
</div>
<div id="submenu3" class="anylinkcss">
<ul>
<li><a href="news.htm">All Business</a></li>
<li><a href="news_general.htm">General Business</a></li>
<li><a href="news_small.htm">Small Business</a></li>
<li><a href="news_startup.htm">Startup</a></li>
</ul>
</div>
<div id="submenu4" class="anylinkcss">
<ul>
<li><a href="articles.htm">NYICC Knowledge Center</a></li>
<li><a href="articles_general.htm">General Business</a></li>
<li><a href="articles_small.htm">Small Business</a></li>
<li><a href="articles_startup.htm">Startup</a></li>
</ul>
</div>
<div id="submenu5" class="anylinkcss">
<ul>
<li><a href="contact.htm">Get in Touch</a></li>
<li><a href="contact_directions.htm">Get Directions</a></li>
<li><a href="contact_mailinglist.htm">Mailing List</a></li>
<li><a href="contact_careers.htm">Careers</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") //call this function at the very *end* of the document!
anylinkcssmenu.init("anchorclass")
</script>
</BODY>
</html>CSS:
/* General Link Styles */
a:link, a:visited {color: #3b5bef; text-decoration:none}
a:hover, a:active {color: #0000ee; background: #ecaa45; text-decoration:none}
/* ######### Default class for drop down menus ######### */
/* adjust bottom margin */
div#container {margin-bottom: -800px}
.anylinkcss{
position: absolute;
left: 0;
margin-top: -10px;
visibility: hidden;
z-index: 100; /* zIndex should be greater than that of shadow's below */
width: 200px; /* default width for menu */
}
.anylinkcss ul{
margin: 0 0 0 8px;
padding: 0;
list-style-type: none;
}
.anylinkcss ul li a{
width: 105%;
display: block;
background: url('llbt/menubg.png');
color: #426a8d;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
font-size: .9em;
height: 25px;
padding: 5px 0 0 16px;
}
.anylinkcss ul li a:hover{
background: url('llbt/menubg-over.png');
color: #5b5f62;
}
/* ######### Alternate multi-column class for drop down menus ######### */
.anylinkcsscols{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
}
.anylinkcsscols .column{
width: 130px;
float: left;
}
.anylinkcsscols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}JavaScript:
//** AnyLink CSS Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm
//** January 19', 2009: Script Creation date
var anylinkcssmenu={
menusmap: {},
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects
dimensions: {},
getoffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},
getoffsetof:function(el){
el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
},
getdimensions:function(menu){
this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
docscrolly:window.pageYOffset || this.standardbody.scrollTop
}
if (!this.dimensions.dropmenuw){
this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
}
},
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
setopacity:function(el, value){
el.style.opacity=value
if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
el.style.MozOpacity=value
if (el.filters){
el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
}
}
},
showmenu:function(menuid){
var menu=anylinkcssmenu.menusmap[menuid]
clearTimeout(menu.hidetimer)
this.getoffsetof(menu.anchorobj)
this.getdimensions(menu)
var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
}
if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){ //drop up instead?
posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
}
if (this.effects.fade.enabled){
this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
if (this.effects.shadow.enabled)
this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
}
menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
if (this.effects.shadow.enabled)
menu.shadow.setcss({left:posx+anylinkcssmenu.effects.shadow.depth[0]+'px', top:posy+anylinkcssmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
if (this.effects.fade.enabled){
clearInterval(menu.animatetimer)
menu.curanimatedegree=0
menu.starttime=new Date().getTime() //get time just before animation is run
menu.animatetimer=setInterval(function(){anylinkcssmenu.revealmenu(menuid)}, 20)
}
},
revealmenu:function(menuid){
var menu=anylinkcssmenu.menusmap[menuid]
var elapsed=new Date().getTime()-menu.starttime //get time animation has run
if (elapsed<this.effects.fade.duration){
this.setopacity(menu.dropmenu, menu.curanimatedegree)
if (this.effects.shadow.enabled)
this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
}
else{
clearInterval(menu.animatetimer)
this.setopacity(menu.dropmenu, 1)
menu.dropmenu.style.filter=""
}
menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},
setcss:function(param){
for (prop in param){
this.style[prop]=param[prop]
}
},
hidemenu:function(menuid){
var menu=anylinkcssmenu.menusmap[menuid]
clearInterval(menu.animatetimer)
menu.dropmenu.setcss({visibility:'hidden', left:0, top:0})
menu.shadow.setcss({visibility:'hidden', left:0, top:0})
},
getElementsByClass:function(targetclass){
if (document.querySelectorAll)
return document.querySelectorAll("."+targetclass)
else{
var classnameRE=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "i") //regular expression to screen for classname
var pieces=[]
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i]
}
return pieces
}
},
addEvent:function(targetarr, functionref, tasktype){
if (targetarr.length>0){
var target=targetarr.shift()
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)})
this.addEvent(targetarr, functionref, tasktype)
}
},
setupmenu:function(targetclass, anchorobj, pos){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
var relattr=anchorobj.getAttribute("rel")
var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
var menu=this.menusmap[targetclass+pos]={
id: targetclass+pos,
anchorobj: anchorobj,
dropmenu: document.getElementById(dropmenuid),
revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click")? "click" : "mouseover",
orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",
shadow: document.createElement("div")
}
menu.anchorobj._internalID=targetclass+pos
menu.anchorobj._isanchor=true
menu.dropmenu._internalID=targetclass+pos
menu.shadow._internalID=targetclass+pos
menu.shadow.className="anylinkshadow"
document.body.appendChild(menu.dropmenu) //move drop down div to end of page
document.body.appendChild(menu.shadow)
menu.dropmenu.setcss=this.setcss
menu.shadow.setcss=this.setcss
menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
this.setopacity(menu.shadow, this.effects.shadow.opacity)
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOVER event for anchor, dropmenu, shadow
var menu=anylinkcssmenu.menusmap[this._internalID]
if (this._isanchor && menu.revealtype=="mouseover" && !anylinkcssmenu.isContained(this, e)){ //event for anchor
anylinkcssmenu.showmenu(menu.id)
}
else if (typeof this._isanchor=="undefined"){ //event for drop down menu and shadow
clearTimeout(menu.hidetimer)
}
}, "mouseover")
this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ //MOUSEOUT event for anchor, dropmenu, shadow
if (!anylinkcssmenu.isContained(this, e)){
var menu=anylinkcssmenu.menusmap[this._internalID]
menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
}
}, "mouseout")
this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ //CLICK event for anchor, dropmenu
var menu=anylinkcssmenu.menusmap[this._internalID]
if ( this._isanchor && menu.revealtype=="click"){
if (menu.dropmenu.style.visibility=="visible")
anylinkcssmenu.hidemenu(menu.id)
else
anylinkcssmenu.showmenu(menu.id)
if (e.preventDefault)
e.preventDefault()
return false
}
else
menu.hidetimer=setTimeout(function(){anylinkcssmenu.hidemenu(menu.id)}, anylinkcssmenu.effects.delayhide)
}, "click")
},
init:function(targetclass){
var anchors=this.getElementsByClass(targetclass)
for (var i=0; i<anchors.length; i++){
this.setupmenu(targetclass, anchors[i], i)
}
}
}
greg posted this at 21:17 — 16th March 2009.
He has: 1,581 posts
Joined: Nov 2005
What percentage of the total users who will have this issue will actually come to the site?
I know I know, you want it working as desired, and if it was something that broke the entire page or a lot of layout then I would perhaps understand.
So for the sake of what, about 34 people in the world with firefox in 800x600 have a brief issue with links?
Besides, no monitors will actually HAVE 800x600 by the time I have looked through all that code
decibel.places posted this at 22:29 — 16th March 2009.
He has: 1,494 posts
Joined: Jun 2008
What percentage of the total users who will have this issue will actually come to the site?
Well, the PM keeps his browser in an 800x600 window on his large screen monitor - I convinced him that it is a miniscular problem, but it bothers him, a little.
There is a JS version of the same menus that avoids the divs in the document body, I think that will fix the problem.
I like the menu because it can be attached to any links, such as a very customized image menu, so the top menu item does not need to have the same look as the dropdowns.
But it's a weird problem, only in Firefox, only in an 800x600 window, and only on page load before the mouse is moved over other parts of the page...
webwiz posted this at 02:24 — 17th March 2009.
He has: 629 posts
Joined: May 2007
Bizarre. I have no idea why this happens, though.
FWIW - I see the same behavior in Firefox 2, 3, and 3.1 (Mac) and Safari 3 (Win xp) no matter the window size. (Up to 1680 x 1050 less top OS X menu bar.) Okay in Safari 4 (Mac) though.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
decibel.places posted this at 13:55 — 17th March 2009.
He has: 1,494 posts
Joined: Jun 2008
Hmm didn't check Safari... but you are correct. However, it's only in a problem in a small window for Safari 3.2.2 on Vista, full screen it works okay.
I know it has to do with setting the bottom margin of the main container to -800px (note: greater than the height of the window) - which is necessary because the menu adds extra margin at the bottom of the page because of the menu divs...
I have a hunch it is some kind of z-index issue, not sure.
There is a very similar menu that stores its data in an external JavaScript, not HTML in the body, which probably solves the issue, I will try using that next time.
prem123 posted this at 19:57 — 25th February 2010.
They have: 2 posts
Joined: Feb 2010
If you feel changing the layout on resize is a bit too jarring, just remove the second addEvent call to dynamicLayout on resize to limit layout adaptation to occurring only when the web page is first loaded or refreshed by the user. One nice thing about using these functions is that you can easily adapt the code with a little cookie magic to create a better stylesheet switcher to provide your users the choice of what layout option they prefer.
search engine optimization
webwiz posted this at 20:45 — 25th February 2010.
He has: 629 posts
Joined: May 2007
Interesting to see this old thread revived. I guess the issue of window size - limited as it is by screen size - is becoming more of an issue with new devices like the iPad coming on board.
(The iPad is either 1024px or 768px wide, depending on how you hold it...)
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.