View Full Version : anylink drop down menu Firefox/Mac Quirk

06-14-2006, 12:37 AM
Hey, I'm currently working on a site and everything works perfectly in IE, but when I run it in Firefox/Mac the drop down width is messed up.

This is what it looks like in IE

This is what it looks like in FF/Mac

Now I know that it's supposed to work correctly in all Browsers, but for some reason it's doing this.

Here's what I have for the css:

<style type="text/css">

border:1px solid #000000;
border-bottom-width: 0;
font:normal 12px Arial Black;

#dropmenudiv a{
width: 246px;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 0px 0;
text-decoration: none;
font-weight: bold;

#dropmenudiv a:link {color:#3A452D; background-color:transparent}
#dropmenudiv a:visited {color:#3A452D; background-color:transparent}
#dropmenudiv a:active {color:#ffffff; background-color:transparent}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #3A452D;


For the width I have:

var menuwidth='250' //default menu width
var menubgcolor='#B3D88B' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

Hopefully, someone here can help me out... if you need more info, you need only to ask.

Thanks in advance to anyone who responds

06-14-2006, 12:39 AM
woops, didnt notice the sticky.... I'll repost in the help section....

I apologize to the admins

06-14-2006, 01:09 AM
I'm not positive, but I'm pretty sure that there's some kind of difference in pixelage between firefox and IE. I don't know for sure because I only run IE, I never use firefox. But this is the problem, it's not javascript, its CSS. There's a hack you can use to set the width different in firefox than in IE:

#divmenu {
height: 150px; // height in IE
height: 175px !important; // height in firefox
width: 150px; // width in IE
width: 150px !important; // width in firefox

IE doesn't parse the code with the !important tag on it, however firefox will use the !important codes over the codes without !important.

Also i think its about a 25px difference one way or the other (more or less) in firefox.

So give that a shot, see if it works. And hopefully it'll help. :D

06-14-2006, 01:13 AM
unfortunately, it didnt. I could have been putting the code in wrong. Am I supposed to just throw it in the style sheet? or, actually change something that I have..

thanks for the response though, really appreciate it.

06-14-2006, 05:19 PM
^bump, I really need help on this one...:confused:

06-15-2006, 10:21 PM
no one has any idea?

06-15-2006, 10:31 PM
Just add it to your stylesheet. The heights may need some tweaking.
InNeedOfHelp has done it slightly wrong, though. It should be:
#divmenu {
height: 175px !important; // height in firefox
height: 150px; // height in IE
width: 150px !important; // width in firefox
width: 150px; // width in IE

06-16-2006, 04:48 AM
still nothing... damn...:(

I think I'm doomed..

06-16-2006, 05:06 AM
Am I supposed to just throw it in the style sheet? or, actually change something that I have..

It is just meant as a template, you need to use it to change what you have. The technique is as follows (the '!important' declaration must come first, the two declarations can be on separate lines, as in Twey's example):


FF (and most browsers) will use the first rule, IE the second. It is up to you to determine which rule needs to be changed and what settings each browser requires.

It is possible that there is something else upsetting the apple cart here. In that case, a link to your problem page would be the best way to determine the cause and a solution.

06-16-2006, 06:27 PM
Ill try to put an example up...

but for now, since I've tried changing every width possible in the code... maybe it has the javascript actually is the problem...

heres the code:

<script type="text/javascript">

* AnyLink Drop Down Menu- &#169; 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="ARCHITECTURAL.html" target="">Architectural</a>'
menu1[1]='<a href="BANNERS.html" target="">Banners</a>'
menu1[2]='<a href="BUILDINGDIRECTORIES.html" target="">Building Directories</a>'
menu1[3]='<a href="COMMERCIALSIGNS.html" target="">Commercial Signs</a>'
menu1[4]='<a href="DIGITALSIGNAGE.html" target="">Digital Signage</a>'
menu1[5]='<a href="DIMENSIONALLETTERS.html" target="">Dimensional Letters</a>'
menu1[6]='<a href="DISPLAYEXHIBIT.html" target="">Display/Exhibit Hardware</a>'
menu1[7]='<a href="FLAGS.html" target="">Flags</a>'
menu1[8]='<a href="FULLCOLOUROFFSETPRINTING.html" target="">Full Colour Offset Printing</a>'
menu1[9]='<a href="GLASSFROSTING.html" target="">Glass Frosting</a>'
menu1[10]='<a href="ILLUMINATEDSIGNS.html" target="">Illuminated/Flexible Sign Faces</a>'
menu1[11]='<a href="SAFETYANDTRAFFICSIGNS.html" target="">Safety & Traffic Signs</a>'
menu1[12]='<a href="SCREENPRINTING.html" target="">Screen Printing</a>'
menu1[13]='<a href="SITESIGNS.html" target="">Site Signs/Billboards</a>'
menu1[14]='<a href="TRADESHOWDISPLAYMATERIALS.html" target="">Trade Show Displays</a>'
menu1[15]='<a href="FLEETIDENTIFICATION.html" target="">Vehicle/Fleet Graphics</a>'

var menuwidth='250' //default menu width
var menubgcolor='#B3D88B' //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;
return totaloffset;

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
if (menuwidth!=""){
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
else if (e.type=="click")

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
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
return edgeoffset

function populatemenu(what){
if (ie4||ns6)

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

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))
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)

function delayhidemenu(){
if (ie4||ns6)

function clearhidemenu(){
if (typeof delayhide!="undefined")

if (hidemenu_onclick=="yes")


Another question... would it being a link on an image affect the width??

06-16-2006, 08:13 PM
Ahh, the problem is in something you are not showing us. Here, in the HTML portion of the page where you must have something similar to (example taken from the demo):

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a>

Either get rid of the width (, '150px') there (the script will then use the default value of 250 that you have set in the configuration) or change it to the desired value (, '246px'), or whatever suits you. You don't need to worry about the !important hack at all for this one.

06-16-2006, 09:31 PM

Thank you so very much... I didnt even notice that one....

Genius... genius...

thank you so much again