PDA

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



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


This is what it looks like in FF/Mac
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
06-14-2006, 12:39 AM
woops, didnt notice the sticky.... I'll repost in the help section....

I apologize to the admins

InNeedofHelp
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

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

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

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

Twey
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
}

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

I think I'm doomed..

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


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

jscheuer1
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.

10fx
06-16-2006, 09:31 PM
OMG IT WORKED!!!OMGOMGOMGOMG....

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

Genius... genius...

thank you so much again