CSS dropdown issues between Firefox and IE7

joejodihurley · Aug 23, 2007

Trying to do a very simple dropdown menu using CSS...a horizontal menu
with vertical dropdowns. Works perfectly in Firefox, but not so in
IE7 (imagine my frustration). I have slimmed down the program to the
lowest form possible. Essentially, it will work in both browsers when
the list is NOT an entry in a table, but will NOT work in IE if it is
in a table format. Firefox obviously accepts both formats.

I am relatively new to javascript and CSS, so I apologize if this is
an easy fix. I have spent nearly 2 weeks playing with things, and a
solution is not coming to me. I believe it is not in the javascript,
but how the CSS properties talk with IE????

Here is the the entire file...removing the commented HTML code in the
body will make it work fine in both browsers, but due to the other
code not shown, I need it to be in a table format. Thank you all in
advance for your help.

<html>
<head>





<script language="javascript" type="text/javascript">
var t=false,current;

function SetupMenu() {
if (!document.getElementsByTagName) return;
items=document.getElementsByTagName("li");
for (i=0; i<items.length; i++) {
if (items.className != "menu") continue;
thelink=findChild(items,"A");
thelink.onmouseover=ShowMenu;
thelink.onmouseout=StartTimer;
if (ul=findChild(items,"UL")) {
ul.style.display="none";
for (j=0; j<ul.childNodes.length; j++) {
ul.childNodes[j].onmouseover=ResetTimer;
ul.childNodes[j].onmouseout=StartTimer;
}
}
}
}

function findChild(obj,tag) {
cn = obj.childNodes;
for (k=0; k<cn.length; k++) {
if (cn[k].nodeName==tag) return cn[k];
}
return false;
}

function ShowMenu(e) {
if (!e) var e = window.event;
thislink = (e.target) ? e.target: e.srcElement;
ResetTimer();
if (current) HideMenu(current);
thislink = thislink.parentNode;
current=thislink;
ul = findChild(thislink,"UL");
if (!ul) return;
ul.style.display="block";
}

function HideMenu(thelink) {
ul = findChild(thelink,"UL");
if (!ul) return;
ul.style.display="none";
}

function ResetTimer() {
if (t) window.clearTimeout(t);
}

function StartTimer() {
t = window.setTimeout("HideMenu(current)",200);
}

window.onload=SetupMenu;
</script>




<style type="text/css">

#menu {
position: absolute;
font-family: "GoudyOlSt BT", sans-serif;
font-size: 15;
}

#menu li {
float: left;
list-style-type: none;
width: 140px;
position: relative;
background-color: white;
border: none;
margin-left: 0px;
font-weight: bold;
}

#menu li a{
color: black;
text-decoration: none;
width: 100%;
display: block;
}

#menu li a:hover {
color: black;
}

#menu li ul {
background-color: white;
margin: 0px;
padding: 0px;
}

#menu li ul li {
padding: 0px;
margin: 0px;
float: none;
list-style-type: none;
width: 140px;
text-indent: 10px;
border: 1px solid black;
font-weight: none;
}

#menu li ul li a{
color: black;
text-decoration: none;
}

#menu li ul li a:hover{
background-color: black;
color: white;
}
</style>




</head>

<body bgcolor="9C9C9C">
<table> 
<tr> 
<td> 
<ul id="menu">
<li class="menu"><a href="#">Item1</a>
<ul>
<li><a href="#">SubItem1-1</a></li>
<li><a href="#">SubItem1-2</a></li>
<li><a href="#">SubItem1-3</a></li>
</ul>
</li>
<li class="menu"><a href="#">Item2</a>
<ul>
<li><a href="#">SubItem2-1</a></li>
<li><a href="#">SubItem2-2</a></li>
<li><a href="#">SubItem2-3</a></li>
<li><a href="#">SubItem2-4</a></li>
</ul>
</li>
<li class="menu"><a href="#">Item3</a>
<ul>
<li><a href="#">SubItem3-1</a></li>
<li><a href="#">SubItem3-2</a></li>
</ul>
</li>
<li class="menu"><a href="#">Item4</a>
<ul>
<li><a href="#">SubItem4-1</a></li>
<li><a href="#">SubItem4-2</a></li>
</ul>
</li>
</ul>
</td> 
</tr> 
</table> 
</body>
</html>

moscarillo · Aug 23, 2007

(e-mail address removed) said the following on 8/23/2007 1:00 AM:

The frustration is what comes when people make incorrect assumptions
about things.

I have slimmed down the program to the

Whether I place it in a table or not IE7 shows me the same menus. So
whatever you are doing is something other than the code you posted.

Why would you post in a JS group if you thought the problem was CSS?

The best thing to do is to post two URL's. One to a table page and one
without and explain what it is you are seeing that is "different".

Try using a doctype also.

<snip>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Ran this code in IE 7 and Firefox. The menu was vertical and worked on
IE with or without the table and presented the same way with or
without the table, ie vertically. As previous mentioned this isn't a
javascript issue.

joejodihurley · Aug 23, 2007

Ran this code in IE 7 and Firefox. The menu was vertical and worked on
IE with or without the table and presented the same way with or
without the table, ie vertically. As previous mentioned this isn't a
javascript issue.- Hide quoted text -

- Show quoted text -

That is my problem...the menu is vertical in IE and horizontal in
Firefox. I posted in javascript because I thought that it might be a
common problem with a common javascript fix...I do appreciate your
help, so if there is anything else you can help with, that is
great...otherwise, I will look elsewhere. Thanks...

Thomas 'PointedEars' Lahn · Aug 23, 2007

[Full quote]

That is my problem...

Only one of your problems.

[...] I will look elsewhere. [...]

Yes, please. You have wasted enough of your reader's precious time and
bandwidth already.

PointedEars

joejodihurley · Aug 23, 2007

(e-mail address removed) said the following on 8/23/2007 1:00 AM:

The frustration is what comes when people make incorrect assumptions
about things.

I have slimmed down the program to the

Whether I place it in a table or not IE7 shows me the same menus. So
whatever you are doing is something other than the code you posted.

Why would you post in a JS group if you thought the problem was CSS?

The best thing to do is to post two URL's. One to a table page and one
without and explain what it is you are seeing that is "different".

Try using a doctype also.

<snip>

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

Admittedly a bad post on my end. What is happening is that in
Firefox, it is a horizontal menu with vertical dropdowns and in IE, it
magically becomes a vertical menue with vertical dropdowns. I don't
know much about javascript, but I do know for a fact I was using the
same code in both browsers. Moreover, I wasn't sure if there was some
javascript to fix it or not, if it was a common issue, etc...thus my
reason for posting (only guessing it was CSS). I will try the doctype
suggestion and see what happens. Any additional help would be nice,
otherwise I will go elsewhere. Thanks...

joejodihurley · Aug 23, 2007

(e-mail address removed) said the following on 8/23/2007 9:23 AM:

Can you post sample pages that do that? In IE7 I get the same exact
menus as I get in Firefox2.0

Gotta start somewhere.

No doctype I tried made a difference but I didn't get a vertical menu in
IE7.

Ignore Thomas.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/- Hide quoted text -

- Show quoted text -

Thanks for your concern Randy (you sound genuinely concerned), but I
will figure it out on my own. It is guys like Thomas that ALWAYS
prohibit someone from learning something in these environments. Not
everyone knows everything like him...gosh, that must be nice. To his
point, I regret even posting anything. Maybe if Thomas ever gets sick
of his lonely, jaded life he can ask about how to get a date, have a
social life, or anything else reputable. Then, everyone can treat him
with as little respect as he treats others.

Dr J R Stockton · Aug 24, 2007

In comp.lang.javascript message <[email protected]
oglegroups.com>, Thu, 23 Aug 2007 08:20:00, (e-mail address removed)
posted:

Maybe if Thomas ever gets sick
of his lonely, jaded life he can ask about how to get a date,

That is unhelpful. He should not be encouraged to reproduce.

Dr J R Stockton · Aug 24, 2007

In comp.lang.javascript message <[email protected]
legroups.com>, Thu, 23 Aug 2007 06:23:24, (e-mail address removed)
posted:

...

Admittedly a bad post on my end. What is happening is that in
Firefox, it is a horizontal menu with vertical dropdowns and in IE, it
magically becomes a vertical menue with vertical dropdowns.

If you read the regularly-cited newsgroup FAQ, you should learn
something about not only javascript but also about how to use Usenet
newsgroups.

Your status as a Google groups user excuses only initial ignorance.

Dropdown menu in a fixed navbar	0	Apr 1, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Horizontal menu bar header	2	May 12, 2021
I need help fixing my website	2	Oct 15, 2023
Need help with code on website (noob)	2	Jul 18, 2022
Interfering CSS	1	Feb 9, 2024
Buttons lining up	1	Feb 6, 2022
Justify-content not working	1	Mar 29, 2021

CSS dropdown issues between Firefox and IE7

joejodihurley

moscarillo

joejodihurley

Thomas 'PointedEars' Lahn

joejodihurley

joejodihurley

Dr J R Stockton

Dr J R Stockton

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads