RowdyBurns
asked on
IE 7 css menu glitch
Hi Experts,
I have a css menu that is working correctly in all browsers tested except IE7. The issue occurs when the cursor travels over the <a href> to make a hidden <div> appear. The div appears but as the cursor moves to highlight the next menu option the div disappears again.
I have been through my code again and again but can't seem to see what IE doesn't like.
Please see the example here:
http://www.randomlychallenged.com/HomeTEST2.php
Thank you for any advise to can offer.
I have a css menu that is working correctly in all browsers tested except IE7. The issue occurs when the cursor travels over the <a href> to make a hidden <div> appear. The div appears but as the cursor moves to highlight the next menu option the div disappears again.
I have been through my code again and again but can't seem to see what IE doesn't like.
Please see the example here:
http://www.randomlychallenged.com/HomeTEST2.php
Thank you for any advise to can offer.
My CSS
.chromestyle{
width: 99%;
font-weight: bold;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
////////////////////////////////Javascript/////////////////////////////////////////
//** Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//** Updated: July 14th 06' to v2.0
//1) Ability to "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align".
//2) Added an optional "swipe down" transitional effect for revealing the drop down menus.
//3) Support for multiple Chrome menus on the same page.
//** Updated: Nov 14th 06' to v2.01- added iframe shim technique
//** Updated: July 23rd, 08 to v2.4
//1) Main menu items now remain "selected" (CSS class "selected" applied) when user moves mouse into corresponding drop down menu.
//2) Adds ability to specify arbitrary HTML that gets added to the end of each menu item that carries a drop down menu (ie: a down arrow image).
//3) All event handlers added to the menu are now unobstrusive, allowing you to define your own "onmouseover" or "onclick" events on the menu items.
//4) Fixed elusive JS error in FF that sometimes occurs when mouse quickly moves between main menu items and drop down menus
//** Updated: Oct 29th, 08 to v2.5 (only .js file modified from v2.4)
//1) Added ability to customize reveal animation speed (# of steps)
//2) Menu now works in IE8 beta2 (a valid doctype at the top of the page is required)
var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="../Images/Home/MenuIcon.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 3], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)
//No need to edit beyond here////////////////////////
dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},
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;
},
css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},
showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight<10)
dropmenu._trueheight=dropmenu.offsetHeight
clearTimeout(this.revealtimers[dropmenu.id])
dropmenu.style.height=dropmenu._curheight=0
dropmenu.style.overflow="hidden"
dropmenu.style.visibility="visible"
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
}
else{
dropmenu.style.visibility="visible"
}
this.css(this.asscmenuitem, "selected", "add")
},
revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
if (curH<maxH){
var newH=Math.min(curH, maxH)
dropmenu.style.height=newH+"px"
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
}
else{ //if done revealing menu
dropmenu.style.height="auto"
dropmenu.style.overflow="hidden"
clearInterval(this.revealtimers[dropmenu.id])
}
},
clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
var dropmenuW=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth
}
else{
var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
var dropmenuH=this.dropmenuobj._trueheight
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<dropmenuH) //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.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, 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"
this.positionshim() //call iframe shim function
},
positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
this.shimobject.style.display="block"
}
}
},
hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none'
},
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
},
dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu()
}
},
delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},
hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove")
this.dropmenuobj.style.visibility='hidden'
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
this.hideshim()
},
clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},
addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},
startchrome:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
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")
var asscdropdownmenu=document.getElementById(relvalue)
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
try{
menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e
cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
}
}, "mouseover")
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
this.iframeshimadded=true
}
} //end startchrome
}
ASKER
Have tried removing the code you highlighted but it didn't make any difference.
I cannot load the page anymore
Your link's not working this morning. Is the page still up there?
ASKER
Sorry I think the sever has gone down. I'll post back when it comes back online. PLEASE don't disappear... this is driving me nuts!!
Gotta go. Sorry
ASKER
The server is back up if anyone is still there :)
You have a closing </div> tag before the submenu. The parent <div> needs to encompass both the top-level menu item and the sub-items. (You're also missing closing </li> tags on your menu items.)
I changed it as follows, and it works in IE7 on my local machine. Give this a try:
<DIV class=chromestyleOUT id=chromemenu>
<UL>
<FORM id=user-login-form style="FLOAT: left" action=./Login_Script.php
method=post><INPUT id=Username
onfocus="if(this.value=='U sername') this.value=''" size=12 value=Username
name=Username> <INPUT id=Password
onfocus="if(this.value=='a aaaaaaa') this.value=''" type=password size=12
value=aaaaaaaa name=Password> <INPUT class=bodyTxtSmallWhite
style="MARGIN: 0px 30.5em 0px 0px" onclick=./Login_Script.php type=image
src="Home%20-%20Randomly%2 0Challenge d%20"%20-% 20The%20ho me%20of%20 adventure% 20online!_ files/Logi n_Btn.jpg"
value=Login name=Submit> </FORM>
<LI><A href="http://www.randomlychallenged.com/">Home</A></LI>
<LI><A href="http://www.randomlychallenged.com/NewContent.php">New Content</A> </LI>
<LI><A href="http://www.randomlychallenged.com/HomeTEST2.php#"
rel=dropmenu1>Help</A> </LI>
</UL>
<!--1st drop down menu -->
<DIV class=dropmenudivOUT id=dropmenu1 style="WIDTH: 150px">
<A href="http://www.randomlychallenged.com/FAQ.php.php">FAQ's</A>
<A href="http://www.randomlychallenged.com/SiteMap.php">Site Map</A>
<A href="http://www.randomlychallenged.com/ContactUs.php">Contact us</A>
</DIV></DIV>
I changed it as follows, and it works in IE7 on my local machine. Give this a try:
<DIV class=chromestyleOUT id=chromemenu>
<UL>
<FORM id=user-login-form style="FLOAT: left" action=./Login_Script.php
method=post><INPUT id=Username
onfocus="if(this.value=='U
name=Username> <INPUT id=Password
onfocus="if(this.value=='a
value=aaaaaaaa name=Password> <INPUT class=bodyTxtSmallWhite
style="MARGIN: 0px 30.5em 0px 0px" onclick=./Login_Script.php
src="Home%20-%20Randomly%2
value=Login name=Submit> </FORM>
<LI><A href="http://www.randomlychallenged.com/">Home</A></LI>
<LI><A href="http://www.randomlychallenged.com/NewContent.php">New Content</A> </LI>
<LI><A href="http://www.randomlychallenged.com/HomeTEST2.php#"
rel=dropmenu1>Help</A> </LI>
</UL>
<!--1st drop down menu -->
<DIV class=dropmenudivOUT id=dropmenu1 style="WIDTH: 150px">
<A href="http://www.randomlychallenged.com/FAQ.php.php">FAQ's</A>
<A href="http://www.randomlychallenged.com/SiteMap.php">Site Map</A>
<A href="http://www.randomlychallenged.com/ContactUs.php">Contact us</A>
</DIV></DIV>
ASKER
Hi slovisa, Thanks for taking a look at this. I have cut 'n' pasted the code you posted but it's still disappearing when I come off the btn on my IE.
My version is: IE 7 7.0.5730.13
The code that you sent is up there now. Is it working for you?
My version is: IE 7 7.0.5730.13
The code that you sent is up there now. Is it working for you?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<input name="Submit" type="image" class="bodyTxtSmallWhite" style="margin:0 30.5em 0 0;" src="Images/Home/Login_Btn
onclick="./Login_Script.ph