First off, I aplogize in advance that I can't link to the site where
I'm having issues - it is a government intranet site. I will do my
best to show all elements of the issue here.
I'm using the superfish menu to show a dropdown - everything works
fine in my LAN testing, but when I move things up to our intranet
site, IE6 has a weird problem - the menus drop down, but are drawn
VERY slowly. The menu items will appear first, followed usually by the
ul background, then by the li background (divider lines). This can
sometimes take up to about 7-10 seconds for the entire dropdown to
appear.
Weirdly, this behavior disappears if one navigates off the page, then
uses the back button to return - the menus draw quickly just like they
do on the LAN (and in Firefox).
Has anyone seen this behavior before? Any suggestions?
CSS here:
**********************
#menu { background: url(../images/menu-bg.gif) top left no-repeat;
width: 760px; margin: 0 auto; height: 20px; padding: 0 0 10px 0;
color: #ffffff; }
/*#menu * { margin: 0; padding: 0; }*/
.nav {
margin:0;
padding:0;
list-style:none;
}
.nav * {
margin:0;
padding:0;
}
ul.nav { width: 730px; margin: 0 auto; /*background: url(../images/
menu-right.gif) top right no-repeat; */text-align: center; }
.nav {
line-height:1.0;
text-align: center;
list-style: none;
height: 20px;
font-weight: bold;
}
.nav ul {
position:absolute;
top:-999em;
}
.nav ul li,
.nav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
display: inline;
list-style: none;
font-size: 1em;
padding: 0 10px;
margin: 0;
line-height: 1.5em; color: #f2f2f2;
}
.nav li {
display: inline;
position:relative;
z-index:99; background: url(../images/menu-divider.gif) top right
no-
repeat;
}
.nav li.last { background: none; }
.nav a {
/*display:block;*/
}
.nav li:hover ul,
ul.nav li.sfHover ul {
left:-1px;
background: none; width: 150px; position: absolute; top: 18px;
background: url(../images/dropdown-bg.gif) bottom left no-repeat;
}
.nav li:hover li ul,
.nav li.sfHover li ul {
top:-999em;
}
.nav li li:hover ul,
ul.nav li li.sfHover ul {
left:9.45em;
top:-1px;
}
.superfish li:hover ul,
.superfish li li:hover ul,
.superfish li li li:hover ul {
top: -999em; /* hide submenu in screen-reader and search-engine
friendly way */
}
/*** ORIGINAL SKIN ***/
.nav {
/* float:left;
margin-bottom:1.5em;*/
}
.nav li {
/* background:#BDD2FF;
border-left:1px solid #fff;
border-top:1px solid #CFDEFF;
width:9.45em;*/
}
.nav li:hover, .nav li.sfHover,
.nav a:focus, .nav a:hover, .nav a:active {
/*background:#CFDEFF;*/
}
.nav li li {
/*background:#AABDE6;*/
width: 140px;
padding: 2px 5px 3px 1em;
margin: 0 0 3px 0;
display: block;
/*border-bottom: 1px solid #538457;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
text-indent: -0.5em;
text-align: left;
background: url(../images/list-divider.gif) bottom center no-repeat;
}
.nav ul li a {
padding: 0;
text-decoration:none;
text-indent: none;color: #000000;
}
.nav li li li {
/*background:#9AAEDB;*/
}
**********************
HTML here:
**********************
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav").superfish({
animation : { opacity:"show", height:"show" }
});
});
</script>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="clearheader"></div>
<!-- to clear header - you could use padding-top instead on the
three main elements-->
<div id="left"> </div>
<!-- end div LEFT -->
<div id="right"> </div><!-- end div RIGHT -->
<div id="centercontent">
<!--center content goes here -->
<div id="menu">
<ul class="nav">
<li>
<a href="#">OCFO@ Work</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Annual Planning
and Budgeting</a></li>
<li><a href="#">Strategic
Plan</a></li>
<li><a href="#">Financial
Services and Support</a></li>
</ul>
</li>
<li>
<a href="#a">Training</a>
**********************
Superfish hasn't been altered in any way.
Any help appreciated.
Andrew
