Hi, I cant get my DIV hover background to work or even the text to change to a different color in IE. (FireFox works) I need Javascript code to correct this and make it work... CSS: div.menuBar a.menuButtonActive6, a.menuButtonActive6 { background: url(down.gif); } background-color: #98c601; border-color: #f0f0f0 #909090 #909090 #f0f0f0; cursor: hand; color: #ffffff; } div.menuBar a.menuButtonActive6:hover { background:url(down2.gif); } background-color: #66ccff; border-color: #f0f0f0 #909090 #909090 #f0f0f0; cursor: hand; color: #ffffff; } HTML: <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="menu.js"></script> <div class="menuBar" id="chromemenu"> <a class="menuButton menuButtonActive6" rel="dropmenu1">Other Services</a> Thanks
1) since you are using anchors there should be NO reason to need javascript for what you are doing. 2) I'd need to see more of the code, but I suspect you are using two to three times as many classes as needed. 3) if this is part of a menu, it should probably be an unordered list. 4) You are declaring redundant properties in your CSS unneccessarily. It's an anchor, cursor:hand while not the 'default' is what you get anyways. hand is NOT a valid CSS property BTW), you already declared colors on the anchor, you don't need to restate them on the hover states, etc, etc. 5) no sense in stating border-color if you aren't stating a width - or is that inherited (this is why the FULL code is usually more helpful than a snippet) 6) You should also be trapping :active and :focus so that keyboard navigation isn't left out in the cold. <ul id="mainMenu"> <li><a>Other Services</a></li> </ul> Code (markup): #mainMenu a { color:#FFF; background:#98C601 url(down.gif); } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { background:#66CCFF url(down2.gif); } Code (markup): I'm willing to bet 90% of the rest of your CSS is unneccessary. If you have a perfectly good element wrapping your anchors, you don't need to be wasting classes on the sub-elements unless there is something DIFFERENT about them. Though is this part of a dropdown menu? If you are using javascript for that, you are also using the wrong tool for the job. (lemme guess, that steaming pile of manure known as jquery?)
Yup this is a drop down menu and its doesent work in IE. Here is ALL coding: CSS: div.menuBar a.menuButtonActive6, a.menuButtonActive6 { background: url(down.gif); } background-color: #98c601; border-color: #f0f0f0 #909090 #909090 #f0f0f0; cursor: hand; color: #ffffff; } div.menuBar a.menuButtonActive6:hover { background:url(down2.gif); } background-color: #66ccff; border-color: #f0f0f0 #909090 #909090 #f0f0f0; cursor: hand; color: #ffffff; } HTML: <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="menu.js"></script> <div class="menuBar" id="chromemenu"><a class="menuButton menuButtonActive6" rel="dropmenu1">Other Services </a> <div><div id="dropmenu1" class="dropmenudiv"> <a href="index.html">Design</a> <a href="design/index.html">Design</a> <a href="design/index.html">Design</a></div> JavaScript: var cssdropdown={ disappeardelay: 250, dropdownindicator: '', enablereveal: [true, 10], enableiframeshim: 1, 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) 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){ edgeoffset=dropmenuH+obj.offsetHeight if ((this.dropmenuobj.y-topedge)<dropmenuH) edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset }, dropit:function(obj, e, dropmenuID){ if (this.dropmenuobj!=null) this.hidemenu() this.clearhidemenu() this.dropmenuobj=document.getElementById(dropmenuID) this.asscmenuitem=obj 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() }, positionshim: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) }, 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.getAttribute("rel")){ var relvalue=menuitems.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.innerHTML=menuitems.innerHTML+" "+this.dropdownindicator }catch(e){} this.addEvent(menuitems, function(e){ if (!cssdropdown.isContained(this, e)){ var evtobj=window.event || e cssdropdown.dropit(this, evtobj, this.getAttribute("rel")) } }, "mouseover") this.addEvent(menuitems, function(e){cssdropdown.dynamichide(this, e)}, "mouseout") this.addEvent(menuitems, function(){cssdropdown.delayhidemenu()}, "click") } } } if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ 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") this.shimobject.style.filter='progidXImageTransform.Microsoft.Alpha(style=0,opacity=0)' this.iframeshimadded=true } } }
Still not 'all' since it's not all the html or all the CSS - which is what I was asking for... Do you have a live link of what you are trying to accomplish. What I CAN say for certain so far is you appear to be using javascript to do CSS' job. Sure it won't have any goofy animations or mouse-in/mouse-out delays, but at least you'll have semantic markup. Unless... is that an ACTUAL hover state menu or an accordion? Is that orientated horizontally or vertically? A lot of questions and we can't test if IE broken with just a few snippets. Though I'm 99% certain if this is a hover-flyout menu there is NO reason to be using javascript for it apart from bloating out your page.
Go to google and search for "Chrome CSS Drop Down Menu" that is the script im trying to mimic, see how the menu changes and holds that image as you search the menu.
I got the menu to hover correclty!!!!!!!!!!!!!!!!! but now half the menu is jumping down because I have to put <ul><li> before one of menu link or else the drop down menu and CSS wont work properly. Is there a way I can get it to all show up the same? Thank you
Actually its the <div> </div> code that is making it skip a line, is there anything else I can use instead?
Try this, again don't waste javascript trying to do CSS' job. http://battletech.hopto.org/html_tutorials/cssMenu/template.html as with all my examples the directory http://battletech.hopto.org/html_tutorials/cssMenu is unlocked so you can grab the gooey bits, Valid XHTML 1.0 Strict, would be valid CSS if not for a handful of IE fixes, tested working in IE 6, 7 & 8, Opera 9.63 and 10 beta, FF 2 & 3, Chrome & Safari. Also is functional in IE 5.x, though the LI 'sizing' problem makes the appearance a bit off (oh well.) You'll notice I'm using a single image for both hover states. the .htc file that is in there is Peterned's Hover Anywhere fix for IE6/earlier. Hiding it behind a * html makes certain it is not sent to browsers that don't need it (unlike the normal javascript solution)... We have to resort to javascript for IE6/earlier, but why waste time writing bloating out the markup and CSS when we can just write it for modern browsers, then send that one script to JUST the browsers that need it? Standard nested UL menu - the empty bold tag you see in there is a image sandbag - where I place the arrow image. Lets me trap the state in the CSS for the dropdowns. The span shouldn't be neccessary, but makes it easier to fix IE issues. To change the menu alignment (center/left/right) just change the text-align on #mainMenu. Hope this helps. Javascript for menus is pretty much made of /FAIL/ after 2002 - but like most things off dynamic drive it's outdated poorly written rubbish.