CSS mouse over menu, doesn't work in I.E

[Alexhoward]

Hi Guys,

 

Not sure if you can help me, but this forum has been so good that i'd thought i'd ask...

 

this is to be part of a php website and the categories will eventually be pulled from MySQL but i've never done it before and i'm just playing...

 

Thing is i've created a mouse over CSS menu that i've edited from a online tutorial, can't remember where, and it all good on Firefox, but just doesn't work on I.E!!

 

i'd really appreciate it if someone could help me, or if anyone could give some advice if they've had this problem before...

 

CSS:

<style type="text/css">

#outside{
/* border:1px solid #000099; */
/* background:#000099; */
}
#navigation-1 {
padding:0px 0;
margin:0px;
list-style:none;
width:100%;
height:25px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font:normal 10pt verdana, arial, helvetica;
}
#navigation-1 li {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
width:100px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
padding:0px 0;
display:block;
text-align:center;
text-decoration:none;
/* background:#000099; */
background-image:url(images/nav_button.jpg);
color:#ffffff;
width:100px;
        height: 25px;
        vertical-align: middle;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
padding:0px 0;
display:block;
text-align:center;
text-decoration:none;
/* background:#0066FF; */
background-image:url(images/nav_button_over.jpg);
color:#ffffff;
width:100px;
height:25px;
/* border-left:1px solid #ffffff;
border-right:1px solid #ffffff; */
}
#navigation-1 li ul.navigation-2 {
margin:0;
padding:1px 1px 0;
list-style:none;
display:none;
background:#ffffff;
width:98px;
position:absolute;
top:25px;
left:-1px;
border:1px solid #999999;
border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
display:block;
}
#navigation-1 li ul.navigation-2 li {
width:98px;
clear:left;
width:98px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
clear:left;
background:#FF3300;
padding:4px 0;
width:98px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:80;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
clear:left;
background:#00FF00;
padding:4px 0;
width:98px;
border:none;
border-bottom:1px solid #ffffff;
position:relative;
z-index:80;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
display:none;
margin:0;
padding:0;
list-style:none;
position:absolute;
left:145px;
top:-2px;
padding:1px 1px 0 1px;
border:1px solid #000099;
border-left:1px solid #000099;
background:#ffffff;
z-index:90;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#ffffff;
}
                    
                    
                    
</style>

 

HTML:

<div id="outside">
<ul id="navigation-1">
   <li><a href="#" title="sample" target="_self" >Home</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >About</a></li>
         <li><a href="#" title="sample" target="_self" >Contact</a></li>
         <li><a href="#" title="sample" target="_self" >Help</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Badminton</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Rackets</a></li>
         <li><a href="#" title="sample" target="_self" >Shuttles</a></li>
         <li><a href="#" title="sample" target="_self" >Clothing</a></li>
	 <li><a href="#" title="sample" target="_self" >Footwear</a></li>
         <li><a href="#" title="sample" target="_self" >Luggage</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Squash</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Rackets</a></li>
         <li><a href="#" title="sample" target="_self" >Balls</a></li>
         <li><a href="#" title="sample" target="_self" >Clothing</a></li>
	 <li><a href="#" title="sample" target="_self" >Footwear</a></li>
         <li><a href="#" title="sample" target="_self" >Luggage</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Tennis</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Rackets</a></li>
         <li><a href="#" title="sample" target="_self" >Balls</a></li>
         <li><a href="#" title="sample" target="_self" >Clothing</a></li>
	 <li><a href="#" title="sample" target="_self" >Footwear</a></li>
         <li><a href="#" title="sample" target="_self" >Luggage</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Services</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Coaching</a></li>
         <li><a href="#" title="sample" target="_self" >Stringing</a></li>
      </ul>
   </li>
</ul>
</div>

 

Thanks in advance!

 

Add Some Music

http://www.addsomemusic.co.uk

[rhodesa]

IE only supports :hover on A tags...aka you can't use it on LI tags

[allworknoplay]

Another reason FF rules!!!

[jackpf]

IE can't do anything. It's such a pain in the arse to code for.

[Alexhoward]

Hi Guys,

 

Thanks for the replys...

 

so... i can't use this code for IE...!

 

rubbish....!!

 

so what do i do?

 

cheers

 

Add Some Music

http://www.addsomemusic.co.uk

[rhodesa]

there are some hacks out there that add the functionality to IE via JavaScript:

http://www.google.com/search?q=ie+%3Ahover

[jackpf]

Couldn't you just use javascript? I have someting similiar to this on my site.

onmouseover="this.className='new_css_element';" onmouseout="this.className=""

[Alexhoward]

Yea,

 

think i'll use javascript.

 

problem being.... i've never used that either...

[Alexhoward]

Hi guys,

 

I've found a great script on Dynamic Drive, and changed it about to meet my requirements.

 

Problem is i cannot change the width of the initial mouse over menu...the drop down menu formats fine...

 

I've tried everything! and am getting nowhere!!

 

I have posted on the Dynamic Drive forum and have had no repies, and with the success i have had from the members and moderators on this forum i thought i'd ask for yet more help (thanks again for all the pervious help!)

 

here's what i'm doing:

 

HTML:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#" rel="dropmenu1">Home</a></li>
<li><a href="#" rel="dropmenu2">Badminton</a></li>
<li><a href="#" rel="dropmenu3">Squash</a></li>
<li><a href="#" rel="dropmenu4">Tennis</a></li>
<li><a href="#" rel="dropmenu5">Services</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 150px;">
<a href="">About</a>
<a href="">Contact</a>
<a href="">Help</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="">Rackets</a>
<a href="">Shuttles</a>
<a href="">Clothing</a>
<a href="">Footwear</a>
<a href="">Luggage</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="">Rackets</a>
<a href="">Balls</a>
<a href="">Clothing</a>
<a href="">Footwear</a>
<a href="">Luggage</a>
</div>

<!--4th drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="">Rackets</a>
<a href="">Balls</a>
<a href="">Clothing</a>
<a href="">Footwear</a>
<a href="">Luggage</a>
</div>

<!--5th drop down menu -->                                                   
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="">Coaching</a>
<a href="">Stringing</a>
</div>

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

 

CSS:

body {
margin: 0;
border: 0;
}

.chromestyle{
width: 798px;
font-weight: bold;
}

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

.chromestyle ul{
border: 1px solid #BBB;
width: 798px;
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;
border-left: 1px solid #DADADA;
width: 150px;
}

.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{
text-align: center;
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:25px;
z-index:100;
background-color: white;
width: 148px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}


.dropmenudiv a{
/* width: auto; */
width: 148px;
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%; */
width: 148px;
}

.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="down.gif" border="0" />', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 20], //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

}

 

sorry there's alot there...

 

Thanks again!

 

http://www.addsomemusic.co.uk

[Alexhoward]

Can anyone please help me.....?  :-\

[jackpf]

What do you mean you can't change the width?

Do you want to post a link to your site so I could have a look?

[premiso]

I haven't read through all the posts. This is not really a PHP question either.

 

But I do know that in IE the only item you can have "rollover" effect is the anchor tag. To extend this you need a .htc hack file which can be found via google to extend the rollover functionality to IE.

 

Now as far the JS part, I just assume it changes styles, which would still make this true.

 

Whatever:hover

 

There is a site with that hack and explanation of it.