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.
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.
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?
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
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.
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
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.
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.
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.
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?
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.