IE vs FF

[the goose]

hey,

I've got a problem with the chrome css drop down menu in firefox.

Once I opened the drop down menu, I can't close it anymore (by moving my mouse away from it or by clicking somewhere else on the page, but only by clicking on one of the submenu's). Using internet explorer, there is no problem.

I have edited the colours of the drop down menu in the .css file, made it a drop up menu and I also added transparency. I'm not sure in which file the error is located...

.css file:

a:link {
color: gray; text-decoration: none
}

a, a:visited
{
color: gray;
text-decoration: none;
}

a:hover
{
color: white;
text-decoration: none;
}

a.grijs, a.grijs:visited
{
color: #656565;
text-decoration: none;
font-weight: bold;
}

a.grijs:hover
{
color: #656565;
text-decoration: none;
font-weight: bold;
}

a.rood, a.rood:visited
{
color: gray;
text-decoration: none;
font: bold 10px Verdana;
}

a.rood:hover
{
color: white;
text-decoration: none;
font: bold 10px Verdana;
}

chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
padding: 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

/* ######### Kleur van de strepen ######### */
.chromestyle ul li{
display: inline;
font-weight: bold;
color: #999;
}

.chromestyle ul li a{
margin: 0;
text-decoration: none;
font: 10px Verdana;
font-weight: bold;
color: gray;
}

/* ######### Text effect menu items ######### */
.chromestyle ul li a:hover{
text-decoration: none;
font-weight: bold;
color: white;
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: "";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #1b2025; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 10px Verdana;
line-height:18px;
z-index:100;
background-color: #bebebe;
width: 92px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #1b2025; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: gray;
}

.dropmenudiv a:hover{
text-decoration: none;
color: white;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #a1a1a1;
}

.img_portfolio
{
border-color: white;
border-width: 1px;
border-style: solid;
}

#dropmenu1 {
float: none !important;
float: left; /* Must apply a float to the element to get it to work in IE */
opacity: 0.88;
filter: alpha(opacity=88);
-moz-opacity: 0.88;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=88);
}


.html file:

<div class="chromestyle" id="chromemenu">

<ul>

<li><a href="werkzaamheden.html" target="main">Werkzaamheden</a></li>
<font face="Times New Roman" color="white" size="2"> &nbsp;&nbsp;|&nbsp;&nbsp; </font>

<li><a href="" rel="dropmenu1">Portfolio</a></li>

</ul>

</div>


<div id="dropmenu1" class="dropmenudiv">

<a href="badkamer.html" target="main">Badkamer</a>
<a href="keuken.html" target="main">Keuken</a>

</div> <script type="text/javascript">cssdropdown.startchrome("chromemenu")</script>


</div>

.js file:

//Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: June 14th, 06'

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

getposOffset:function(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;
},

swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
},

showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)" //hide menu via clipping
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))
}
}
}
}
}

}


Could anyone tell me what's wrong?


Thanks in advance,

the goose

[the goose]

anyone?

[ddadmin]

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Also, it'd be a lot easier if you post a link to the problem page on your site, so we can check it out.

[the goose]

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

sorry about that

the site is not online yet, and I can't upload it either at the moment...

[Veronica]

Try putting the original js script back as it appears on DD, then make your changes to it one at a time, testing after each change, so you'll see which line is causing the problem. With the original js, the menu does go away on mouseover, so the problem would appear to be somewhere in your js file.

[the goose]

hey

I can't find the problem, I'm not that good with javascript actually...

what do i have to change in the original js file to make it a dropup menu? I didn't do that myself last time and apparently the guy who did it also did it wrong since it's not working anymore.

help please

thanks in advance,

the goose