nice_menus (IE and left sidebar specific) visibility issue

By bdanchilla on 5 May 2006 at 19:17 UTC

Hello,
I installed the nice_menus module and it is very useful. However, if browsing with Internet Explorer, anything in the main content area blocks out the region of the folding menu that it overlaps. This problem does not occur with Mozilla, or even in IE if the menu is changed to the right sidebar/left foldout orientation. Unfortunately, I need to place the menus on the left side of the page. I suspect that IE overwrites blocks in the order that they are printed. So the center block overwrites overlapping left block area, and the right block overwrites the center block overlapping area.
Does anyone know the exact cause and/or a workaround for this problem? Thanks.

Comments

Something of a Work-Around

plutado commented 6 May 2006 at 09:13

I have recently have begun creating new blocks that simply include code for pure CSS based menus. I've worked with nice menus and ran into the same problem. I have a menu on one of my sites where I use the following as code inside of a "main menu" block I added:


<style type="text/css">
	
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
		
#menu1 {
        position: float;
        top: 10px
	width: 100px;
	margin: 10px;
	}
	
#menu1 li a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 20px;
	text-decoration: none;
	}	
	
#menu1 li a:link, #menu14 li a:visited {
	color: #333;
	display: block;
	background:  url(menu.png) no-repeat;
	padding: 8px 0 0 10px;
	}
	
#menu1 li a:hover {
	color: #FFF;
	background:  url(menu.png) 0 -27px no-repeat;
	padding: 8px 0 0 10px;
	}	

</style>


<body><html>

<div id="menu1">
<ul>
<li><a href="http://mysite.com/index" title="Home">Home</a></li>
<li><a href="http://mysite.com/about" title="Learn About Our Comapny">About Us</a></li>
<li><a href="http://mysite.com/gallery" title="View Gallery"></a>Gallery</li>
<li><a href="http://mysite.com/services" title="Our Services"></a>Services</li>
<li><a href="http://mysite.com/contact" title="Contact Us"></a>Contact Us</li>	
</ul>
</div>
<br>

</html></body>

*****STOP COPYING HERE - COPY CODE FROM HERE UP******

You can find/create great looking CSS menus here:

http://exploding-boy.com/images/EBmenus/menus.html
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

Here's a beautiful slide out:
http://www.cssplay.co.uk/menus/flyout_horizontal.html

Last but not least, the most wonderful CSS Menu resource I've found:
http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

Good luck with your website! Hope this helps!