Hover menu opera bug

[henryrhenryr]

Hello All

I have a 'flyout' css menu which uses something like this:

[code=html]
<ul>
<li><a>head</a><div style="position :absolute;left:-10000;"><ul><li >more</li><li>even more</li></ul></div></li>
<li><a>head</a><div style="position :absolute;left:-10000;"><ul><li >more</li><li>even more</li></ul></div></li>
</ul>
[/code]
[code=css]
ul li:hover div {
left:0;
}
[/code]

So it works nicely in Firefox ;) I have given up with IE and written some javascript. My problem is Opera! I'm testing on Opera 9 and when I hover over the li, the div appears but it isn't left:0 and it is 'broken' up - so bits are visible, bits aren't.

I have other menus on almost identical setups and they work in Opera9. The error consistently appears on the same sections though.

Some things I've thought about:

z-index - well this isn't a problem - fine in FF and other parts of the page
positioning on parent elements - I have looked at this and on changing the li from relative to static, the error is fixed BUT the div is not left:0 it's left:auto.
left:auto - i've tried this but the div ends up in the wrong place

Any other ideas / known bugs. I don't want to marginalise opera users ;)

Thanks in advance

Henry

[drhowarddrfine]

They work the same to me in FF and Opera.

[Paulson]

Hi

Im not sure with Opera but I will try out but adding this code js file and adding in your code will help you for IE6

sfHover = function() {
// Support the standard nav without a class of nav.
var el = document.getEle mentById("nav") ;
if(!/\bnav\b/.test(el.classN ame) && el.tagName == "UL")
setHover(el);

// Find all unordered lists.
var ieNavs = document.getEle mentsByTagName( 'ul');
for(i=0; i<ieNavs.length ; i++) {
var ul = ieNavs[i];
// If they have a class of nav add the menu hover.
if(/\bnav\b/.test(ul.classN ame))
setHover(ul);
}

}

function setHover(nav) {
var ieULs = nav.getElements ByTagName('ul') ;
if (navigator.appV ersion.substr(2 2,3)!="5.0") {
// IE script to cover <select> elements with <iframe>s
for (j=0; j<ieULs.length ; j++) {
var ieMat=document. createElement(' iframe');
if(document.loc ation.protocol == "https:")
ieMat.src="//0";
else if(window.opera != "undefined" )
ieMat.src="";
else
ieMat.src="java script:false";
ieMat.scrolling ="no";
ieMat.frameBord er="0";
ieMat.style.wid th=ieULs[j].offsetWidth+"p x";
ieMat.style.hei ght=ieULs[j].offsetHeight+" px";
ieMat.style.zIn dex="-1";
ieULs[j].insertBefore(i eMat, ieULs[j].childNodes[0]);
ieULs[j].style.zIndex=" 101";
}
// IE script to change class on mouseover
var ieLIs = nav.getElements ByTagName('li') ;
for (var i=0; i<ieLIs.length ; i++) if (ieLIs[i]) {
// Add a sfhover class to the li.
ieLIs[i].onmouseover=fu nction() {
if(!/\bsfhover\b/.test(this.clas sName))
this.className+ =" sfhover";
}
ieLIs[i].onmouseout=fun ction() {
if(!this.contai ns(event.toElem ent))
this.className= this.className. replace(' sfhover', '');
}
}
} else {
// IE 5.0 doesn't support iframes so hide the select statements on hover and show on mouse out.
// IE script to change class on mouseover
var ieLIs = document.getEle mentById('nav') .getElementsByT agName('li');
for (var i=0; i<ieLIs.length ; i++) if (ieLIs[i]) {
ieLIs[i].onmouseover=fu nction() {this.className +=" sfhover";hideSe lects();}
ieLIs[i].onmouseout=fun ction() {this.className =this.className .replace(' sfhover', '');showSelects ()}
}
}
}

// If IE 5.0 hide and show the select statements.
function hideSelects(){
var oSelects=docume nt.getElementsB yTagName("selec t");
for(var i=0;i<oSelects. length;i++)
oSelects[i].className+=" hide";
}

function showSelects(){
var oSelects=docume nt.getElementsB yTagName("selec t");
for(var i=0;i<oSelects. length;i++)
oSelects[i].className=oSel ects[i].className.repl ace(" hide","");
}

// Run this only for IE.
if (window.attachE vent) window.attachEv ent('onload', sfHover);
// end

Other also I will try.
Regards Paulson C Paul.

Hello All

I have a 'flyout' css menu which uses something like this:

[code=html]
<ul>
<li><a>head</a><div style="position :absolute;left:-10000;"><ul><li >more</li><li>even more</li></ul></div></li>
<li><a>head</a><div style="position :absolute;left:-10000;"><ul><li >more</li><li>even more</li></ul></div></li>
</ul>
[/code]
[code=css]
ul li:hover div {
left:0;
}
[/code]

So it works nicely in Firefox ;) I have given up with IE and written some javascript. My problem is Opera! I'm testing on Opera 9 and when I hover over the li, the div appears but it isn't left:0 and it is 'broken' up - so bits are visible, bits aren't.

I have other menus on almost identical setups and they work in Opera9. The error consistently appears on the same sections though.

Some things I've thought about:

z-index - well this isn't a problem - fine in FF and other parts of the page
positioning on parent elements - I have looked at this and on changing the li from relative to static, the error is fixed BUT the div is not left:0 it's left:auto.
left:auto - i've tried this but the div ends up in the wrong place

Any other ideas / known bugs. I don't want to marginalise opera users ;)

Thanks in advance

Henry