Hello,
I've nearly cracked it, however IE6 is driving me mad, I have a menu which is being displayed fine in IE7, FF & Opera ( I know there's a first! )
IE6 on the other hand seems to be pushing down the menu when hovered over by the height of a menu option...
here is a screen shot as you will see when I hovered over 'October' you will notice 'November' is is shoved down creating a space, the years 2005,2006 appear fine, but again when hovering over 2005 it shoves 2006 down in the same way.
why is this happening?
CSS...
HTML
many thanks 1DMF
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
I've nearly cracked it, however IE6 is driving me mad, I have a menu which is being displayed fine in IE7, FF & Opera ( I know there's a first! )
IE6 on the other hand seems to be pushing down the menu when hovered over by the height of a menu option...
here is a screen shot as you will see when I hovered over 'October' you will notice 'November' is is shoved down creating a space, the years 2005,2006 appear fine, but again when hovering over 2005 it shoves 2006 down in the same way.
why is this happening?
CSS...
Code:
/* CSS Menus - Horizontal CSS Menu with Dropdown and Popout Menus - 20050131 */
*{
margin:0;
padding:0;
border:none;
}
body{
font-family:arial,verdana,tahoma,sans-serif;
font-size: 12pt;
}
/* Begin CSS Popout Menu */
#menu{
margin:0 auto;
width:110px;
}
#menu a, #menu h2{
font:bold 11px/16px arial,helvetica,sans-serif;
display:block;
border-width:1px;
border-style:solid;
border-color:#ccc #888 #555 #bbb;
white-space:nowrap;
margin:0;
padding:1px 0 1px 3px;
text-align:center;
}
#menu h2{
color:#fff;
background:#000 url('/images/expand3.gif') no-repeat 100% 100%;
text-transform:uppercase
text-align:center;
}
#menu a{
background:#eee;
text-decoration:none;
}
#menu a, #menu a:visited{
color:#000;
}
#menu a:hover{
color:#f00;
background:#ddd;
}
#menu a:active{
color:#060;
background:#ccc;
}
#menu ul{
list-style:none;
margin:0;
padding:0;
width:100px;
}
/* Requirement: Put the element selector name (div)
onto non anchor hover selectors to force IE5 and
5.5 to correctly apply the csshover file. */
div#menu li, div#menu li:hover{
position:relative;
}
div#menu li ul{
position:absolute;
top:0;
left:100.1%;
display:none;
}
div#menu ul ul,
div#menu ul ul ul,
div#menu ul li:hover ul ul,
div#menu ul li:hover ul ul ul
{display:none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display:block;}
div#menu ul ul ul
{width:150px;}
/* Begin non-anchor hover selectors */
/* Enter the more specific element (div) selector
on non-anchor hovers for IE5.x to comply with the
older version of csshover.htc - V1.21.041022. It
improves IE's performance speed to use the older
file and this method */
div#menu h2:hover{
background:#000 url('/images/expand3.gif') no-repeat -999px -9999px;
}
div#menu li:hover{
cursor:pointer;
z-index:100;
}
/* End of non-anchor hover selectors */
/* Styling for Expand */
#menu a.x, #menu a.x:visited{
font-weight:bold;
color:#000;
background:#eee url('/images/expand3.gif') no-repeat 100% 100%;
}
#menu a.x:hover{
color:#a00;
background:#ddd;
}
#menu a.x:active{
color:#060;
background:#ccc;
}
/* End CSS Popout Menu */
#statement
{
border-width:1px;
border-color:#233e97;
border-style:solid;
overflow:auto;
width:799px;
height:540px;
position:relative;
}
#printButton
{
width:160px;
height:60px;
border-width: 1px;
border-style: solid;
border-color: #233e97;
border-top-width:0px;
border-bottom-width:0px;
text-align:center;
font-size:10pt;
font-family:Arial;
}
#instructions
{
width:160px;
height:200px;
border-width: 1px;
border-style: solid;
border-color: #233e97;
text-align:center;
font-size:10pt;
font-family:Arial;
}
#instructionstable
{
width:160px;
height:200px;
border-width: 1px;
border-style: solid;
border-color: #233e97;
text-align:center;
font-size:10pt;
font-family:Arial;
}
#CurStat
{
text-align:center;
font-family: Arial, Verdana;
font-size: 15pt;
color: #ffffff;
background-image: url('/images/tablebar.jpg');
background-repeat: no-repeat;
border-width: 1px;
border-style: solid;
border-color: #233e97;
width:799px;
text-align:center;
border-bottom-width:0px;
}
.titlecell
{
font-family: Arial, Verdana;
font-size: 15pt;
color: #ffffff;
background-image: url('/images/tablebar.jpg');
background-repeat: no-repeat;
}
.menu {
border-width: 1px;
border-style: solid;
border-color: #233e97;
}
H1 { font-family:Verdana,sans-serif; font-size:medium; font-weight:bold; text-decoration:underline; margin-bottom:0%; margin-top:0%}
H2 { font-family:Verdana,sans-serif; font-size:x-small; font-weight:bold; text-decoration:underline; margin-bottom:0%; margin-top:0%}
Code:
<!--[if IE]>
<style type="text/css" media="screen">
/* IE Menu CSS */
/* csshover.htc file version: V1.21.041022 - Available for download from: [URL unfurl="true"]http://www.xs4all.nl/~peterned/csshover.html[/URL] */
body{behavior:url(<tmpl_var name='url_to_domain'>/style/csshover.htc);}
#menu a{height:0px;}
</style>
<![endif]-->
</head>
<!-- Main Content -->
<body onload="<tmpl_var NAME='onload'>">
<table width="100%" class="menu">
<tr>
<td align="center" valign="middle">
<div id="menu" style="z-index:999;">
<!--tmpl_loop name="month"-->
<ul>
<li><a class="x"><!--tmpl_var name='month'--></a>
<ul>
<!--tmpl_loop name="year"-->
<li><a class="x"><!--tmpl_var name='year'--></a>
<ul>
<!--tmpl_loop name="stat"-->
<li><a onclick="pwait(); getAjax('<tmpl_var name='url_to_cgi'>/my.cgi','urlvars','<tmpl_var name='period'>')">Period Ending <!--tmpl_var name='period'--></a></li>
<!--/tmpl_loop-->
</ul>
</li>
<!--/tmpl_loop-->
</ul>
</li>
</ul>
<!--/tmpl_loop-->
</div>
</td>
</tr>
</table>many thanks 1DMF
"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.