This menu is continuing to give me problems on IE6 *sigh*. Thanks a lot for the help with the previous issues, I’m almost there!
The following problems refer to the menu on this site:
http://ivanhoeps.vic.edu.au/index.php
I’m having a couple of new problems:
1 - The submenu flyout isn’t displaying on the front page. If I click through to any of the first level pages, then the submenu items fly out as they are supposed to.
2 - Some submenu items are being displayed using the top level menu style. It’s only a small number of items, and there’s nothing different about them in the code that I can see. When hovered, the colours change to those that they should, but the width of the element is still smaller than it should be. Some examples are: Curriculum/VELS, Enrolment/Prep Transition, Students/Camp Updates.
3 - Whenever a submenu page is visited, that page’s appearance in the flyout menu also changes to the same as the problem described above, displaying the top level menu style. It’s as if the "visited" state is styled with the top level style. I haven’t defined a visited style for any of the menu items (at least not deliberatley). It stays this way untill I restart the browser.
Here’s the various related code:
Wayfinder call:
[[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_flyout`]]
cssplay_parentRow chunk:
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
[+wf.wrapper+]
</li>
cssplay_outer chunk:
<div[+wf.classes+]>
<ul>
[+wf.wrapper+]
</ul>
</div>
cssplay_inner chunk:
<ul>
[+wf.wrapper+]
</ul>
cssplay_row chunk:
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
cssplay_dropdown chunk:
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/dropdown.css" />
flyout.css:
/* common styling */
.menu {font-family: arial, sans-serif; width:196px; position:absolute; top:226px; left:0; font-size:13px; margin:18px 0 0 0; padding:0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#3c70ae; font-weight:bold; width:168px; height:17px;text-align:left; padding:7px 0 3px 2px; margin:0 0 0 26px; border:1px solid #3c70ae; border-width:0 0 1px 0; background:#C9D5EB; font-size:13px; position:relative; position:relative; z-index:1;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#3c70ae; background:#dde33b;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:170px; width:180px;}
.menu ul li:hover ul li a.hide {background:#dde33b; color:#3c70ae; position:relative;}
.menu ul li:hover ul li:hover a.hide {width:180px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#3c70ae; color:#fff; width:180px; border:1px solid #fff; border-width:0 0 1px 0;padding-left:10px;}
.menu ul li:hover ul li a:hover {background:#3c70ae; color:#dde33b; border:1px solid #dde33b; border-width:0 0 1px 0;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#3c70ae; color:#fff;}
.menu ul li:hover ul li:hover ul li a:hover {background:#3c70ae; color:#fff;}
flyout_ie.css:
table {border-collapse:collapse; border:0; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a:hover {color:#3c70ae; background:#dde33b; position:relative; z-index:10;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:144px; width:150px;}
.menu ul li a:hover ul li a.sub {background:#dde33b; color:#3c70ae; position:relative;}
.menu ul li a:hover ul li a {display:block; background:#3c70ae; color:#fff; width:180px; border:1px solid #fff; border-width:0 0 1px 0;}
.menu ul li a:hover ul li a ul {visibility:hidden; position:relative; z-index:10;}
.menu ul li a:hover ul li a:hover {background:#3c70ae; color:#fff;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#3c70ae; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#3c70ae; color:#fff;}
Web site style style.css:
body {
margin:0;
padding:0;
width:100%;
background-color:null;
}
#bgtop {
position:absolute;
z-index:1;
width:100%;
height:226px;
background-color:#C9D5EB;
}
#bgbot {
position:absolute;
bottom:14px;
z-index:1;
width:100%;
height:22px;
background-color:#C9D5EB;
}
#page {
position:relative;
z-index:1;
width:100%;
}
#main {
position:relative;
z-index:2;
width:985px;
margin-left:auto;
margin-right:auto;
background-image:url(/images/bg-main.gif);
background-color:#c9d5eb;
}
#leftcol {
width:196px;
float:left;
display:inline;
margin:0;
padding:0;
}
#midcol {
width:198px;
float:left;
display:inline;
margin:0;
padding:0;
}
#rightcol {
width:591px;
float:left;
background-color:#ffffff;
display:inline;
margin:0;
padding:0;
}
#footer {
clear:both;
border-top:#194890 22px solid;
background-color:#ffffff;
}
p, li, td {
font-size:12px;
color:#000000;
}
p, li, h1, h2, h3, td {
font-family:arial,sans serif;
color:#535353;
}
h2 {
font-size:14px;
color:#194890;
}
#bluebold {
font-weight:bold;
color:#194890;
}
#rightcol p, #rightcol h1, #rightcol h2, #rightcol h3, #rightcol table {
margin: 10px 30px 5px 30px;
}
#rightcol li {
margin:0 30px 5px 5px;
}
#rightcol h1 {
font-size:20px;
color:#194890;
border-bottom:solid 1px #194890;
margin-top:20px;
}
#rightcol p, li, td {
font-size:14px;
line-height:130%;
}
#footer p {
font-size:10px;
text-align:right;
margin:1px 0 0 0;
padding:0;
}
#homeright {
background-color:#d8d8d8;
}
#homeleft p, #homeleft h1, #homeleft td {
color:#194890;
margin-bottom:0;
border:none;
}
#homeleft h1 {
font-size:24px
}
#homeleft p, td {
font-size:13px;
}
#homeright p, #homeright h1 {
color:#535353;
margin:10px 10px 0 10px;
border:none;
}
#homeright h1 {
font-size:20px
}
#homeright p {
font-size:12px;
}
Thank you very much for any help you can provide *bow*.
Neil
☆ A M B ☆