anylink drop down menu Firefox/Mac Quirk

[10fx]

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
Attachment 376


This is what it looks like in FF/Mac
Attachment 375

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">

#dropmenudiv{
position:absolute;
border:1px solid #000000;
border-bottom-width: 0;
font:normal 12px Arial Black;
line-height:15px;
z-index:100;
}

#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;
}

</style>
----------------------------------------------------------


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
10fx

[10fx]

woops, didnt notice the sticky.... I'll repost in the help section....

I apologize to the admins

[InNeedofHelp]

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.

[10fx]

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.

[10fx]

^bump, I really need help on this one...

[10fx]

no one has any idea?

[Twey]

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
}

[10fx]

still nothing... damn...

I think I'm doomed..

[jscheuer1]

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):

width:150px!important;width:125px;

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.

[10fx]

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;
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>
_______________________________________________________



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