Menu not vanishing in FireFox

[1DMF]

I've finished my new CSS menu, and everything works great in I.E. only in firefox the menu's when poping out on hover, does not disapear when you move away.

URL :

http://www.stepnstomp.co.uk

I take it

#nav li ul { /* second-level lists */
position: absolute;
left: -1000px;
}

makes them go off the screen to start with and ...

 #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.iehover ul, #nav li li.iehover ul, #nav li li li.iehover ul, #nav li li li li.iehover ul{ /* lists nested under hovered list items */
left: 0px;
color: #FFFFFF;
}

is making them appear by the left:0px; , why does firefox not apply the first css again once you are no longer hovering?

And in Opera all you get when you hover is the blank iFrame?

does this select list / suckerfish menu only work in I.E ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

I have moved the test link to

http://www.stepnstomp.co.uk/cgi-bin/SSPL/singles.cgi

and put my main site back on the old menu.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

Perhaps you should fix the *many* (and there are a LOT) HTML validation errors before trying to fix anything else?

Also make sure that when you've done that, your CSS validates.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

ok , in the javascript was these lines

    /** IE script to change class on mouseover **/
	var ieLIs = document.getElementById('nav').getElementsByTagName('li');
	for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) {
		ieLIs[i].onmouseover=function() {this.className+=" iehover";}
		ieLIs[i].onmouseout=function() {this.className=this.className.replace(' iehover', '');}
	}

which adds the class ' iehover' to the onmouseover for for each <li>, anyways I changed the code to this...

    /** IE script to change class on mouseover **/
	var ieLIs = document.getElementById('nav').getElementsByTagName('li');
	for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) {
		ieLIs[i].onmouseover=function() {this.className+=" iehover";}
		ieLIs[i].onmouseout=function() {this.className=this.className.replace(' iehover', [b]'bogus')[/b];}
	}

and now it works in FireFox and I.E. , why does changing the <li> items onmouseout to a non-existent class make this work FF?

well I say works in FireFox, the menus now disapear but the first menu seems to flicker the current hovered over menu content? any suggestions?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

Yes - fix your validation errors!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

you've lost me, validate what ?

W3C CSS Validator Results for

http://www.stepnstomp.co.uk/ssplmenu.css

Congratulations!
This document validates as CSS!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

W3C CSS Validator Results

Dan's talking about your HTML validation results.

http://validator.w3.org/

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]

 

[BillyRayPreachersSon]

It's funny that you get to see valid CSS using the W3C validator... it refuses to validate your CSS for me, saying that you validate your document first.

When I do that, I see at least [!]600[/!] errors.

The reason I'm saying you should fix these first is that if any of them are to do with markup being incorrectly structured, them you can never be sure if any JS that manipulates the DOM is really working as it should be.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

what i'll do is sandbox the menu part and test with 100% valid code and see if it makes a difference.

I'm in the middle of a revamp of my site including fixing 5 years of dreadfull coding and bad practices, so it will take me a while to fully complete.

At least if I sandbox the menu part and validate, I can test to see if it's other parts of the code causing the problem or if it's just the way FF is behaving.

Thanks for the input.... oh and the CSS does validate if I remove this line

filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);

which I did do to get it validated, only then I.E shows a white background of the IFRAME instead of the menu being "See Through", What's the correct syntax for that line of code? As you know I didn't write it, it's a copy of the suckerfish menu code, which I thought was reveared on the net for being 'THE' way to make drop down menus and to fix the I.E select list problem.

I'll give some feedback after the sandbox testing.

regards,
1DMF



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok, i've got 100% valid code, both css validate & the page as XHTML Trans, but still the menu flashes in firefox.

here is the link

http://www.stepnstomp.co.uk/test.shtm

any other ideas?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.