Menu works in IE, not Firefox

[bufhal]

Hello;
I hope an experienced person can help me.
Our website at: [a href=\"http://www.attotech.com\" target=\"_blank\"]http://www.attotech.com[/a]
has a top menu that currently works in Internet Explorer but does not in Firefox. I tried HTML Tidy for my index page and looked ok in Firefox but not IE. I have reverted back to the IE index page.
I have three CSS files, one Javascript and the index page I can zip and send as I see nowhere to upload attachments. I am a bit new at this and really need someone to take a peek at the files and please tell me where the code needs to be modified so it will work in IE and Firefox.

The link to our site, attotech.com has the index page that is rendering correctly in IE but not Firefox.
I really appreciate any and all help..
I great thank you in advance.


Here is the JS:

function DropDownMenuX(id) {

/* Type of the menu: "horizontal" or "vertical" */
this.type = "horizontal";

/* Delay (in miliseconds >= 0): show-hide menu
* Hide must be > 0 */
this.delay = {
"show": 0,
"hide": 400
}
/* Change the default position of sub-menu by Y
pixels from top and X pixels from left
* Negative values are allowed */
this.position = {
"level1": { "top": 0, "left": 0},
"levelX": { "top": 0, "left": 0}
}

/* fix ie selectbox bug ? */
this.fixIeSelectBoxBug = true;

/* Z-index property for .section */
this.zIndex = {
"visible": 500,
"hidden": -1
};

// Browser detection
this.browser = {
"ie": Boolean(document.body.currentStyle),
"ie5": (navigator.appVersion.indexOf("MSIE
5.5") != -1 || navigator.appVersion.indexOf("MSIE
5.0") != -1),
"ie6": (navigator.appVersion.indexOf("MSIE
6.0") != -1)
};

if (!this.browser.ie) {
this.browser.ie5 = false;
this.browser.ie6 = false;
}

/* Initialize the menu */
this.init = function() {
if (!document.getElementById(this.id)) {
return alert("DropDownMenuX.init() failed. Element '"+
this.id +"' does not exist."); }
if (this.type != "horizontal" && this.type !=
"vertical") { return alert("DropDownMenuX.init()
failed. Unknown menu type: '"+this.type+"'"); }
if (this.browser.ie && this.browser.ie5) {
fixWrap(); }
if (this.browser.ie && this.browser.ie5) {
fixWrap3(); }
fixSections();

parse(document.getElementById(this.id).childNodes,
this.tree, this.id);
}

/* Search for .section elements and set width for
them */
function fixSections() {
var arr =
document.getElementById(self.id).getElementsByTagName("div");
var sections = new Array();
var widths = new Array();

for (var i = 0; i < arr.length; i++) {
if (arr[i].className == "section") {
sections.push(arr[i]);
}
}
for (var i = 0; i < sections.length; i++) {

widths.push(getMaxWidth(sections[i].childNodes));
}
for (var i = 0; i < sections.length; i++) {
sections[i].style.width = (widths[i]) +
"px";
}
if (self.browser.ie) {
for (var i = 0; i < sections.length; i++)
{
setMaxWidth(sections[i].childNodes,
widths[i]);
setMaxWidth3(sections[i].childNodes,
widths[i]);

}
}
}

function fixWrap() {
var elements =
document.getElementById(self.id).getElementsByTagName("a");
for (var i = 0; i < elements.length; i++) {
if (/item2/.test(elements[i].className)) {
elements[i].innerHTML = '<div
nowrap="nowrap">'+elements[i].innerHTML+'</div>';
}
}
}
function fixWrap3() {
var elements =
document.getElementById(self.id).getElementsByTagName("a");
for (var i = 0; i < elements.length; i++) {
if (/item3/.test(elements[i].className)) {
elements[i].innerHTML = '<div
nowrap="nowrap">'+elements[i].innerHTML+'</div>';
}
}
}

/* Search for an element with highest width among
given nodes, return that width */
function getMaxWidth(nodes) {
var maxWidth = 0;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType != 1 ||
/section/.test(nodes[i].className)) { continue; }
if (nodes[i].offsetWidth > maxWidth) {
maxWidth = nodes[i].offsetWidth; }
}
return maxWidth;
}

/* Set width for item2 elements */
function setMaxWidth(nodes, maxWidth) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 &&
/item2/.test(nodes[i].className) &&
nodes[i].currentStyle) {
if (self.browser.ie5) {
nodes[i].style.width = (maxWidth)
+ "px";
} else {
nodes[i].style.width = (maxWidth -
parseInt(nodes[i].currentStyle.paddingLeft) -
parseInt(nodes[i].currentStyle.paddingRight)) + "px";
}
}
}
}
/* Set width for item3 elements */
function setMaxWidth3(nodes, maxWidth) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 &&
/item3/.test(nodes[i].className) &&
nodes[i].currentStyle) {
if (self.browser.ie5) {
nodes[i].style.width = (maxWidth)
+ "px";
} else {
nodes[i].style.width = (maxWidth -
parseInt(nodes[i].currentStyle.paddingLeft) -
parseInt(nodes[i].currentStyle.paddingRight)) + "px";
}
}
}
}

/* Parse nodes, create events, position elements
*/
function parse(nodes, tree, id) {
for (var i = 0; i < nodes.length; i++) {
if (1 != nodes[i].nodeType) {
continue;
}
switch (true) {
// .item1
case
/\bitem1\b/.test(nodes[i].className):
nodes[i].id = id + "-" +
tree.length;
tree.push(new Array());
nodes[i].onmouseover = itemOver;
nodes[i].onmouseout = itemOut;
break;
// .item2
case
/\bitem2\b/.test(nodes[i].className):
nodes[i].id = id + "-" +
tree.length;
tree.push(new Array());
nodes[i].onmouseover = itemOver;
nodes[i].onmouseout = itemOut;
break;
// .item3
case
/\bitem3\b/.test(nodes[i].className):
nodes[i].id = id + "-" +
tree.length;
tree.push(new Array());
nodes[i].onmouseover = itemOver;
nodes[i].onmouseout = itemOut;
break;

// .section
case
/\bsection\b/.test(nodes[i].className):
// id, events
nodes[i].id = id + "-" +
(tree.length - 1) + "-section";
nodes[i].onmouseover =
sectionOver;
nodes[i].onmouseout = sectionOut;
// position
var box1 =
document.getElementById(id + "-" + (tree.length - 1));
var box2 =
document.getElementById(nodes[i].id);
var el = new Element(box1.id);
if (1 == el.level) {
if ("horizontal" == self.type)
{
box2.style.top =
box1.offsetTop + box1.offsetHeight +
self.position.level1.top + "px";
if (self.browser.ie5) {
box2.style.left =
self.position.level1.left + "px";
} else {
box2.style.left =
box1.offsetLeft + self.position.level1.left + "px";
}
} else if ("vertical" ==
self.type) {
box2.style.top =
box1.offsetTop + self.position.level1.top + "px";
if (self.browser.ie5) {
box2.style.left =
box1.offsetWidth + self.position.level1.left + "px";
} else {
box2.style.left =
box1.offsetLeft + box1.offsetWidth +
self.position.level1.left + "px";
}
}
} else {
box2.style.top =
box1.offsetTop + self.position.levelX.top + "px";
box2.style.left =
box1.offsetLeft + box1.offsetWidth +
self.position.levelX.left + "px";
}
// sections, sectionsShowCnt,
sectionsHideCnt
self.sections.push(nodes[i].id);
self.sectionsShowCnt.push(0);
self.sectionsHideCnt.push(0);
if (self.fixIeSelectBoxBug &&
self.browser.ie6) {
nodes[i].innerHTML =
nodes[i].innerHTML + '<iframe
id="'+nodes[i].id+'-iframe" src="javascript:false;"
scrolling="no" frameborder="0" style="position:
absolute; top: 0px; left: 0px; display: none;
filter:alpha(opacity=0);"></iframe>';
}
break;
}
if (nodes[i].childNodes) {
if
(/\bsection\b/.test(nodes[i].className)) {
parse(nodes[i].childNodes,
tree[tree.length - 1], id + "-" + (tree.length - 1));
} else {
parse(nodes[i].childNodes, tree,
id);
}
}
}
}

/* event, item:onmouseover */
function itemOver() {
//debug("itemOver("+this.id+") , visible = " +
self.visible);
self.itemShowCnt++;
var id_section = this.id + "-section";
if (self.visible.length) {
var el = new
Element(self.visible.getLast());
el =
document.getElementById(el.getParent().id);
if (/item\d-active/.test(el.className)) {
el.className =
el.className.replace(/(item\d)-active/, "$1");
}
}
if (self.sections.contains(id_section)) {
clearTimers();

self.sectionsHideCnt[self.sections.indexOf(id_section)]++;
var cnt =
self.sectionsShowCnt[self.sections.indexOf(id_section)];
var timerId = setTimeout(function(a, b) {
return function() { self.showSection(a, b); } }
(id_section, cnt), self.delay.show);
self.timers.push(timerId);
} else {
if (self.visible.length) {
clearTimers();
var timerId = setTimeout(function(a,
b) { return function() { self.showItem(a, b); } }
(this.id, self.itemShowCnt), self.delay.show);
self.timers.push(timerId);
}
}
}

/* event, item:onmouseout */
function itemOut() {
//debug("itemOut("+this.id+") , visible = " +
self.visible);
self.itemShowCnt++;
var id_section = this.id + "-section";
if (self.sections.contains(id_section)) {

self.sectionsShowCnt[self.sections.indexOf(id_section)]++;
if (self.visible.contains(id_section)) {
var cnt =
self.sectionsHideCnt[self.sections.indexOf(id_section)];
var timerId = setTimeout(function(a,
b) { return function() { self.hideSection(a, b); }
}(id_section, cnt), self.delay.hide);
self.timers.push(timerId);
}
}
}

/* event, section:onmouseover */
function sectionOver() {
//debug("sectionOver("+this.id+") , visible =
" + self.visible);

self.sectionsHideCnt[self.sections.indexOf(this.id)]++;
var el = new Element(this.id);
var parent =
document.getElementById(el.getParent().id);
if (!/item\d-active/.test(parent.className)) {
parent.className =
parent.className.replace(/(item\d)/, "$1-active");
}
}

/* event, section:onmouseout */
function sectionOut() {
//debug("sectionOut("+this.id+") , visible = "
+ self.visible);

self.sectionsShowCnt[self.sections.indexOf(this.id)]++;
var cnt =
self.sectionsHideCnt[self.sections.indexOf(this.id)];
var timerId = setTimeout(function(a, b) {
return function() { self.hideSection(a, b); }
}(this.id, cnt), self.delay.hide);
self.timers.push(timerId);
}

/* Show section (1 argument passed)
* Try to show section (2 arguments passed) -
check cnt with sectionShowCnt */
this.showSection = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt !=
this.sectionsShowCnt[this.sections.indexOf(id)]) {
return; }
}
//debug("showSection("+id+", "+cnt+") ,
visible = " + this.visible);

this.sectionsShowCnt[this.sections.indexOf(id)]++;
if (this.visible.length) {
if (id == this.visible.getLast()) {
return; }
var el = new Element(id);
var parents = el.getParentSections();
//debug("getParentSections("+el.id+") = "
+ parents);
for (var i = this.visible.length - 1; i >=
0; i--) {
if (parents.contains(this.visible[i]))
{
break;
} else {
this.hideSection(this.visible[i]);
}
}
}
var el = new Element(id);
var parent =
document.getElementById(el.getParent().id);
if (!/item\d-active/.test(parent.className)) {
parent.className =
parent.className.replace(/(item\d)/, "$1-active");
}
if (document.all) {
document.getElementById(id).style.display = "block"; }
document.getElementById(id).style.visibility =
"visible";
document.getElementById(id).style.zIndex =
this.zIndex.visible;
if (this.fixIeSelectBoxBug &&
this.browser.ie6) {
var div = document.getElementById(id);
var iframe =
document.getElementById(id+"-iframe");
iframe.style.width = div.offsetWidth +
parseInt(div.currentStyle.borderLeftWidth) +
parseInt(div.currentStyle.borderRightWidth);
iframe.style.height = div.offsetHeight +
parseInt(div.currentStyle.borderTopWidth) +
parseInt(div.currentStyle.borderBottomWidth);
iframe.style.top =
-parseInt(div.currentStyle.borderTopWidth);
iframe.style.left =
-parseInt(div.currentStyle.borderLeftWidth);
iframe.style.zIndex = div.style.zIndex -
1;
iframe.style.display = "block";
}
this.visible.push(id);
}

/* Emulating an empty non-existent section, we
have to hide elements, works like showSection() */
this.showItem = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt != this.itemShowCnt) { return; }
}
this.itemShowCnt++;
if (this.visible.length) {
var el = new Element(id + "-section");
var parents = el.getParentSections();
//debug("showItem()
getParentSections("+el.id+") = " + parents);
for (var i = this.visible.length - 1; i >=
0; i--) {
if (parents.contains(this.visible[i]))
{
break;
} else {
this.hideSection(this.visible[i]);
}
}
}
}

/* Hide section (1 argument passed)
* Try to hide section (2 arguments passed) -
check cnt with sectionHideCnt */
this.hideSection = function(id, cnt) {
if (typeof cnt != "undefined") {
if (cnt !=
this.sectionsHideCnt[this.sections.indexOf(id)]) {
return; }
if (id == this.visible.getLast()) {
//debug("hideSectionAll("+id+",
"+cnt+") , visible = " + this.visible);
for (var i = this.visible.length - 1;
i >= 0; i--) {
this.hideSection(this.visible[i]);
}
return;
}
}
//debug("hideSection("+id+", "+cnt+") ,
visible = " + this.visible);
var el = new Element(id);
var parent =
document.getElementById(el.getParent().id);
if (/item\d-active/.test(parent.className)) {
parent.className =
parent.className.replace(/(item\d)-active/, "$1");
}
document.getElementById(id).style.zIndex =
this.zIndex.hidden;
document.getElementById(id).style.visibility =
"hidden";
if (document.all) {
document.getElementById(id).style.display = "none"; }
if (this.fixIeSelectBoxBug &&
this.browser.ie6) {
var iframe =
document.getElementById(id+"-iframe");
iframe.style.display = "none";
}
if (this.visible.contains(id)) {
if (id == this.visible.getLast()) {
this.visible.pop();
} else {
//throw
"DropDownMenuX.hideSection('"+id+"', "+cnt+") failed,
trying to hide a section that is not the deepest
visible section";
return;
}
} else {
//throw
"DropDownMenuX.hideSection('"+id+"', "+cnt+") failed,
cannot hide element that is not visible";
return;
}

this.sectionsHideCnt[this.sections.indexOf(id)]++;
}

/* Element (.section, .item2 etc) */
function Element(id) {

this.menu = self;
this.id = id;

/* Get Level of given id
* Examples: menu-1 (1 level), menu-1-4 (2
level) */
this.getLevel = function() {
var s =
this.id.substr(this.menu.id.length);
return s.substrCount("-");
}

/* Get parent Element */
this.getParent = function() {
var s =
this.id.substr(this.menu.id.length);
var a = s.split("-");
a.pop();
return new Element(this.menu.id +
a.join("-"));
}

/* Check whether an element has a parent
element */
this.hasParent = function() {
var s =
this.id.substr(this.menu.id.length);
var a = s.split("-");
return a.length > 2;
}

/* Check whether an element has a sub-section
*/
this.hasChilds = function() {
return
Boolean(document.getElementById(this.id +
"-section"));
}

/* Get parent section elements for current
section */
this.getParentSections = function() {
var s =
this.id.substr(this.menu.id.length);
s = s.substr(0, s.length -
"-section".length);
var a = s.split("-");
a.shift();
a.pop();
var s = this.menu.id;
var parents = [];
for (var i = 0; i < a.length; i++) {
s += ("-" + a[i]);
parents.push(s + "-section");
}
return parents;
}

this.level = this.getLevel();
}

/* Clear all timers set with setTimeout() */
function clearTimers() {
for (var i = self.timers.length - 1; i >= 0;
i--) {
clearTimeout(self.timers[i]);
self.timers.pop();
}
}

var self = this;
this.id = id; /* menu id */
this.tree = []; /* tree structure of menu */
this.sections = []; /* all sections, required for
timeout */
this.sectionsShowCnt = [];
this.sectionsHideCnt = [];
this.itemShowCnt = 0;
this.timers = []; // timeout ids
this.visible = []; /* visible section, ex.
Array("menu-0-section", ..) , succession is important:
top to bottom */
}

/* Finds the index of the first occurence of item in
the array, or -1 if not found */
if (typeof Array.prototype.indexOf == "undefined") {
Array.prototype.indexOf = function(item) {
for (var i = 0; i < this.length; i++) {
if (this[i] === item) {
return i;
}
}
return -1;
}
}

/* Check whether array contains given string */
if (typeof Array.prototype.contains == "undefined") {
Array.prototype.contains = function(s) {
for (var i = 0; i < this.length; i++) {
if (this[i] === s) {
return true;
}
}
return false;
}
}

/* Counts the number of substring occurrences */
if (typeof String.prototype.substrCount ==
"undefined") {
String.prototype.substrCount = function(s) {
return this.split(s).length - 1;
}
}

/* Get the last element from the array */
if (typeof Array.prototype.getLast == "undefined") {
Array.prototype.getLast = function() {
return this[this.length-1];
}
}

[fusionpixel]

Bud, that is a heck lots of code! :) so 2 things here

1. it works fine for me in IE and FF no problems the menu works fine, so yay!
2. usually if you ask for help its better if you narrow down to the main problem rather than having people go through the whole thing and do it for you. specially if you say:

[!--quoteo--][div class=\'quotetop\']QUOTE[/div][div class=\'quotemain\'][!--quotec--]I am a bit new at this and really need someone to take a peek at the files and please tell me where the code needs to be modified so it will work in IE and Firefox. [/quote]

It makes people feel like you are demanding rather than asking for help and discourage people from trying, specially if you understand that a lot of people have jobs (like me aheam) and we take time of our busy lives to try to help.

Good luck! :)

[dbrimlow]

You are using an "xhtml" doctype, yet your tag level coding is an amazingly frightening jumble of improper xhtml and html 4.0. On a quick check, there are 198 tags that need to be fixed to work as an xhtml. And THAT is only tags. You are also missing a content type meta charset (<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />

In other words ... it is not valid xhtml. It is ignoring almost every rule of xhtml. There should be no capital tag level code. All tags should close ("<BR>" is as wrong as you can get in xhtml. It should be "<br />". And that is only the tip of the iceberg.

This following NOT valid xhtml OR html 4.0!:
<IMG SRC="/images/home/faststreambanner3.gif" alt="" width="564" height="176" border=0 valign=top>

(IMG SRC should be img src, and alt="" should never be empty or missing! all measurements must be something "564" is nothing ... "564px" is something. border=0 is REALLY nothing (even in html 4.0) ... border="0px" is something in html 4.0, there is no such thing as valign=top and "height" should never, NEVER be anywhere in your body tag whatsoever ... it is exclusively a css style.

This is how it would work in xhtml - it should all be in the css under a class div like

.faststreambanner img {
width: 564px;
height: 176px;
border:0px:
padding:0px;
margin:0px;
}


This is even worse:

<div style="border: 2px; #FFFFFF" class="section">
<a class="item2" href="/expressstripe.html">ExpressStripe</a>
<a class="item2" href="/expraid.html">ExpressRaid</a>
<a class="item2" href="/xtend.html">XtendSAN</a>
</div>

What is... style="border: 2px; #FFFFFF" class="section"?
Is it a div style? if so, what is "section"?
"section" should be a style that has "style" attributes INCLUDING "border" style info (border: 2px solid #fff;)


This is just plain sloppy - where are the semi-colins? what is a "10"?:

<style type="text/css">


<!--
.style1 {font-size: 12px}
.style3 {font-size: 10px}
.style4 {font-size: 10}
.style5 {color: #FF0000}
.style6 {font-weight: bold}
-->
</style>

The code is so bad that even the w3c html validator blew up!

[a href=\"http://validator.w3.org/check?verbose=1&uri=http%3A//www.attotech.com/index.html\" target=\"_blank\"]http://validator.w3.org/check?verbose=1&ur....com/index.html[/a]

Your css is scary! Absolutely NO browser other than IE can understand this.

IE will take any "junk" code and display it as valid. But ANY Standards compliant browser will smack you in the back of the head for using code like this.

Your whole site needs to be fixed to comply with either html 4.0 or xhtml (whichever you finally settle on).

Your css needs to be completely revised ... I have no idea where this came from, but you have a few style sheets that seem to have the same tag level function (which means only the one that is last in your order will work (the "cascade" in css). Do you really know what each css item is for?

Tag selectors:
yours (note missing semi-colin)-
A {
TEXT-DECORATION: none
}
BODY {
FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #FFFFFF;}


correct:

body {
font-size: 12px; color: #000000; font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFFA;
}
a {
text-decoration: none;}
*****************************

But! Here is the "good news". If you change your doctype to html 4.0:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

You have under 30 validation error. that are easily fixed.

I applaud anyone who trys to get there code working outside of IE, and it's intentionally counter-web standards BS. It takes time to be "de-programmed" like anyone removed from an evil cult does ... but it is well worth it. Becaue you will suddenly notice better goodle placement for natural search results as well as at least a 20% increase in activity (those who would rather stick needles in their eyes than use IE).

The best tool to help fix your website is the w3c html validator at:

[a href=\"http://validator.w3.org/\" target=\"_blank\"]http://validator.w3.org/[/a]

Once the html is valid, go and validate your css at [a href=\"http://jigsaw.w3.org/css-validator/\" target=\"_blank\"]http://jigsaw.w3.org/css-validator/[/a]

Good luck!

Dave