Sliding Menu Bug

I’ve developed a sliding menu and have run into problems in regards to IE6. The menu works just like I want it to in most other browsers. I’ve tried to fix it in IE6 but have not been able to. I was hoping someone might be able to point out a specific IE6 bug which may be affecting my css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link type="text/css" rel="stylesheet" href="css.css" />
	</head>
	<body>
		<div id="slideNav">
			<div id="slideNav-nav">
				<ul style="margin-left: -8px;">
					<li><a href="#top">Top</a></li>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
					<li><a href="#">Link 4</a></li>
				</ul>
			</div>
			<div id="slideNav-tools">
				<ul style="margin-left: -8px;">
					<li><a href="search.html" target="_blank">Search</a></li>
					<li><a href="javascript:toPrintALL();">Print All</a></li>
					<li><a href="preferences.html" target="_blank">User Preferences</a></li>
					<li><a href="javascript:increaseFontSize();">Increase Font</a></li>
					<li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>
#slideNav{
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 84px;
    left: 0px;
    list-style: none;
    z-index:9999;
}

#slideNav ul{
	padding-left: 28px;
}

#slideNav div{
    display: block;
    margin-left: -180px;
	margin-bottom: 16px;
    width: 200px;
    height: 100%;    
	background: #fff url("../img/nav.png") no-repeat right center; /* Image is vertical text */
	min-height: 160px;
    border:2px solid #AFAFAF;

}

#slideNav div#slideNav-tools{
	background: #fff url("../img/tools.png") no-repeat right center; /* Image is vertical text */
	min-height: 80px;
}

#slideNav div#slideNav-tools:hover{
	margin-left: 0px;
	background: #fff url("../img/tools.png") no-repeat left center;
}

#slideNav div#slideNav-nav:hover{
	margin-left: 0px;
	background: #fff url("../img/nav.png") no-repeat left center; /* Image is vertical text */
}

#slideNav div li{
	list-style-type:none;
	margin-right: 22px;
	padding: 2px 0;
	display: block;
	border-bottom: 1px solid #000;
}

#slideNav div li a{
	color: #000;
	padding-bottom: 6px;
	text-decoration: none;
	
}

#slideNav div li:first-child{
	border-top: 1px solid #000;
}

#slideNav div li a:hover{
	color: #000099;
}

I appreciate your help!

You don’t describe at all what isn’t working in the menu or what is effecting the css. That way it is very difficult to give any help

I’m sorry. I made sure to post a working code sample so you could see it for yourself.

Intended Function:
Two menus on the right side of the screen that are initially partially exposed (hidden parts are pushed off the side of the screen). When a user hovers over the menu it slides out (to the right) to display a navigation menu. When a user moves away it then slides back.

The problem in IE6:
Hover does nothing.
The menu is not hidden off the side of the screen like it is in all other browsers.

Hi,

There are 2 main problems in IE6.

  1. Position fixed is not supported

  2. Hover only works on anchors.

That just about makes it impossible for the menu to work in IE6 unless you build a script to support it. :slight_smile:

Something roughly like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css.css" />
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("slideNav").getElementsByTagName("DIV");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style>
#slideNav {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 84px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
* html #slideNav {
    position: absolute; /* position fixed for IE6 */
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');
}
#slideNav ul {
    padding-left: 28px;
}
#slideNav div {
    display: block;
    margin-left: -180px;
    margin-bottom: 16px;
    width: 200px;
    height: 100%;
    background: #fff url("../img/nav.png") no-repeat right center; /* Image is vertical text */
    min-height: 160px;
    border:2px solid #AFAFAF;
}
#slideNav div#slideNav-tools {
    background: #fff url("../img/tools.png") no-repeat right center; /* Image is vertical text */
    min-height: 80px;
}
#slideNav div#slideNav-tools:hover {
    margin-left: 0px;
    background: #fff url("../img/tools.png") no-repeat left center;
}
#slideNav div#slideNav-nav:hover {
    margin-left: 0px;
    background: #fff url("../img/nav.png") no-repeat left center; /* Image is vertical text */
}
#slideNav DIV.over {
    margin-left:0
}
#slideNav div li {
    list-style-type:none;
    margin-right: 22px;
    padding: 2px 0;
    display: block;
    border-bottom: 1px solid #000;
}
#slideNav div li a {
    color: #000;
    padding-bottom: 6px;
    text-decoration: none;
}
#slideNav div li:first-child {
    border-top: 1px solid #000;
}
#slideNav div li a:hover {
    color: #000099;
}
</style>
</head>
<body>
<div id="slideNav">
    <div id="slideNav-nav">
        <ul style="margin-left: -8px;">
            <li><a href="#top">Top</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </div>
    <div id="slideNav-tools">
        <ul style="margin-left: -8px;">
            <li><a href="search.html" target="_blank">Search</a></li>
            <li><a href="javascript:toPrintALL();">Print All</a></li>
            <li><a href="preferences.html" target="_blank">User Preferences</a></li>
            <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
            <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
        </ul>
    </div>
</div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>


Paul O’B,

Your solution worked great. I’ve now added a couple more features to finish up the slide navigation. Everything was working until I added the last feature which is vertical text in the tab to describe what the tab is. For this solution I wanted to avoid having to use an image which I know would be easier using the css background property. I’ve commented by css below to make it easier to understand what I’m trying to accomplish.

The code works great in firefox and IE8. There is a small bug in IE7 and IE6 where the panelExpand icon sits in the center of the tab (on top of the title text) instead of outside the container.

Removing the span slideNav-title fixes the bug in IE7 but I need the text in the span to be there. Removing the span slideNav-title in IE6 makes the icon just disappear so it doesn’t really fix anything.

Any suggestions on getting this last bit to work?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" href="css.css" />
    </head>
    <body>
        <div id="slideNav">
            <div id="slideNav-nav">
					<span class="slideNav-title"><span>N</span><span>a</span><span>v</span><span>i</span><span>g</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span></span>
					<span class="expand.png panelExpand"/> <!-- expand.png is a table-based icon created with javascript -->
					<a href="javascript:pinNavigation()"><span class="pinPanel.png panelPin"/></a><br />	 <!--pinPanel.png is a table-based icon created with javascript -->	
                <ul style="margin-left: -8px;">
                    <li><a href="#top">Top</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
            <div id="slideNav-tools">
					<span class="slideNav-title"><span>T</span><span>o</span><span>o</span><span>l</span><span>s</span></span>		
					<span class="expand.png panelExpand"/> <!-- expand.png is a table-based icon created with javascript -->
					<a href="javascript:pinTools()"><span class="pinPanel.png panelPin"/></a><br /><!--pinPanel.png is a table-based icon created with javascript -->	
                <ul style="margin-left: -8px;">
                    <li><a href="search.html" target="_blank">Search</a></li>
                    <li><a href="javascript:toPrintALL();">Print All</a></li>
                    <li><a href="preferences.html" target="_blank">User Preferences</a></li>
                    <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
                    <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>


        /* slideNav General Styling */
        #slideNav{ position: fixed;    margin: 0px;    padding: 0px;    top: 84px;    left: 0px;    list-style: none;    z-index:9999;}
        * html #slideNav { position: absolute; /* position fixed for IE6 */top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');}
        #slideNav ul{padding-left: 28px;}
        #slideNav div{display: block;margin-left: -180px;	margin-bottom: 16px;    width: 200px;    height: 100%;    	background: #fff url("../img/nav.png") no-repeat right center;	min-height: 160px;    border:2px solid #AFAFAF;}
        #slideNav div#slideNav-tools{min-height: 80px;}
        #slideNav div#slideNav-tools:hover{margin-left: 0px;}
        #slideNav div#slideNav-nav:hover{margin-left: 0px;}
        #slideNav DIV.over {margin-left:0}
        #slideNav div li{	list-style-type:none;margin-right: 22px;padding: 2px 0;display: block;	border-bottom: 1px solid #000;}
        #slideNav div li a{	color: #000;	padding-bottom: 6px;	text-decoration: none;}
        #slideNav div li:first-child{	border-top: 1px solid #000;}
        #slideNav div li a:hover{	color: #000099;}
        
        /* Styling for slideNav icons and title */
        #slideNav .panelExpand{float:right; 	margin-right: -22px; } /* Float just outside container of slideNav */
        #slideNav div:hover > span.panelExpand{	display:none;} /* Hide when slideNav is active */
        #slideNav div:hover > a span.panelPin{	display:inline;}   /* Un-hide Pin Icon */
        #slideNav a span.panelPin{	width: 16px;	border: 1px outset #000;	float:right; 	margin-right: 4px;	margin-top: 4px;}
        #slideNav a span.panelPin:hover{	width: 14px;	border: 1px inset #000;}
		#slideNav span.panelPin{display:none;border: none;} /* Hidden by default */
        #slideNav .slideNav-title{font-family: Georgia,"Times New Roman","Verdana";text-transform: uppercase; float:right; font-weight: bold;text-align:center; margin-right:4px; margin-left:0;} /* Display in 'tab' area of slideNav */
	    #slideNav .slideNav-title span{display:block;} /* Each letter display as block to get vertical text */
        #slideNav div:hover > span.slideNav-title{float:left; margin-right:0; margin-left:4px;} /* Move to left side of slideNav when active */

Note: I also use the javascript in the previous post. In addition, I use a simple javascript for vertically centering both panelExpand.png and slideNav-title.

Do you have a live version with images etc as it would be easier to debug?:slight_smile:

Regarding IE6 then you should know that it doesn’t support the child selector (>) and will ignore those rules. You should use a descendant selector instead and negate and nesting issues with further rules.

I wish I had a live version to show you but it is not possible to put it on the web at the moment.

I’ve tried to add a css expression to make the descendant selector compatible with IE6. However, I must be doing something wrong because it is not working.

Here is one example I’m working on:

        #slideNav div:hover > a span.panelPin{	display:inline;}   /* Un-hide Pin Icon */
        * html #slideNav div:hover a span.panelPin {display: expression(/panelPin/.test(this.parentNode.className)? "inline" : "none");}

Using CSS expressions is a first for me :confused:

I’ve also tried the method you described. However, it is still not working quite right:

        /* slideNav General Styling */
        #slideNav{ position: fixed;    margin: 0px;    padding: 0px;    top: 84px;    left: 0px;    list-style: none;    z-index:9999;}
        * html #slideNav { position: absolute; /* position fixed for IE6 */top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');}
        #slideNav ul{padding-left: 28px;}
        #slideNav div{display: block;margin-left: -180px;	margin-bottom: 16px;    width: 200px;    height: 100%;    	background: #fff url("../img/nav.png") no-repeat right center;	min-height: 160px;    border:2px solid #AFAFAF;}
        #slideNav div#slideNav-tools{min-height: 80px;}
        #slideNav div#slideNav-tools:hover{margin-left: 0px;}
        #slideNav div#slideNav-nav:hover{margin-left: 0px;}
        #slideNav DIV.over {margin-left:0}
        #slideNav div li{	list-style-type:none;margin-right: 22px;padding: 2px 0;display: block;	border-bottom: 1px solid #000;}
        #slideNav div li a{	color: #000;	padding-bottom: 6px;	text-decoration: none;}
        #slideNav div li:first-child{	border-top: 1px solid #000;}
        #slideNav div li a:hover{	color: #000099;}
        
        /* Styling for slideNav icons and title */
        #slideNav .panelExpand{float:right; 	margin-right: -22px; } /* Float just outside container of slideNav */
        #slideNav #slideNav-nav:hover .panelExpand{	display:none;} /* Hide when slideNav is active */
        #slideNav #slideNav-nav:hover a .panelPin{	display:inline;}   /* Un-hide Pin Icon */
        #slideNav #slideNav-tools:hover .panelExpand{	display:none;} /* Hide when slideNav is active */
        #slideNav #slideNav-tools:hover a .panelPin{	display:inline;}   /* Un-hide Pin Icon */
        /** html #slideNav div:hover a span.panelPin {display: expression(/panelPin/.test(this.parentNode.className)? "inline" : "none");}*/
        #slideNav a span.panelPin{	width: 16px;	border: 1px outset #000;	float:right; 	margin-right: 4px;	margin-top: 4px;}
        #slideNav a span.panelPin:hover{	width: 14px;	border: 1px inset #000;}
		#slideNav span.panelPin{display:none;border: none;} /* Hidden by default */
        #slideNav .slideNav-title{font-family: Georgia,"Times New Roman","Verdana";text-transform: uppercase; float:right; font-weight: bold;text-align:center; margin-right:5px; margin-left:0;} /* Display in 'tab' area of slideNav */
	    #slideNav .slideNav-title span{display:block;} /* Each letter display as block to get vertical text */
        #slideNav #slideNav-nav:hover .slideNav-title{float:left; margin-right:0; margin-left:4px;} /* Move to left side of slideNav when active */
        #slideNav #slideNav-tools:hover .slideNav-title{float:left; margin-right:0; margin-left:4px;} /* Move to left side of slideNav when active */
      

I’m not worrying about grandchildren being affected because there are not any.

Hi,

There is never an occasion when the child selector cannot be handled with a descendant selector. I never use the child selector because of IE6 support and I have never missed the fact that I need it. You just style all children and then cancel it out on the nested children.

If you can’t put up a live example then supply the full html and css and attach your panel pin images so that I have something to work with. (Or whichever images you are having trouble showing)

This code:


[COLOR=#CC00CC]#slideNav[/COLOR] div[COLOR=#3333FF]:hover[/COLOR] > a span[COLOR=#6666FF].panelPin[/COLOR][COLOR=#66CC66]{[/COLOR]  display[COLOR=#3333FF]:inline[/COLOR];[COLOR=#66CC66]}[/COLOR]

remove the child selector and try something like this instead.


#slideNav div:hover a span.panelPin{  display:inline;}
#slideNav div:hover {visibility:visible}/* ie6 trigger for nested span - assumes you have added my original js*/


Ill need you to supply me with more details as mentioned above if this doesn’t work :slight_smile:

Here is another question to pick your brain.
This sliding menu works great when it is on the edge of the screen. However, what if it is contained within a wrapper element such as:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" rel="stylesheet" href="css.css" />
    </head>
    <body>
<div id="wrapper" style="margin:40px; border: 1px solid grey;">
        <div id="slideNav">
            <div id="slideNav-nav">
                    <span class="slideNav-title"><span>N</span><span>a</span><span>v</span><span>i</span><span>g</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span></span>
                    <span class="expand.png panelExpand"/> <!-- expand.png is a table-based icon created with javascript -->
                    <a href="javascript:pinNavigation()"><span class="pinPanel.png panelPin"/></a><br />     <!--pinPanel.png is a table-based icon created with javascript --> 
                <ul style="margin-left: -8px;">
                    <li><a href="#top">Top</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
            <div id="slideNav-tools">
                    <span class="slideNav-title"><span>T</span><span>o</span><span>o</span><span>l</span><span>s</span></span>   
                    <span class="expand.png panelExpand"/> <!-- expand.png is a table-based icon created with javascript -->
                    <a href="javascript:pinTools()"><span class="pinPanel.png panelPin"/></a><br /><!--pinPanel.png is a table-based icon created with javascript -->   
                <ul style="margin-left: -8px;">
                    <li><a href="search.html" target="_blank">Search</a></li>
                    <li><a href="javascript:toPrintALL();">Print All</a></li>
                    <li><a href="preferences.html" target="_blank">User Preferences</a></li>
                    <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
                    <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
                </ul>
            </div>
        </div>
</div>
    </body>
</html>

1st Question:
Is it possible to simulate the edge of the screen with that wrapper border? Perhaps some use of z-index? What browser compatibility problems should I expect to run into?

2nd Question:
If the 1st question is possible is it possible to define the problem more generally? So that the parent of the slide nav is the containing body for it to sit on. So in some circumstances it might be this container div, but if there is no container div it would be the body element.

Thanks for your help.

Any suggestions for the previous post? The two options I see I have are:

  1. Use Frames (have not tried this so don’t know if it will really work)
  2. Port the majority of the functionality from css to javascript

However, neither of these options are ideal.

Hi,

Yes you can make it stay with a centred wrapper as long as you don’t use co ordinates on the fixed element and then it will become fixed at the position it finds itself in.

Here is a rough example using the code I gave before.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css.css" />
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("slideNav").getElementsByTagName("DIV");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style>
#slideNav {
    position: fixed;
    z-index:9999;
    margin:84px 0 0 -20px;
    width:232px;
}
* html #slideNav {
    position: absolute; /* position fixed for IE6 */
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');
}
#slideNav ul {
    padding:5px 14px;
    list-style: none;
    width: 200px;
    background: #fff url("../img/nav.png") no-repeat right center; /* Image is vertical text */
    min-height: 160px;
    border:2px solid #AFAFAF;
    margin:0 0 16px -200px;
}
#slideNav div {
    width:40px;
    overflow:hidden
}
* html slideNav-nav ul {
    height:160px;
}
#slideNav div#slideNav-tools ul{
    background: #fff url("../img/tools.png") no-repeat right center; /* Image is vertical text */
    min-height: 80px;
}
* html #slideNav div#slideNav-tool ul {
    height:80px;
}
#slideNav div#slideNav-tools ul:hover,
#slideNav div.over ul.upper  {
    background: #fff url("../img/tools.png") no-repeat left center;
}
#slideNav div#slideNav-nav ul:hover,
#slideNav div.over ul.upper {
    background: #fff url("../img/nav.png") no-repeat left center; /* Image is vertical text */
}
#slideNav div:hover, #slideNav div.over {
    width:232px;
}
#slideNav div:hover ul, #slideNav div.over ul {
    margin-left:0;
}
#slideNav div li {
    list-style-type:none;
    margin-right: 22px;
    padding: 2px 0;
    display: block;
    border-bottom: 1px solid #000;
}
#slideNav div li a {
    color: #000;
    padding-bottom: 6px;
    text-decoration: none;
}
#slideNav div li:first-child {
    border-top: 1px solid #000;
}
#slideNav div li a:hover {
    color: #000099;
}
#wrapper {
    width:920px;
    margin:auto;
    background:#fffccc;
    padding:0 20px;
    border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="slideNav">
        <div id="slideNav-nav">
            <ul class="upper">
                <li><a href="#top">Top</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
        <div id="slideNav-tools">
            <ul class="lower">
                <li><a href="search.html" target="_blank">Search</a></li>
                <li><a href="javascript:toPrintALL();">Print All</a></li>
                <li><a href="preferences.html" target="_blank">User Preferences</a></li>
                <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
                <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
            </ul>
        </div>
    </div>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>



Ahh, that is much closer to what I’m looking for, thank you. I’m down to one IE7 bug if you have any ideas. For reasons not worth getting into I need to remove the vertical text image and replace it with actual text. I have this working in Firefox and IE8 but am having some difficulty with IE7. It seems to have something to do with the overflow setting in:

#slideNav div {
    width:40px;
    overflow:hidden
}

However, this also seems to be the trick to getting the panels to display within the confines of the outer wrapper. Any suggestions on overcoming this issue?

You can test the below code in IE7 (as compared to firefox) to see what I’m talking about.

Full Code with changes for Vertical Text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css.css" />
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("slideNav").getElementsByTagName("DIV");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style>
        #slideNav {
    position: fixed;
    z-index:9999;
    margin:84px 0 0 -20px;
    width:232px;
}
* html #slideNav {
    position: absolute; /* position fixed for IE6 */
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');
}
#slideNav ul {
    padding:5px 14px;
    list-style: none;
    width: 200px;
    background: #fff url("../img/nav.png") no-repeat right center; /* Image is vertical text */
    min-height: 160px;
    border:2px solid #AFAFAF;
    border-left:none;
    margin:0 0 16px -200px;
}
#slideNav div {
    width:40px;
    overflow:hidden
}
* html slideNav-nav ul {
    height:160px;
}
#slideNav div#slideNav-tools ul{
    background: #fff url("../img/tools.png") no-repeat right center; /* Image is vertical text */
    min-height: 80px;
}
* html #slideNav div#slideNav-tool ul {
    height:80px;
}
#slideNav div#slideNav-tools ul:hover,
#slideNav div.over ul.upper  {
    background: #fff url("../img/tools.png") no-repeat left center;
}
#slideNav div#slideNav-nav ul:hover,
#slideNav div.over ul.upper {
    background: #fff url("../img/nav.png") no-repeat left center; /* Image is vertical text */
}
#slideNav div:hover, #slideNav div.over {
    width:232px;
}
#slideNav div:hover ul, #slideNav div.over ul {
    margin-left:0;
}
#slideNav div li {
    list-style-type:none;
    margin-right: 22px;
    padding: 2px 0;
    display: block;
    border-bottom: 1px solid #000;
}
#slideNav div li a {
    color: #000;
    padding-bottom: 6px;
    text-decoration: none;
}
#slideNav div li:first-child {
    border-top: 1px solid #000;
}
#slideNav div li a:hover {
    color: #000099;
}
#slideNav .slideNav-title {
font-family:Georgia,"Times New Roman",Verdana;
text-transform:uppercase;
float:right;
text-align:center;
margin-right:20px;
margin-left:0;
}

#slideNav .slideNav-title span {
display:block;
}

#slideNav #slideNav-nav:hover .slideNav-title,#slideNav #slideNav-tools:hover .slideNav-title {
float:left;
margin-right:0;
margin-left:4px;
}
#wrapper {
width:90%;
margin:auto;
padding:0 20px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="slideNav">
        <div id="slideNav-nav">
			<span class="slideNav-title"><span>N</span><span>a</span><span>v</span><span>i</span><span>g</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span></span>		
            <ul class="upper">
                <li><a href="#top">Top</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
        <div id="slideNav-tools">
			<span class="slideNav-title"><span>T</span><span>o</span><span>o</span><span>l</span><span>s</span></span>			
            <ul class="lower">
                <li><a href="search.html" target="_blank">Search</a></li>
                <li><a href="javascript:toPrintALL();">Print All</a></li>
                <li><a href="preferences.html" target="_blank">User Preferences</a></li>
                <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
                <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
            </ul>
        </div>
    </div>
	<div style="margin-left: 20px;">
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
	</div>
</div>
</body>
</html>

I’d do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css.css" />
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("slideNav").getElementsByTagName("DIV");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style>
#slideNav {
    position: fixed;
    z-index:9999;
    margin:84px 0 0 -20px;
    width:232px;
}
* html #slideNav {
    position: absolute; /* position fixed for IE6 */
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');
}
#slideNav ul {
    padding:5px 20px 5px 8px;
    list-style: none;
    width: 200px;
    background: #fff url("../img/nav.png") no-repeat right center; /* Image is vertical text */
    min-height: 160px;
    border:2px solid #AFAFAF;
    margin:0 0 16px -200px;
    overflow:hidden;
}
#slideNav div {
    width:40px;
    overflow:hidden
}
* html slideNav-nav ul {
    height:160px;
}
#slideNav div#slideNav-tools ul {
    background: #fff url("../img/tools.png") no-repeat right center; /* Image is vertical text */
    min-height: 80px;
}
* html #slideNav div#slideNav-tool ul {
    height:80px;
}
#slideNav div#slideNav-tools ul:hover, #slideNav div.over ul.upper {
    background: #fff url("../img/tools.png") no-repeat left center;
}
#slideNav div#slideNav-nav ul:hover, #slideNav div.over ul.upper {
    background: #fff url("../img/nav.png") no-repeat left center; /* Image is vertical text */
}
#slideNav div:hover, #slideNav div.over {
    width:232px;
}
#slideNav div:hover ul, #slideNav div.over ul {
    margin-left:-2px;
    padding:5px 8px 5px 20px;
}
#slideNav div li {
    list-style-type:none;
    margin-right: 22px;
    padding: 2px 0;
    display: block;
    border-bottom: 1px solid #000;
}
#slideNav div li a {
    color: #000;
    padding-bottom: 6px;
    text-decoration: none;
}
#slideNav div li:first-child {
    border-top: 1px solid #000;
}
#slideNav div li a:hover {
    color: #000099;
}
#wrapper {
    width:920px;
    margin:auto;
    background:#fffccc;
    padding:0 20px;
    border:1px solid #000;
}
#slideNav li.slideNav-title {
    font-family:Georgia, "Times New Roman", Verdana;
    text-transform:uppercase;
    float:right;
    padding:0;
    border:none!important;
    color:#000;
    margin:0 -5px 0 0;
    display:inline;
}
#slideNav div:hover li.slideNav-title, #slideNav div.over li.slideNav-title {
    float:left;
    margin-left:-17px
}
#slideNav .slideNav-title span {
    display:block;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="slideNav">
        <div id="slideNav-nav">
            <ul class="upper">
                <li class="slideNav-title"> <span>N</span><span>a</span><span>v</span><span>i</span><span>g</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span> </li>
                <li><a href="#top">Top</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
        <div id="slideNav-tools">
            <ul class="lower">
                <li class="slideNav-title"><span>T</span><span>o</span><span>o</span><span>l</span><span>s</span></li>
                <li><a href="search.html" target="_blank">Search</a></li>
                <li><a href="javascript:toPrintALL();">Print All</a></li>
                <li><a href="preferences.html" target="_blank">User Preferences</a></li>
                <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
                <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
            </ul>
        </div>
    </div>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>


The title is put into the list because its the ul that creates the bounding box.

You can have the tools message move to the right if you want when it pops out but I assumed you wanted it at the left at all times.

Working in IE6 - 8.

I know this is a late response, but I’ve found a critical bug with this current approach. When the tab is in a hidden state it is preventing links from being clickable in the area where the menu would cover if it was active.

To illistrate the point I’ve included the code you posted in the above post. The only difference is I added hyperlinks to all the paragraphs and extended the length of the string in each paragraph. If you try to click on links to the right of the hidden menu you will notice you can’t, however you can click on links above/below. Is this a zindex related issue?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css.css" />
<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("slideNav").getElementsByTagName("DIV");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->
<style>
#slideNav {
    position: fixed;
    z-index:9999;
    margin:84px 0 0 -20px;
    width:232px;
}
* html #slideNav {
    position: absolute; /* position fixed for IE6 */
top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+ 84 +'px');
}
#slideNav ul {
    padding:5px 20px 5px 8px;
    list-style: none;
    width: 200px;
    background: #fff url("../img/nav.png") no-repeat right center; /* Image is vertical text */
    min-height: 160px;
    border:2px solid #AFAFAF;
    margin:0 0 16px -200px;
    overflow:hidden;
}
#slideNav div {
    width:40px;
    overflow:hidden
}
* html slideNav-nav ul {
    height:160px;
}
#slideNav div#slideNav-tools ul {
    background: #fff url("../img/tools.png") no-repeat right center; /* Image is vertical text */
    min-height: 80px;
}
* html #slideNav div#slideNav-tool ul {
    height:80px;
}
#slideNav div#slideNav-tools ul:hover, #slideNav div.over ul.upper {
    background: #fff url("../img/tools.png") no-repeat left center;
}
#slideNav div#slideNav-nav ul:hover, #slideNav div.over ul.upper {
    background: #fff url("../img/nav.png") no-repeat left center; /* Image is vertical text */
}
#slideNav div:hover, #slideNav div.over {
    width:232px;
}
#slideNav div:hover ul, #slideNav div.over ul {
    margin-left:-2px;
    padding:5px 8px 5px 20px;
}
#slideNav div li {
    list-style-type:none;
    margin-right: 22px;
    padding: 2px 0;
    display: block;
    border-bottom: 1px solid #000;
}
#slideNav div li a {
    color: #000;
    padding-bottom: 6px;
    text-decoration: none;
}
#slideNav div li:first-child {
    border-top: 1px solid #000;
}
#slideNav div li a:hover {
    color: #000099;
}
#wrapper {
    width:920px;
    margin:auto;
    background:#fffccc;
    padding:0 20px;
    border:1px solid #000;
}
#slideNav li.slideNav-title {
    font-family:Georgia, "Times New Roman", Verdana;
    text-transform:uppercase;
    float:right;
    padding:0;
    border:none!important;
    color:#000;
    margin:0 -5px 0 0;
    display:inline;
}
#slideNav div:hover li.slideNav-title, #slideNav div.over li.slideNav-title {
    float:left;
    margin-left:-17px
}
#slideNav .slideNav-title span {
    display:block;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="slideNav">
        <div id="slideNav-nav">
            <ul class="upper">
                <li class="slideNav-title"> <span>N</span><span>a</span><span>v</span><span>i</span><span>g</span><span>a</span><span>t</span><span>i</span><span>o</span><span>n</span> </li>
                <li><a href="#top">Top</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
        <div id="slideNav-tools">
            <ul class="lower">
                <li class="slideNav-title"><span>T</span><span>o</span><span>o</span><span>l</span><span>s</span></li>
                <li><a href="search.html" target="_blank">Search</a></li>
                <li><a href="javascript:toPrintALL();">Print All</a></li>
                <li><a href="preferences.html" target="_blank">User Preferences</a></li>
                <li><a href="javascript:increaseFontSize();">Increase Font</a></li>
                <li><a href="javascript:decreaseFontSize();">Decrease Font</a></li>
            </ul>
        </div>
    </div>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
    <p><a href="#">test test</a></p>
</div>
</body>
</html>

Hi,
Yes, it is a stacking issue, not a bug.

You have your #slideNav div set at 232px wide in it’s un-hovered state and it is layering above the other links in your <p> tags since it is a positioned element. Any links that would have been over 232px to the right would have been clickable.

You can remove the width from the fixed position #slideNav and allow it to shrinkwrap in it’s un-hovered state. Then it will expand to 232px when hovered since you have that width set on your child divs.

#slideNav {
    position: fixed;
    z-index:9999;
    margin:84px 0 0 -20px;
    [COLOR=Red]/*width:232px;*/[/COLOR]
}
.
.
.
#slideNav div:hover, #slideNav div.over {
    [COLOR=Blue]width:232px;[/COLOR]
}

That was it, thanks for the help!