Vertical Menu Display Bug in IE 5.*
Posted: Tue Feb 06, 2007 10:21 pm
I have a website nearly ready for deployment (http://www.wku.edu/chhs/cms). It displays fine in Mozilla, Firefox, and IE 6.x and higher. The vertical menu only bugs in IE 5. You can see the bugs in the attached gifs. I just upgraded from CMS .13 canary to 1.0.4 (Lanai). This introduced a new bug for the current page display in the menu. Seperate issue. I'm not certain which version of php (4.x) or MySQL the server runs. Since this is a display bug in IE I'm not certain those are relevant. I'm positive there is something in CSS that when I took out the div tags to make the template table based, I broke. I'm hopeful someone can help me fix this!
Mark took a stab at it (hence the div tag in the template below) but it was without this information available (Thanks for Looking Mark!).
This is the style sheet associated with the menu:
This is the template within which the menu appears:
[gelöscht durch Administrator]
Mark took a stab at it (hence the div tag in the template below) but it was without this information available (Thanks for Looking Mark!).
This is the style sheet associated with the menu:
Code: Select all
#menu_vert, #menu_vert ul {
margin: 0;
padding: 0;
}
#menu_vert ul {
/* width: 100%; Width of Menu Items */
border-top: 1px solid #069;
border-right: 1px solid #069;
background: #ececec;
}
#menu_vert li {
/* width: 100%; */
list-style: none;
}
#menu_vert li a {
display: block;
text-decoration: none;
padding: 5px 5px 5px 10px;
border-bottom: 1px solid #069;
color: #18507C;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu_vert li { float: left; height: 1%; }
* html #menu_vert li a { height: 1%; }
/* End */
#menu_vert ul ul li a,
#menu_vert ul ul li a:link,
#menu_vert ul ul li a:visited {
display: block;
padding: 3px 5px 3px 25px;
border-bottom: none;
font-size: 90%;
}
#menu_vert ul ul {
border-right: none;
border-top: none;
border-bottom: 1px solid #006699;
padding-bottom: 5px;
}
#menu_vert ul ul ul li a,
#menu_vert ul ul ul li a:link,
#menu_vert ul ul ul li a:visited {
padding-left: 40px;
}
#menu_vert ul ul ul {
border-bottom: none;
}
#menu_vert ul ul ul ul li a,
#menu_vert ul ul ul ul li a:link,
#menu_vert ul ul ul ul li a:visited {
padding-left:60px;
}
#menu_vert ul ul ul ul {
border-bottom: none;
}
#menu_vert li ul li a,
#menu_vert li ul li ul li a,
#menu_vert li ul li ul li ul li a { padding: 5px 5px; }
/* Sub Menu Styles */
/* fixed image flicker by adding .cssmenu-vertical ul */
#menu_vert li a:hover {
background-color: #abb0b6;
}
.current
{
list-style-type: square;
display: inline;
background-color: #abb0b6;
}
#menu_vert li.activeparent {
background-color: #abb0b6;
}
#menu_vert li.active01 h3 {
display: block;
text-decoration: none;
padding: 5px 5px 5px 10px;
border-bottom: 1px solid #006699;
color: #18507C;
margin: 0;
font-size: 1em;
line-height: 1em;
background-color: #abb0b6;
}
#menu_vert li.active02 h3
{
display: block;
padding: 3px 5px 3px 25px;
border-bottom: none;
font-size: 90%;
font-weight: bold;
color: #18507C;
margin: 0;
}
#menu_vert li.active03 h3
{
display: block;
padding: 3px 5px 3px 40px;
border-bottom: none;
font-size: 90%;
font-weight: bold;
color: #18507C;
margin: 0;
}
li.sectionheader {
margin: 0;
margin-right: -1px;
}
li.sectionheader h3 {
margin: 0;
padding: 1em 10px 0.5em 10px;
border: none;
background-color: #fff;
border-bottom: 1px solid #006699;
z-index: 90;
}
li.separator {
height: 1px;
padding: 0.5em 0;
margin: 0;
/* width: 100%; */
border-bottom: 1px dotted black;
}
This is the template within which the menu appears:
Code: Select all
<!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" xml:lang="en" lang="en">
<head>
<!-- Type the title of your site here -->
<title>College of Health and Human Services - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{global_content name='JavaScript for IE page width'}
</head>
</__body>
<!-- Start accessibility skip links -->
<ul class="accessibility">
<li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
<li>{cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}</li>
</ul>
<!-- End accessibility skip links -->
<!-- Page Define -->
<table width="1024" border="0" cellspacing="0" cellpadding="0" id="pagewrapper" align="center">
<!-- Begin Header Row of Layout Table -->
<tr>
<td>
<!-- Begin Header Table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- Header -->
<tr>
<td align="left" bgcolor="#FEB08E"><img src="uploads/images/college.jpg"></td>
<td align="right" bgcolor="#FEB08E"><img src="uploads/images/banner_500x150.jpg"></td>
</tr>
<tr bgcolor="#EE8262">
<!-- Breadcrumb -->
<td id="breadcrumbs" valign="middle" >
{breadcrumbs starttext='<a href="http://www.wku.edu">WKU</a>' root='CHHS'}
</td>
<!-- Search Box -->
<td id="breadcrumbs" align="right" valign="middle">
<form method="get" action="http://www.google.com/u/wkuedu">
<input type="hidden" name="hq" value="inurl:www.wku.edu/chhs/cms">
<input type="text" name="q" size="30" maxlength="255" value="">
<input type="submit" name="sa" value="Search">
</form>
</td>
</tr>
</table>
<!-- End Header Table -->
</td>
</tr>
<!-- End Header Row of Layout Table -->
<!-- Begin Content Row -->
<tr>
<td>
<!-- Define Content Layout Table -->
<table width="1020" border="0" cellspacing="0" cellpadding="0" align="center">
<tr id="content" valign="top">
<!-- Start Navigation Block -->
<td id="menu_vert" valign="top">
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{cms_module module='menumanager' collapse='1}
</div>
</td>
<!-- End Navigation -->
<!-- Content Block -->
<td id="main">
<table border="0" cellspacing="0" cellpadding="0">
<!-- Insert Content -->
<tr>
<td colspan="2">
{content}
<hr />
</td>
</tr>
<!-- Start relational links -->
<tr>
<td width="50%" align="left" valign="top">
{cms_selflink anchorlink='main' dir='anchor' text='^ Top'}</td>
<td width="50%" align="right">{cms_selflink dir="previous"}<br />
{cms_selflink dir="next"}</td>
</tr>
<!-- End relational links -->
</table>
<!-- End Content Insertion -->
</td>
<!-- News Block-->
<td id="news2" bgcolor="#ccc"><h2>News</h2>
{cms_module module='news' number='5'}
</td>
</tr>
</table>
<!-- End Content Layout Table -->
</td>
</tr>
<!-- End Content Row -->
<!-- Begin Footer -->
<tr>
<td id="footer" >{global_content name='footer'}</td>
</tr>
<!-- End Footer -->
</table>
<!-- End Pagewrapper -->
<__body>
</__html>