Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Code Working differently in IE than in Netscape or Firefox

christian9997@hotmail.com
Guest
  
Posts: n/a
#1: Jul 23 '05
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>

christian9997@hotmail.com
Guest
  
Posts: n/a
#2: Jul 23 '05

re: Code Working differently in IE than in Netscape or Firefox

> I would be very helpful

I would be very thankful
McKirahan
Guest
  
Posts: n/a
#3: Jul 23 '05

re: Code Working differently in IE than in Netscape or Firefox

<christian9997@hotmail.com> wrote in message
news:1112608008.807478.72670@o13g2000cwo.googlegro ups.com...[color=blue]
> 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:[/color]

[snip]
[color=blue]
> <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>[/color]

[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!
christian9997@hotmail.com
Guest
  
Posts: n/a
#4: Jul 23 '05

re: Code Working differently in IE than in Netscape or Firefox

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>
christian9997@hotmail.com
Guest
  
Posts: n/a
#5: Jul 23 '05

re: Code Working differently in IE than in Netscape or Firefox

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.
Fred Oz
Guest
  
Posts: n/a
#6: Jul 23 '05

re: Code Working differently in IE than in Netscape or Firefox

christian9997@hotmail.com wrote:[color=blue]
> 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.[/color]

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.
[color=blue]
>
> Here are more details:
> http://www.w3schools.com/css/pr_class_display.asp[/color]

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?
[color=blue]
>
> 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.
>[/color]

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
Thomas 'PointedEars' Lahn
Guest
  
Posts: n/a
#7: Jul 23 '05

re: Code Working differently in IE than in Netscape or Firefox

christian9997@hotmail.com wrote:
[color=blue]
> Apparently in Internet Explorer you only need to use 2 values for
> "display":
> "none" = invisible
> "inline" = visible[/color]

Which is mostly wrong.
[color=blue]
> 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.[/color]

No.
[color=blue]
> Here are more details:
> http://www.w3schools.com/css/pr_class_display.asp[/color]

Yes, indeed.
[color=blue]
> 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.[/color]

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°, <c29hnn$43g$04$1@news.t-online.com>)
Closed Thread

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved