Menu Display Problem in IE6+

obolus · 12-27-2007, 02:10 AM

I've implemented the AnyLink menu that's on DynamicDrive, but have made some minor changes to fit the design. Everything looks solid in FF, Opera and Safari. However, the devil (IE) has a problem displaying the menu at the top.

When I hover over a menu button, a dropdown selection menu appears. It shows up in IE properly except for the fact that it's behind the content divs! I assumed I could fix this by adding some z-index values to the coding for the content and menu divs, but it did not help and I continue to have the display issue in IE.

I would appreciate any help/suggestions on this. I'm just at a dead-end with it up to this point.

See the site live: The Winter Series - News

CSS for the menu area. Excuse the sloppiness, I'll clean it up later:

Code:

#ja-mainnav { position: relative; background-image: url(xx/xx/xx.jpg); height: 184px; }
#ja-mainnav div {
	z-index: 3000;
	width: 110px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #003366;
	text-indent: 2px;
	text-align: left;
	padding: 4px;
	background-color: #C8D7D3;
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	visibility: hidden;
	display: table;
	 }
#ja-mainnav div a {
	border: 0px;
	display: block;
	text-decoration: none;
	color: #003366;
}
#ja-mainnav div a:hover {
	background-color: #003366;
	color: #ffffff;
	text-indent: 2px;
}

#anylinkmenu1 { position: absolute; left: 426px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu2 { position: absolute; left: 490px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu3 { position: absolute; left: 550px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu4 { position: absolute; left: 625px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu5 { position: absolute; left: 695px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }

#ja-mainnav a.anylinkmenu1 { position: absolute; left: 416px; top: 148px; width: 55px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu2 { position: absolute; left: 481px; top: 148px; width: 50px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu3 { position: absolute; left: 541px; top: 148px; width: 64px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu4 { position: absolute; left: 615px; top: 148px; width: 65px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu5 { position: absolute; left: 690px; top: 148px; width: 75px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }

sjaq · 12-27-2007, 02:18 PM

z-index only works when you define a position, so try this:

Code:

#ja-mainnav { position: relative; background-image: url(xx/xx/xx.jpg); height: 184px; }
#ja-mainnav div {
	position: relative;
	z-index: 3000;
	width: 110px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #003366;
	text-indent: 2px;
	text-align: left;
	padding: 4px;
	background-color: #C8D7D3;
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	visibility: hidden;
	display: table;
	 }
#ja-mainnav div a {
	border: 0px;
	display: block;
	text-decoration: none;
	color: #003366;
}
#ja-mainnav div a:hover {
	background-color: #003366;
	color: #ffffff;
	text-indent: 2px;
}

#anylinkmenu1 { position: absolute; left: 426px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu2 { position: absolute; left: 490px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu3 { position: absolute; left: 550px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu4 { position: absolute; left: 625px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu5 { position: absolute; left: 695px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }

#ja-mainnav a.anylinkmenu1 { position: absolute; left: 416px; top: 148px; width: 55px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu2 { position: absolute; left: 481px; top: 148px; width: 50px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu3 { position: absolute; left: 541px; top: 148px; width: 64px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu4 { position: absolute; left: 615px; top: 148px; width: 65px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu5 { position: absolute; left: 690px; top: 148px; width: 75px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }

(btw. your css is a mess!

)

obolus · 12-27-2007, 06:34 PM

Doh! I didn't even think about that.

Yea, sorry for the messy css. Thanks for the reply!

obolus · 12-27-2007, 07:07 PM

Hmm.. didn't fix the problem, but it has maybe put me in the right direction. =)

Jelmer · 12-27-2007, 07:52 PM

I don't know about the problem, but you can clean up your css a lot, for example you can replace this:

Code:

border-left: 1px solid #333333;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;

with this:

Code:

border: 1px solid #333333;

if you want different border sizes on each side:

Code:

border: 1px 2px 0 4px solid #ccc;

(clockwise from top, so border-top is 1px, border left is 4px)

You can also combine the fonts stuff in one line:
font: 1.1em arial, sans-serif;

And finally you can lose a lot of code for the menu items, first define the things that are the same in one piece of code like this:

Code:

#anylinkmenu1, #anylinkmenu2, #anylinkmenu3
{
insert same code..
}

#anylinkmenu1{insert specific code}

I guess it might not be that relevant now but it might just improve your css skills a bit..

I had a look in IE and I see what's wrong now, but besides being behind those div's, I can't click on the links in IE either so that's another potential issue.. Are you sure this is caused (and can therefore be fixed) with css? Is there any javascript involved?

obolus · 12-27-2007, 08:28 PM

Yea, there's some javascript in involved with the menu.

Code:

var menubgcolor='#000000'  //menu bgcolor
var disappeardelay=500  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="no" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all
var vismenus = new Array();
var dropmenuobj;
var delayhide;

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden){
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function dropdownmenu(obj, e, menucontents){
hidemenu();
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById(menucontents) : dropmenudiv

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden")
}

vismenus.push(dropmenuobj);

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
var len = vismenus.length;
for (i = 0; i < len; i++) {
dropmenuobj = vismenus.pop();
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

The variables at the top don't affect the menu since the css controls its style properties.

obolus · 01-05-2008, 03:53 AM

I give up on trying to fix this issue.

*sends hatemail to microsuck*

obolus · 01-09-2008, 06:03 AM

Sd@*&%*%#@@!!!!!!!!!!!!!

Dr John · 01-09-2008, 01:44 PM

Why don't you just replace it with the son of suckerfish menu? That works very well. Suckerfish sometimes need this line in the css to solve a similar problem to what you have had however. li:hover{visibility:visible}

Village Idiot · 01-09-2008, 04:03 PM

Quote:

Originally Posted by obolus

Sd@*&%*%#@@!!!!!!!!!!!!!

obolus · 01-09-2008, 06:23 PM

lol @ piechart

The reason I didn't want to switch menu setups is because the site (designed by me, coded by someone else) is hard-coded. Perhaps if I posted the code, it'd give you a better idea of what I mean by that. =)

Anyway, someone that helped with the site fixed the issue this morning. IE apparently has issues with Z-index settings.

obolus · 01-09-2008, 06:23 PM

btw thanks all =)

sketchMedia · 01-09-2008, 07:36 PM

hahaha that pie chart is pretty much bang on target.

nishant_sebastian · 02-29-2008, 02:54 PM

Hi Obolus,

I am also facing the similar problem for IE. that the menu is behind the content. Could you tell me what was the fix for this. Some thing with Z-Index?
Nishant

---------------------------------

Quote:

Originally Posted by obolus

lol @ piechart

The reason I didn't want to switch menu setups is because the site (designed by me, coded by someone else) is hard-coded. Perhaps if I posted the code, it'd give you a better idea of what I mean by that. =)

Anyway, someone that helped with the site fixed the issue this morning. IE apparently has issues with Z-index settings.

obolus · 03-01-2008, 07:57 PM

Here is the updated CSS, sebastian. It's still messy as hell. =(

There are changes in z-index values (just compare to my first post).

Code:

#ja-mainnav { position: relative; background-image: url(../images/s_header.jpg); height: 184px;z-index: 3000; }
#ja-mainnav div {
	z-index: 3000;
	width: 110px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #003366;
	text-indent: 2px;
	text-align: left;
	padding: 4px;
	background-color: #C8D7D3;
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	visibility: hidden;
	display: table;
	 }
#ja-mainnav div a {
	border: 0px;
	display: block;
	text-decoration: none;
	color: #003366;
}
#ja-mainnav div a:hover {
	background-color: #003366;
	color: #ffffff;
	text-indent: 2px;
}

#anylinkmenu1 { position: absolute; left: 426px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu2 { position: absolute; left: 490px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu3 { position: absolute; left: 550px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu4 { position: absolute; left: 625px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu5 { position: absolute; left: 695px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }

#ja-mainnav a.anylinkmenu1 { position: absolute; left: 416px; top: 148px; width: 55px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu2 { position: absolute; left: 481px; top: 148px; width: 50px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu3 { position: absolute; left: 541px; top: 148px; width: 64px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu4 { position: absolute; left: 615px; top: 148px; width: 65px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu5 { position: absolute; left: 690px; top: 148px; width: 75px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }