No replies
datonn
Offline
Regular
Last seen: 8 years 14 weeks ago
Timezone: GMT-6
Joined: 2004-03-06
Posts: 17
Points: 9

Hello everyone! I am slowly getting the hang of CSS navigational menu generation, but I've been have two irksome problems in MSIE today with one of the sites I am building....and I have not yet come across the solution to my problem after a few hours of searching the web.

PROBLEM #1. Mozilla Firefox will display a left (vertical) menu what looks to be 30-40 pixels lower than when that same menu is displayed in MSIE . My suspicion is that MSIE is actually the one at fault, but cannot be sure. Attached are two screen shots of what I am talking about.

PROBLEM #2. When hovering over both my vertical and horizontal menus in MSIE, the mouse "hover" over several of the items that are lower in the "child" and "grandchild" layers of the menu structure won't remain on the page long enough for me to actually be able to click on them. Could this be a csshover.htc issue? I thought I had adequately handled all of those issues, but if anyone who is willing to look at my CSS file and a sample of the problems I am talking about in a proof page, I would greatly, GREATLY appreciate it.

CSS file http//www.tonnhaus.com/temp/knuj/templates/css/horizontal_menu.css (also shown below)

Sample web page http//www.tonnhaus.com/temp/knuj/contact.htm

Thank you!

Derek

/* Vertical Menu on Left Edge of Page */
#menuleft{
positionabsolute;
margin-top125px;
top0.5em;
left0.5em;
z-index2;
width10em;
padding-bottom12em; /* To allow room for bottom dropdown */
}

#menuleft a, #menuleft h2{
fontbold 11px/13px arial,helvetica,sans-serif;
displayblock;
border-width1px;
border-stylesolid;
border-color#ccc #888 #555 #bbb;
white-spacewrap;
margin0;
padding1px 3px;
}

#menuleft h2{
color#fff;
background#000;
z-index500;
}

#menuleft a{
color#CC0000;
background#eee;
text-decorationnone;
z-index500;
}

#menuleft ahover{
color#CC0000;
background#ddd;
z-index500;
}

#menuleft aactive{
color#333333;
background#ccc;
z-index500;
}

#menuleft ul{
list-stylenone;
margin0;
padding0;
width120px;
z-index500;
}

/* 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#menuleft li, div#menuleft lihover{
positionrelative;
z-index500;
}

div#menuleft li ul{
positionabsolute;
top0;
left100.1%;
displaynone;
z-index500;
}

div#menuleft ul ul,
div#menuleft ul ul ul,
div#menuleft ul lihover ul ul,
div#menuleft ul lihover ul ul ul
{displaynone;}

div#menuleft ul lihover ul,
div#menuleft ul ul lihover ul,
div#menuleft ul ul ul lihover ul
{displayblock;}

/* End non-anchor hover selectors */

/* Styling for Expand */

#menuleft a.x, #menuleft a.xvisited{
font-weightbold;
color#000;
background#eee no-repeat bottom right;
z-index500;
}

#menuleft a.xhover{
color#a00;
background#ddd;
z-index500;
}

#menuleft a.xactive{
color#060;
background#ccc;
z-index500;
}


/* Horizontal Menu Across Top of Page */
#menutop{
width100%;
margin-left120px;
floatleft;
}

#menutop a, #menutop h2{
fontbold 11px/13px arial,helvetica,sans-serif;
displayblock;
border-width1px;
border-stylesolid;
border-color#ccc #888 #555 #bbb;
white-spacewrap;
margin0;
padding1px 0 1px 3px;
}

#menutop h2{
color#fff;
background#000 no-repeat 100% 100%;
z-index500;
}

#menutop a{
background#eee;
z-index500;
}

#menutop a, #menutop avisited{
color#CC0000;
z-index500;
}

#menutop ahover{
color#CC0000;
background#ddd;
z-index500;
}

#menutop aactive{
color#333333;
background#ccc;
z-index500;
}

#menutop ul{
list-stylenone;
margin0;
padding0;
floatleft;
width6em;
z-index500;
}

#menutop li{
positionrelative;
z-index500;
}

#menutop ul ul{
positionabsolute;
topauto;
displaynone;
z-index500;
}

#menutop ul ul ul{
top0;
left100%;
z-index500;
}

/* 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#menutop h2hover{
background#000 no-repeat -999px -9999px;
z-index500;
}

div#menutop lihover{
cursorpointer;
z-index500;
}

div#menutop lihover ul ul,
div#menutop li lihover ul ul,
div#menutop li li lihover ul ul,
div#menutop li li li lihover ul ul
{displaynone;}

div#menutop lihover ul,
div#menutop li lihover ul,
div#menutop li li lihover ul,
div#menutop li li li lihover ul
{displayblock;}

/* End of non-anchor hover selectors */

/* Styling for Expand */

#menutop a.x, #menutop a.xvisited{
font-weightbold;
color#000;
background#eee no-repeat 100% 100%;
z-index500;
}

#menutop a.xhover{
color#a00;
background#ddd;
z-index500;
}

#menutop a.xactive{
color#060;
background#ccc;
z-index500;
}

alink {color #CC0000;}
avisited {color #CC0000;}
ahover {color #333333;}
aactive {color #CC0000;}

#content {
width 670px;
background #fff;
margin-left130px;
align left;
font-family Arial, Helvetica, sans-serif;
font-size 13px;
z-index 100;
}