Nested Menu Flickers in Internet Explorer [Archive]

htd

04-30-2009, 01:47 PM

Hi,

I just built a navigation bar that works well in all of the browsers that I've tested, except Internet Explorer. My client is telling me that he has experienced some "flickering" when he tries to select an item from the submenu lists. Has anyone else experienced a similar problem in IE or have advice about a fix?

Here's the site:
http://www.chicagoanalysis.org/index.php

Thanks!

HERE IS THE CODE (CSS follows):

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

<script type="text/javascript" src="swfobject.js"></script>

</head>
<body bgcolor="#999999">
<center>
<table border=0 cellpadding=0 cellspacing=0 bgcolor="#ffffff">
<tr><td width=900 height=200 valign=top>

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=80>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td width=40 height=40></td><td width=40 height=40 bgcolor="#FEE727"></td></tr>
<tr><td width=40 height=40 bgcolor="#DD0000"></td><td width=40 height=40></td></tr>
<tr><td width=40 height=40></td><td width=40 height=40 bgcolor="#03AF4D"></td></tr>
<tr><td width=40 height=40 bgcolor="#D33092"></td><td width=40 height=40></td></tr>
<tr><td width=40 height=40></td><td width=40 height=40 bgcolor="#164B9C"></td></tr>
</table>
</td>
<td width=224></td>
<td width=596 valign=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr><td width=596 height=40></td></tr>
<tr><td width=596 height=119><a href="index.php"><img src="images/chicago.gif" width=596 height=119 border=0 alt="The Chicago Institute for Psychoanalysis"></a></td></tr>
<tr><td width=596 height=41></td></tr>
</table>
</td>
</tr>
</table>

</td></tr>
<tr><td width=900 height=3></td></tr>
<tr><td width=900 valign=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=210 valign=top>

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="about.php">ABOUT US</a>
<ul>
<li><a href="about.php#contact">Contact Us</a></li>
<li><a href="about.php#mission">Mission Statement</a></li>
<li><a href="director.php">Director's Statement</a></li>
<li><a href="video.php">DVD Retrospective</a></li>
<li><a href="board.php">Board of Trustees</a></li>
</ul>
</li>

<li><a href="#">PROFESSIONAL TRAINING</a>
<ul>
<li><a href="psychedu.php">Psychoanalytic Education Program</a></li>
<li><a href="adultptp.php">Adult Psychotherapy Training Program</a></li>
<li><a href="cappt.php">CAPPT</a></li>
<li><a href="corst.php">CORST</a></li>
<li><a href="fellow.php">Fellowship Program</a></li>
</ul>
</li>

<li><a href="#">THERAPEUTIC SERVICES</a>
<ul>
<li><a href="child_center.php">Center for Child and Adolescent Psychotherapy</a></li>
<li><a href="barrharris.php">Barr-Harris Children's Grief Center</a></li>
<li><a href="clinic.php">Adult Psychotherapy and Psychoanalysis Clinic</a></li>
</ul>
</li>

<li><a href="#.php">CONTINUING EDUCATION</a>
<ul>

<li><a href="cappt-extension.php">CAPPT Extension Classes</a></li>
</ul>
</li>

<li><a href="apply.php">APPLY</a></li>

<li><a href="donate.php">DONATE</a></li>

<li><a href="#.php">LIBRARY</a>
<ul>
<li><a href="mclean.php">Helen McLean Library</a></li>
<li><a href="gitelson.php">Maxwell Gitelson Film Library</a></li>
</ul>
</li>

<li><a href="#">COURSE READINGS</a>
<ul>
<li><a href="reading/core.htm">Core Program</a></li>
<li><a href="reading/app.htm">Adult Psychotherapy Program</a></li>
<li><a href="reading/cappt.htm">CAPPT</a></li>
<li><a href="reading/distance.htm">Distance Learning</a></li>
<li><a href="http://www.pep-web.org" target="display">PEP-Web</a></li>
</ul>
</li>

<li><a href="#">DIRECTORIES</a>
<ul>
<li><a href="admin.php">Administrative Directory</a></li>
<li><a href="faculty.php">Faculty Directory</a></li>
<li><a href="capptfaculty.php">CAPPT Faculty Directory</a></li>
</ul>
</li>

<li><a href="search.php">SEARCH</a></li>

<li><a href="links.php">LINKS</a></li>

</ul>
</div>

HERE IS THE CSS:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: 13px arial;
width: 210px; /* Main Menu Item widths */
height: 30px; /* Main Menu Item heights */
border-bottom: 1px solid #fff;
text-align: left;
}

.sidebarmenu ul li{
position: relative;
text-align: left;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
text-align: left;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #cccccc; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: #000000;
}

.sidebarmenu ul li a:hover{
background-color: #999999;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 190px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

X96 Web Design

05-01-2009, 02:10 PM

That's IE for you...

Just a tip for you code, please put code in [CODE] tags...

And don't build your sites on tables - it's a very bad habit.

Arrows to indicate child menus on your menu would be helpful as well.

And where it says: "not-for-profit",

The Chicago Institute for Psychoanalysis is a not-for-profit organization founded in 1932
in the red box, it should be non-profit....

As for the flickering problem, it may be the script, try looking around DD (or another site) for a similar script that may not flicker...

Sorry for all the stuff not related to the flickering... Just thought you'd like a little feedback...

Cheers,
X96 WD

htd

05-01-2009, 03:29 PM

Thanks for the tips.

I'm still hoping to figure out a way to fix the flickering in Internet Explorer. This menu works exactly as I want it to in every other browser, and after looking into other options, it's still my first choice if I can figure out how to make it work...

Any suggestions?

htd

05-05-2009, 02:16 PM

Well, after four days of trying to fix the problem, I had to abandon the script. The link in the first post, like the rest of the site, now uses a much messier script created in Fireworks. But the site now works in Internet Explorer. If anyone encounters a similar problem, where the submenu disappears in IE when you try to select an item near the bottom of the submenu, and finds any kind of fix, please reply! I'd love to be able to use this script eventually.