CSS Flyout menus

[Sunshine81]

I'm having problems with a css based flyout menu. It works fine in FireFox but not IE 7 or IE 6. The menu simply does not appear.Here's the css:http://www.flatballphoto.co.uk/bjportfolio/style2.csshttp://www.flatballphoto.co.uk/bjportfolio/style2_ie.cssAnd here's the code:

<!-- START MENU -->	<div id="menu">	  <ul>		<li><a class="projects" href="#proj"> </a>		<!--[if lte IE 6]>		  <table><tr><td>		<![endif]-->		  <ul>			<li><a href="#">Project 1</a></li>			<li><a href="#">Project 2</a></li>			<li><a href="#">Project 3</a></li>			<li><a href="#">Project 4</a></li>		  </ul>		<!--[if lte IE 6]></td></tr></table><![endif]-->		</li>		<li><a class="portfolio" href="#port"> </a>		<!--[if lte IE 6]>		  <table><tr><td>		<![endif]-->		  <ul>			<li><a href="#">Project 1</a></li>			<li><a href="#">Project 2</a></li>			<li><a href="#">Project 3</a></li>			<li><a href="#">Project 4</a></li>		  </ul>		<!--[if lte IE 6]></td></tr></table><![endif]-->		</li>		<li><a class="cv" href="#cv"> </a></li>		<li><a class="contact" href="#cont"> </a></li>	  </ul>	</div>	<!-- END MENU -->

And here's the website:http://www.flatballphoto.co.uk/bjportfolio/index2.phpI based my code on this tutorial: http://www.cssplay.co.uk/menus/example_flyout.htmlCould anyone point out where i'm going wrong? I've looked at a thousand different flyout menus and i just can't see what i'm doing differently. I've tried all sorts of different techniques but non of them make the IE family happy. Everything seems to be in place and FF renders it excellently. So what do i need to do to make IE behave?

[Mr_CHISOL]

Hi!add this JavaScript tou your site:

<script type="text/javascript">	<!--		sfHover = function() {			var sfEls = document.getElementById("menu").getElementsByTagName("LI");			for (var i=0; i<sfEls.length; i++) {				sfEls[i].onmouseover=function() {					this.className+=" sfhover";				}				sfEls[i].onmouseout=function() {					this.className=this.className.replace(new RegExp(" sfhover\\b"), "");				}			}		}		if (window.attachEvent) window.attachEvent("onload", sfHover);	-->	</script>

And then extend your css with this:

#menu li.sfhover {...}

This is from "Son of Suckerfish Dropdowns", and I don't know if it will work good with that you use. But I recommend a swtich to "suckerfish" as it eliminates the need of "empty anchors/links" and a switch shouldn't be too difficult (eaven if there's a differense between "flyouts" and "dropdowns", but it seams that both have the same base).Hope that helped.Edit: Discovered that Suckerfish has an example with a "flýout"

[Sunshine81]

That's not bad, but i was hoping to make it strictly css. I'll go with whatever works for now though. Cheers!

[otenjoxi]

Hi Sunshine,It is impossible to be just CSS if you want the menu to work in Internet Explorer - period. Internet Explorer 6 and below do not support the :hover pseudoclass on anything other than a link.Also, the Son of Suckerfish menus are not supported in Internet Explorer 5 on the Mac. If this is not a concern to you, don't bother. Most people would say screw it because MSIE 5 on the Mac has been discontinued, but I work in a school district and many of the computers (especially Mac OS 9) are stuck with it.I was also having problems in internet explorer with submenus and getting them to display one tier at a time, but I wrote my own JavaScript to fix it.If you still have trouble, let us know. There is a lot of talent here.DustinP.S.A clean menu can function properly with just this code:<ul id="something"><li><a href="">asdasd</a><ul><li><a href="">asda</a></li></ul></li></ul>In my opinion, cluttering of HTML is not recommended. (I.E. the table solution that was implemented for IE.)

[otenjoxi]

Ah, I almost forgot...The JavaScript solution that Mr_CHISOL recommended most likely only enables itself in Internet Explorer. I'm not too hardcore into JavaScript so I can't say for sure. If it does enable itself in non-IE browsers, perhaps that's something that should be looked at.

[jlhaslip]

It is impossible to be just CSS if you want the menu to work in Internet Explorer - period.

I beg to differ. Review the drop down and fly out menus at cssplay.co.uk and run them through a validator, even. They work if the install instructions and tutorials are adhered to.

[Fusion]

Concerning the web page itself, it looks really good.Just noticed that when I resize the window, the bottom pic (footer) jumps a bit to the left, not centered with the rest of the page.Using IE6.

[Sunshine81]

I beg to differ. Review the drop down and fly out menus at cssplay.co.uk and run them through a validator, even. They work if the install instructions and tutorials are adhered to.

Yeah, i have no idea what i was doing wrong. But i'm happy enough with this solution, just need to get the website operational.

Also, the Son of Suckerfish menus are not supported in Internet Explorer 5 on the Mac. If this is not a concern to you, don't bother. Most people would say screw it because MSIE 5 on the Mac has been discontinued, but I work in a school district and many of the computers (especially Mac OS 9) are stuck with it.

I've gotten around this by making the main 'portfolio' link send the user to a page of links. So the quick navigation works for most users but people with older browsers will be able to access the content, just not so easily. It's not perfect, but i intend to revisit this site when i've improved, for now i just need to get this online and working!

Concerning the web page itself, it looks really good.Just noticed that when I resize the window, the bottom pic (footer) jumps a bit to the left, not centered with the rest of the page.Using IE6.

I'm aware of this, i'll sort IE 6 and below out when i've finished the rest of the site. Thanks for pointing it out anyways, and thanks for the compliment! :)By the way, how do people find the load time? It's my main concern at the moment.