By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,760 Members | 995 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,760 IT Pros & Developers. It's quick & easy.

Code Working differently in IE than in Netscape or Firefox

P: n/a
Hi

I would be very helpful if someone could help me with this code.
It works fine in IE but when I display it in Netscape or Firefox and I
move the mouse from one menu to the other the gap between the two menus
gets bigger. What is the cause of this? Thanks
CODE:

<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
CELLPADDING="0" STYLE="border-style: solid; border-color: DARKCOLOR;
border-width: 0px 2px 0px 2px;">
<TR>
<TD WIDTH="160" ALIGN="center" HEIGHT="26" ID="auto"
onMouseOver="showSubMenu(this,event);"
onClick="showSubMenu(this,event);" onMouseOut="subMenuExited(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
<TD ALIGN="center" VALIGN="middle"><H3 STYLE="font-family:
'Comic sans MS',Cursive,Verdana,Arial; color: red;">Menu1</H3></TD>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR STYLE='display: none;'>
<TD WIDTH="160" HEIGHT="22" ALIGN="center" ID="autoSubMenu"
BGCOLOR="black" onMouseOver="subMenuSelected(this);"
onMouseOut="subMenuExited(this);" onClick="subMenuClicked(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
<TD ALIGN="center" VALIGN="middle"><H5 STYLE="color:
yellow; font-family: 'Comic sans
MS',Cursive,Verdana,Arial;">SubMenu1</H5></TD>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
CELLPADDING="0" STYLE="border-style: solid; border-color: DARKCOLOR;
border-width: 0px 2px 0px 2px;">
<TR>
<TD>
<H1 STYLE="font-size: 2px;"><BR></H1>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
STYLE="border-style: solid; border-color: DARKCOLOR; border-width: 0px
2px 0px 2px;">
<TR>
<TD WIDTH="160" ALIGN="center" HEIGHT="26" ID="immo"
onMouseOver="showSubMenu(this,event);"
onClick="showSubMenu(this,event);" onMouseOut="subMenuExited(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
<TD ALIGN="center" VALIGN="middle"><H3 STYLE="font-family:
'Comic sans MS',Cursive,Verdana,Arial; color: red;">Menu2</H3></TD>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR STYLE='display: none;'>
<TD WIDTH="160" HEIGHT="22" ALIGN="center" ID="immo_rSubMenu"
BGCOLOR="black" onMouseOver="subMenuSelected(this);"
onMouseOut="subMenuExited(this);" onClick="subMenuClicked(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
<TD ALIGN="center" VALIGN="middle"><H5 STYLE="color:
yellow; font-family: 'Comic sans
MS',Cursive,Verdana,Arial;">SubMenu1</H5></TD>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR STYLE='display: none;'>
<TD WIDTH="160" HEIGHT="22" ALIGN="center" ID="immo_sSubMenu"
BGCOLOR="black" onMouseOver="subMenuSelected(this);"
onMouseOut="subMenuExited(this);" onClick="subMenuClicked(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
<TD ALIGN="center" VALIGN="middle"><H5 STYLE="color:
yellow; font-family: 'Comic sans
MS',Cursive,Verdana,Arial;">SubMenu2</H5></TD>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR STYLE='display: none;'>
<TD WIDTH="160" HEIGHT="22" ALIGN="center" ID="immo_hSubMenu"
BGCOLOR="black" onMouseOver="subMenuSelected(this);"
onMouseOut="subMenuExited(this);" onClick="subMenuClicked(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
<TD ALIGN="center" VALIGN="middle"><H5 STYLE="color:
yellow; font-family: 'Comic sans
MS',Cursive,Verdana,Arial;">SubMenu3</H5></TD>
<TD WIDTH="26" ALIGN="right">&nbsp;</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="text/javascript">

element = "";
menuPID = 0;
numberOfAds = new Object();

function showSubMenu(elmt,e) {
//var obj = document.getElementById('Widget6Space');
//for(var prop in obj){
//alert(prop +' '+obj[prop]);
//}
if (!e) var e = window.event;
elmt.style.cursor = "default";
elmt.style.backgroundColor = "0033FF";
element = elmt;
if(e.type == "mouseover")
menuPID = setTimeout('showSubMenuTest()',300);
else showSubMenu2();
}

function showSubMenuTest() {
showSubMenu2();
}

function showSubMenu2() {
var number = 0;
if(element.id == "auto") {
document.getElementById('autoSubMenu').parentNode. style.display =
'inline';
document.getElementById('immo_rSubMenu').parentNod e.style.display
= 'none';
document.getElementById('immo_sSubMenu').parentNod e.style.display
= 'none';
document.getElementById('immo_hSubMenu').parentNod e.style.display
= 'none';
document.getElementById('jobSubMenu').parentNode.s tyle.display =
'none';
}
else if(element.id == "immo") {
document.getElementById('immo_rSubMenu').parentNod e.style.display
= 'inline';
document.getElementById('immo_sSubMenu').parentNod e.style.display
= 'inline';
document.getElementById('immo_hSubMenu').parentNod e.style.display
= 'inline';
document.getElementById('autoSubMenu').parentNode. style.display =
'none';
document.getElementById('jobSubMenu').parentNode.s tyle.display =
'none';
}
else if(element.id == "job") {
document.getElementById('jobSubMenu').parentNode.s tyle.display =
'inline';
document.getElementById('autoSubMenu').parentNode. style.display =
'none';
document.getElementById('immo_rSubMenu').parentNod e.style.display
= 'none';
document.getElementById('immo_sSubMenu').parentNod e.style.display
= 'none';
document.getElementById('immo_hSubMenu').parentNod e.style.display
= 'none';
}
document.getElementById('Widget8').style.height = maxHeight - 112
- 52 - document.getElementById('Widget6').scrollHeight;
}

function changeBackground(subElement) {
subElement.style.backgroundColor = "0033FF";
}

function subMenuSelected(subElement) {
subElement.style.cursor = "pointer";
changeBackground(subElement);
}

function subMenuExited(subElement) {
subElement.style.backgroundColor = "000000";
if(menuPID) clearTimeout(menuPID);
}

function subMenuClicked(subElement) {
changeSubElementToRed(subElement);
var url = "page.php?lang=&amp;region=&amp;action=&amp;open=" ;
url = url.replace(/&amp;/g,'&');
var action = "";
if(subElement.id == "autoSubMenu") action="AUTO";
else if(subElement.id == "immo_rSubMenu") action="IMMO_R";
else if(subElement.id == "immo_sSubMenu") action="IMMO_S";
else if(subElement.id == "immo_hSubMenu") action="IMMO_H";
else if(subElement.id == "jobSubMenu") action="JOB";

if(url.match(/action=.*?&/)) {
url = url.replace(/action=.*?&/,'action='+action+'&');
if(!url.match(/form=/)) url += '&form=normal';
else if(url.match(/form=big/)) url =
url.replace(/form=big/,'form=normal');
}
else {
url = url.replace(/action=.*$/,'action='+action);
if(!url.match(/form=/)) url += '&form=normal';
else if(url.match(/form=big/)) url =
url.replace(/form=big/,'form=normal');
}
if(url.match(/id=.*?&/)) url = url.replace(/id=.*?&/,'');
else if(url.match(/id=.*$/)) url = url.replace(/id=.*$/,'');

if(url.match(/open=.*?&/)) url =
url.replace(/open=.*?&/,'open='+action.toLowerCase()+'&');
else if(url.match(/open=.*$/)) url =
url.replace(/open=.*$/,'open='+action.toLowerCase());
else url += '&open='+action.toLowerCase();
//url = url.replace(/&/g,'&amp;');

location.href = url;
}

function changeSubElementToRed(subElement) {

document.getElementById('autoSubMenu').childNodes[1].style.color =
"yellow";
document.getElementById('immo_rSubMenu').childNode s[1].style.color
= "yellow";
document.getElementById('immo_sSubMenu').childNode s[1].style.color
= "yellow";
document.getElementById('immo_hSubMenu').childNode s[1].style.color
= "yellow";
document.getElementById('jobSubMenu').childNodes[1].style.color =
"yellow";
subElement.childNodes[1].style.color = "red";
}

function initialiseMenu() {
var open = "";
if(open != "") {
if(open.indexOf("immo")>-1) element =
document.getElementById('immo');
else element = document.getElementById(open);
showSubMenu2();
changeSubElementToRed(document.getElementById(open +"SubMenu"));
}
}

</SCRIPT>
</BODY>
</HTML>

Jul 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
> I would be very helpful

I would be very thankful

Jul 23 '05 #2

P: n/a
<ch***********@hotmail.com> wrote in message
news:11*********************@o13g2000cwo.googlegro ups.com...
Hi

I would be very helpful if someone could help me with this code.
It works fine in IE but when I display it in Netscape or Firefox and I
move the mouse from one menu to the other the gap between the two menus
gets bigger. What is the cause of this? Thanks
CODE:
[snip]
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
CELLPADDING="0" STYLE="border-style: solid; border-color: DARKCOLOR;
border-width: 0px 2px 0px 2px;">
<TR>
<TD>
<H1 STYLE="font-size: 2px;"><BR></H1>
</TD>
</TR>
</TABLE>


[snip]

No solution but ...

The gap is not in the table (above) between the two menus.

The gap is appended to the bottom of both menu tables.

Change the colors of the three tables and you'll see this.

FYI, "height=" applies to <tr> not <td>.
Also, stripping down your code to the basics would let
others help without having to unwrap dozens of lines!
Jul 23 '05 #3

P: n/a
This is very annoying.

Here is a simpler version:

<HTML>
<HEAD>

</HEAD>
<BODY>
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
CELLPADDING="0" STYLE="border-style: solid; border-color: DARKCOLOR;
border-width: 0px 2px 0px 2px;">
<TR>
<TD WIDTH="160" ALIGN="center" HEIGHT="26" ID="auto"
onMouseOver="showSubMenu2(this);" onClick="showSubMenu2(this);"
onMouseOut="subMenuExited(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="center" VALIGN="middle"><H3 STYLE="font-family:
'Comic sans MS',Cursive,Verdana,Arial; color: red;">Menu1</H3></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR STYLE='display: none;'>
<TD WIDTH="160" HEIGHT="22" ALIGN="center" ID="autoSubMenu"
BGCOLOR="black" onMouseOut="subMenuExited(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="center" VALIGN="middle"><H5 STYLE="color:
yellow; font-family: 'Comic sans
MS',Cursive,Verdana,Arial;">SubMenu1</H5></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
CELLPADDING="0" STYLE="border-style: solid; border-color: DARKCOLOR;
border-width: 0px 2px 0px 2px;">
<TR>
<TD>
<H1 STYLE="font-size: 2px;"><BR></H1>
</TD>
</TR>
</TABLE>
<TABLE WIDTH="160" BGCOLOR="000000" BORDER="0" CELLSPACING="0"
STYLE="border-style: solid; border-color: DARKCOLOR; border-width: 0px
2px 0px 2px;">
<TR>
<TD WIDTH="160" ALIGN="center" HEIGHT="26" ID="immo"
onMouseOver="showSubMenu2(this);" onClick="showSubMenu2(this);"
onMouseOut="subMenuExited(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="center" VALIGN="middle"><H3 STYLE="font-family:
'Comic sans MS',Cursive,Verdana,Arial; color: red;">Menu2</H3></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR STYLE='display: none;'>
<TD WIDTH="160" HEIGHT="22" ALIGN="center" ID="immo_rSubMenu"
BGCOLOR="black" onMouseOut="subMenuExited(this);">
<TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD ALIGN="center" VALIGN="middle"><H5 STYLE="color:
yellow; font-family: 'Comic sans
MS',Cursive,Verdana,Arial;">SubMenu1</H5></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="text/javascript">

element = "";
menuPID = 0;

function showSubMenu2(element) {
element.style.cursor = "default";
element.style.backgroundColor = "0033FF";
var number = 0;
if(element.id == "auto") {
document.getElementById('autoSubMenu').parentNode. style.display =
'inline';
document.getElementById('immo_rSubMenu').parentNod e.style.display
= 'none';
}
else if(element.id == "immo") {
document.getElementById('immo_rSubMenu').parentNod e.style.display
= 'inline';
document.getElementById('autoSubMenu').parentNode. style.display =
'none';
}
}
function subMenuExited(subElement) {
subElement.style.backgroundColor = "000000";
if(menuPID) clearTimeout(menuPID);
}

</SCRIPT>
</BODY>
</HTML>

Jul 23 '05 #4

P: n/a
Ok I've found what the problem is:

Apparently in Internet Explorer you only need to use 2 values for
"display":
"none" = invisible
"inline" = visible

while in Netscape and Firefox
"none" = invisible

but then depending what item you want to display you need to use
specific keywords:
"table" = display table
"table-row" = display table row
etc...
I suspect "inline" adds some sort of line break hence my problem.

Here are more details:
http://www.w3schools.com/css/pr_class_display.asp

This is all very confusing, I wish the browser companies would agree
more on standards. My website works perfectly in IE and it's taking me
ages to make it look ok in Netscape and Firefox.

Jul 23 '05 #5

P: n/a
ch***********@hotmail.com wrote:
Ok I've found what the problem is:

Apparently in Internet Explorer you only need to use 2 values for
"display":
"none" = invisible
"inline" = visible

while in Netscape and Firefox
"none" = invisible

but then depending what item you want to display you need to use
specific keywords:
"table" = display table
"table-row" = display table row
etc...
I suspect "inline" adds some sort of line break hence my problem.
Your issue has nothing to do with JavaScript, try either:

comp.infosystems.www.authoring.stylesheets or
comp.infosystems.www.authoring.html

To fix your immediate issue and achieve better cross-browser support,
toggle between 'none' and '' unless some other display attribute is
specifically needed. IE only follows some of the W3C specification in
for style.display, Netscape and Mozilla more fully implement it.

Here are more details:
http://www.w3schools.com/css/pr_class_display.asp
Which points out the faulty implementation of IE 5, but I presume you
also wish to support more modern browsers than IE 5 and Netscape 4?

This is all very confusing, I wish the browser companies would agree
more on standards. My website works perfectly in IE and it's taking me
ages to make it look ok in Netscape and Firefox.


Do not blame other browsers for not implementing the same faulty
style object as IE. You also do not specify a doctype in your HTML
which may cause other issues with browsers behaving differently for
the same markup (even IE behaves differently given different doctypes
for the same HTML).

Before complaining about browsers, first validate your pages to
ensure your markup is correct. Then if you raise your issues at one
of the above forums you will likely get very specific and complete
answers to any problems you may have.
--
Fred
Jul 23 '05 #6

P: n/a
ch***********@hotmail.com wrote:
Apparently in Internet Explorer you only need to use 2 values for
"display":
"none" = invisible
"inline" = visible
Which is mostly wrong.
while in Netscape and Firefox
"none" = invisible

but then depending what item you want to display you need to use
specific keywords:
"table" = display table
"table-row" = display table row
etc...
I suspect "inline" adds some sort of line break hence my problem.
No.
Here are more details:
http://www.w3schools.com/css/pr_class_display.asp
Yes, indeed.
This is all very confusing, I wish the browser companies would agree
more on standards. My website works perfectly in IE and it's taking me
ages to make it look ok in Netscape and Firefox.


I wish you would accept that IE is as borken as your code and
what confuses you in Netscape and Firefox *is* Web standard:

<http://www.w3.org/TR/CSS2/visuren.html#propdef-display>
PointedEars
--
Neineinein, der wird - ganz gemäß dem Vorbild von "Clockwork Orange"
festgeschnallt und bekommt zig Mal den Film "Battlefield Earth" vorgeführt.
Dürfte in der Wirkung einer Seitenlappen-Lobotomie gleichkommen. (Johannes°
in dag°, <c2*************@news.t-online.com>)
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.