matea
asked on
works with IE 5.0 not with 5.1
hi,
our web guy left us with a website that worked fine in IE 5.0. Having upgraded to IE 5.1 now the homepage is out of whack. also, it does not work in Netscape 6.0
www.mp.com
any ideas?
thanks
our web guy left us with a website that worked fine in IE 5.0. Having upgraded to IE 5.1 now the homepage is out of whack. also, it does not work in Netscape 6.0
www.mp.com
any ideas?
thanks
Try removing the "visibility : hide" line from anywhere in the CSS. This is probably some sort of NS4 compatibility stuff that is messing with NS6's fragile standard compliance.
change the init function so it sets ALL layers visibility through javascript.
change the init function so it sets ALL layers visibility through javascript.
What exactly is out of whack with IE 5.1?
I CAN understand why it does not work in Netscape 6. The Javascript in there is design for Netscape 4. Netscape 6 has much more in come with IE than Netscape 4, so the needs to be overhauled. as below:
Do not know if this is the fix for IE5.1, but it works in N 6 and 7 and N4
The code and styles could be simplified further as well
<html>
<head>
<title>welcome to montgomerypfeifer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
g_BROWSER_OK = true;
function getDiv( sId )
{
var oDiv = null
if (document.getElementById)
oDiv = document.getElementById(sI d)
else if (document.layers)
oDiv = document.layers[sId]
else if (document.all)
oDiv = document.all[sId]
else
g_BROWSER_OK = false;
return oDiv
}
function setVisibility( oDiv, sVisible)
{
if (g_BROWSER_OK)
{
if(document.getElementById || document.all)
oDiv.style.visibility = sVisible
else
oDiv.visibility = sVisible;
}
}
function init() {
bgnet = getDiv("bgnetDiv")
setVisibility (bgnet, "visible")
first = getDiv("firstnetDiv")
setVisibility (first, "visible")
doodles = getDiv("doodlesnetDiv")
guys= getDiv("guysnetDiv")
wall1 = getDiv("wall1netDiv")
wall2 = getDiv("wall2netDiv")
wall3 = getDiv("wall3netDiv")
wall4 = getDiv("wall4netDiv")
arrow = getDiv("arrownetDiv")
}
function sizeWin() {
if (document.layers) self.resizeTo(996,642)
else self.resizeTo(1024,776)
}
var enCounter = 0;
var highlightShow=1;
var arrowShow=1;
function firstencounter() {
setVisibility (wall1, "visible")
setVisibility (guys, "visible")
setVisibility (doodles, "visible")
enCounter = 1;
}
function firstreset() {
setVisibility (wall1, "hidden")
setVisibility (first, "hidden")
}
function mistywall(wallindex) {
if (enCounter == 1) {
if (highlightShow == 0) {
setVisibility (wallindex, "hidden")
highlightShow = 1;
return;
}
if (highlightShow == 1) {
setVisibility (wallindex, "visible")
highlightShow = 0;
}
}
}
function mistyarrow() {
if (arrowShow == 1) {
setVisibility (arrow, "visible")
arrowShow = 0;
}
}
</script>
<script language="JavaScript" src="http://www.mp.com/m_sub/window.js"></script>
<style><!--
DIV {
visibility:hidden;
position:absolute;
}
#firstdiv
{
left: 484px;
top: 396px ;
width: 148px;
height: 26px;
z-index:30;
}
#firstnetdiv
{
left: 484px;
top: 400px ;
width: 148px;
height: 26px;
z-index:31;
}
#doodlesdiv
{
left: 0px;
top: 104px ;
width: 996px;
height: 488px;
z-index:20;
}
#doodlesnetdiv
{
left: 0px;
top: 108px ;
width: 996px;
height: 488px;
z-index:21;
}
#bgdiv
{
left: 0px;
top: 104px ;
width: 996px;
height: 488px;
z-index:1;
}
#bgnetdiv
{
left: 0px;
top: 108px ;
width: 996px;
height: 488px;
z-index:2;
}
#guysdiv
{
left: 508px;
top: 269px ;
width: 108px;
height: 240px;
z-index:3;
}
#guysnetdiv
{
left: 508px;
top: 273px ;
width: 108px;
height: 240px;
z-index:4;
}
#wall1div
{
left: 0px;
top: 104px ;
width: 368px;
height: 393px;
z-index:7;
}
#wall1netdiv
{
left: 0px;
top: 108px ;
width: 368px;
height: 393px;
z-index:8;
}
#wall2div
{
left: 365px;
top: 208px ;
width: 368px;
height: 393px;
z-index:5;
}
#wall2netdiv
{
left: 365px;
top: 212px ;
width: 368px;
height: 393px;
z-index:6;
}
#wall3div
{
left: 630px;
top: 208px ;
width: 70px;
height: 170px;
z-index:9;
}
#wall3netdiv
{
left: 630px;
top: 212px ;
width: 70px;
height: 170px;
z-index:10;
}
#wall4div
{
left: 699px;
top: 208px ;
width: 296px;
height: 170px;
z-index:11;
}
#wall4netdiv
{
left: 699px;
top: 212px ;
width: 296px;
height: 170px;
z-index:12;
}
#arrowdiv
{
left: 793px;
top: 410px ;
width: 16px;
height: 16px;
z-index:40;
}
#arrownetdiv
{
left: 793px;
top: 414px ;
width: 16px;
height: 16px;
z-index:41;
}
-->
</style>
</head>
<body onLoad="init(); sizeWin();" bgcolor="#FFFFFF" text="#333333" link="0" vlink="0" alink="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" >
<table border="0" cellspacing="0" cellpadding="0" style="">
<tr align="left" valign="top">
<td width="656" height="29" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="656" height="29" border=0>
</td>
<td width="209" height="29" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="209" height="29" border=0>
</td>
<td width="131" height="29" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="131" height="29" border=0>
</td>
</tr>
<tr align="left" valign="top">
<td width="656" height="75" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="656" height="75" border=0>
</td>
<td width="209" height="75" align="left" valign="top"><img src="http://www.mp.com/m_images/mp_logo.gif" name="img0" width="209" height="75" border=0> </td>
<td width="131" height="75" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="131" height="75" border=0>
</td>
</tr>
<tr align="left" valign="top">
<td width="996" height="488" align="left" valign="top" colspan=3><img src="http://www.mp.com/m_images/spacer.gif" width=996 height=488 border=0 >
<br>
</td>
</tr>
</table>
<div ID=firstDiv>
<a href="#" onclick="firstencounter(); return false;" onMouseOut="firstreset();" ><img src="http://www.mp.com/m_images/spacer.gif" width=148 height=26 border=0></a>
</div>
<div ID=firstnetDiv>
<a href="#" onclick="firstencounter(); return false;" onMouseOut="firstreset();" ><img src="http://www.mp.com/m_images/spacer.gif" width=148 height=26 border=0></a>
</div>
<div ID=doodlesDiv>
<img src="http://www.mp.com/m_images/spacer.gif" width=996 height=488 border=0 usemap="#arena">
<map name="arena">
<area shape="poly" coords="0,21,365,74,365,30 2,0,358" href="#" onclick="popup2('m_sub/bac kground.ht m'); return false;" onMouseOver="mistywall(wal l1);" onMouseOut="mistywall(wall 1);">
<area shape="poly" coords="366,124,621,112,62 1,259,366, 256" href="#" onclick="popup2('m_sub/cli ents.htm') ; return false;" onMouseOver="mistywall(wal l2);" onMouseOut="mistywall(wall 2);">
<area shape="poly" coords="638,114,697,124,69 7,249,638, 259" href="#" onclick="popup2('m_sub/con tact.htm') ; return false;" onMouseOver="mistywall(wal l3);" onMouseOut="mistywall(wall 3);">
<area shape="poly" coords="701,124,995,112,99 5,248,701, 248" href="#" onclick="popup2('m_sub/new s.htm'); return false;" onMouseOver="mistywall(wal l4); mistyarrow();" onMouseOut="mistywall(wall 4);">
</map>
</div>
<div ID=doodlesnetDiv>
<img src="http://www.mp.com/m_images/spacer.gif" width=996 height=488 border=0 usemap="#arenanet">
<map name="arenanet">
<area shape="poly" coords="0,21,365,74,365,30 2,0,358" href="#" onclick="popup2('m_sub/bac kground.ht m'); mistywall(wall1); return false;" onMouseOver="mistywall(wal l1);" onMouseOut="mistywall(wall 1);">
<area shape="poly" coords="366,124,621,112,62 1,259,366, 256" href="#" onclick="popup2('m_sub/cli ents.htm') ; mistywall(wall2); return false;" onMouseOver="mistywall(wal l2);" onMouseOut="mistywall(wall 2);">
<area shape="poly" coords="638,114,697,124,69 7,249,638, 259" href="#" onclick="popup2('m_sub/con tact.htm') ; mistywall(wall3); return false;" onMouseOver="mistywall(wal l3);" onMouseOut="mistywall(wall 3);">
<area shape="poly" coords="701,124,995,112,99 5,248,701, 248" href="#" onclick="popup2('m_sub/new s.htm'); mistywall(wall4); return false;" onMouseOver="mistywall(wal l4); mistyarrow();" onMouseOut="mistywall(wall 4);">
</map>
</div>
<div ID=bgDiv>
<img src="http://www.mp.com/m_images/bg.jpg" lowsrc="http://www.mp.com/m_images/lowres.jpg" width=996 height=488 border=0>
</div>
<div ID=bgnetDiv>
<img src="http://www.mp.com/m_images/bg.jpg" lowsrc="http://www.mp.com/m_images/lowres.jpg" width=996 height=488 border=0>
</div>
<div ID=guysDiv>
<img src="http://www.mp.com/m_images/guys.gif" width="108" height="240" border="0" alt=""></div>
<div ID=guysnetDiv>
<img src="http://www.mp.com/m_images/guys.gif" width="108" height="240" border="0" alt=""></div>
<div ID=wall1Div>
<img src="http://www.mp.com/m_images/wall1.gif" width="368" height="393" border="0">
</div>
<div ID=wall1netDiv>
<img src="http://www.mp.com/m_images/wall1.gif" width="368" height="393" border="0" alt=""></div>
<div ID=wall2Div>
<img src="http://www.mp.com/m_images/wall2.gif" width="265" height="170" border="0">
</div>
<div ID=wall2netDiv>
<img src="http://www.mp.com/m_images/wall2.gif" width="265" height="170" border="0" alt=""></div>
<div ID=wall3Div>
<img src="http://www.mp.com/m_images/wall3.gif" width="70" height="170" border="0">
</div>
<div ID=wall3netDiv>
<img src="http://www.mp.com/m_images/wall3.gif" width="70" height="170" border="0" alt=""></div>
<div ID=wall4Div>
<img src="http://www.mp.com/m_images/wall4.gif" width="296" height="170" border="0">
</div>
<div ID=wall4netDiv>
<img src="http://www.mp.com/m_images/wall4.gif" width="296" height="170" border="0" alt=""></div>
<div ID=arrowDiv>
<nobr><a href=http://www.mp.com/mp.html><img src="http://www.mp.com/m_images/more.gif" width="48" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/spacer.gif" width="4" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/arrow.gif" width="16" height="16" border="0" align="top"></a></nobr><br ></div>
<div ID=arrownetDiv>
<nobr><a href=http://www.mp.com/mp.html><img src="http://www.mp.com/m_images/more.gif" width="48" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/spacer.gif" width="4" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/arrow.gif" width="16" height="16" border="0" alt="" align="top"></a></nobr><br ></div>
</body>
</html>
I CAN understand why it does not work in Netscape 6. The Javascript in there is design for Netscape 4. Netscape 6 has much more in come with IE than Netscape 4, so the needs to be overhauled. as below:
Do not know if this is the fix for IE5.1, but it works in N 6 and 7 and N4
The code and styles could be simplified further as well
<html>
<head>
<title>welcome to montgomerypfeifer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
g_BROWSER_OK = true;
function getDiv( sId )
{
var oDiv = null
if (document.getElementById)
oDiv = document.getElementById(sI
else if (document.layers)
oDiv = document.layers[sId]
else if (document.all)
oDiv = document.all[sId]
else
g_BROWSER_OK = false;
return oDiv
}
function setVisibility( oDiv, sVisible)
{
if (g_BROWSER_OK)
{
if(document.getElementById
oDiv.style.visibility = sVisible
else
oDiv.visibility = sVisible;
}
}
function init() {
bgnet = getDiv("bgnetDiv")
setVisibility (bgnet, "visible")
first = getDiv("firstnetDiv")
setVisibility (first, "visible")
doodles = getDiv("doodlesnetDiv")
guys= getDiv("guysnetDiv")
wall1 = getDiv("wall1netDiv")
wall2 = getDiv("wall2netDiv")
wall3 = getDiv("wall3netDiv")
wall4 = getDiv("wall4netDiv")
arrow = getDiv("arrownetDiv")
}
function sizeWin() {
if (document.layers) self.resizeTo(996,642)
else self.resizeTo(1024,776)
}
var enCounter = 0;
var highlightShow=1;
var arrowShow=1;
function firstencounter() {
setVisibility (wall1, "visible")
setVisibility (guys, "visible")
setVisibility (doodles, "visible")
enCounter = 1;
}
function firstreset() {
setVisibility (wall1, "hidden")
setVisibility (first, "hidden")
}
function mistywall(wallindex) {
if (enCounter == 1) {
if (highlightShow == 0) {
setVisibility (wallindex, "hidden")
highlightShow = 1;
return;
}
if (highlightShow == 1) {
setVisibility (wallindex, "visible")
highlightShow = 0;
}
}
}
function mistyarrow() {
if (arrowShow == 1) {
setVisibility (arrow, "visible")
arrowShow = 0;
}
}
</script>
<script language="JavaScript" src="http://www.mp.com/m_sub/window.js"></script>
<style><!--
DIV {
visibility:hidden;
position:absolute;
}
#firstdiv
{
left: 484px;
top: 396px ;
width: 148px;
height: 26px;
z-index:30;
}
#firstnetdiv
{
left: 484px;
top: 400px ;
width: 148px;
height: 26px;
z-index:31;
}
#doodlesdiv
{
left: 0px;
top: 104px ;
width: 996px;
height: 488px;
z-index:20;
}
#doodlesnetdiv
{
left: 0px;
top: 108px ;
width: 996px;
height: 488px;
z-index:21;
}
#bgdiv
{
left: 0px;
top: 104px ;
width: 996px;
height: 488px;
z-index:1;
}
#bgnetdiv
{
left: 0px;
top: 108px ;
width: 996px;
height: 488px;
z-index:2;
}
#guysdiv
{
left: 508px;
top: 269px ;
width: 108px;
height: 240px;
z-index:3;
}
#guysnetdiv
{
left: 508px;
top: 273px ;
width: 108px;
height: 240px;
z-index:4;
}
#wall1div
{
left: 0px;
top: 104px ;
width: 368px;
height: 393px;
z-index:7;
}
#wall1netdiv
{
left: 0px;
top: 108px ;
width: 368px;
height: 393px;
z-index:8;
}
#wall2div
{
left: 365px;
top: 208px ;
width: 368px;
height: 393px;
z-index:5;
}
#wall2netdiv
{
left: 365px;
top: 212px ;
width: 368px;
height: 393px;
z-index:6;
}
#wall3div
{
left: 630px;
top: 208px ;
width: 70px;
height: 170px;
z-index:9;
}
#wall3netdiv
{
left: 630px;
top: 212px ;
width: 70px;
height: 170px;
z-index:10;
}
#wall4div
{
left: 699px;
top: 208px ;
width: 296px;
height: 170px;
z-index:11;
}
#wall4netdiv
{
left: 699px;
top: 212px ;
width: 296px;
height: 170px;
z-index:12;
}
#arrowdiv
{
left: 793px;
top: 410px ;
width: 16px;
height: 16px;
z-index:40;
}
#arrownetdiv
{
left: 793px;
top: 414px ;
width: 16px;
height: 16px;
z-index:41;
}
-->
</style>
</head>
<body onLoad="init(); sizeWin();" bgcolor="#FFFFFF" text="#333333" link="0" vlink="0" alink="0" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" >
<table border="0" cellspacing="0" cellpadding="0" style="">
<tr align="left" valign="top">
<td width="656" height="29" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="656" height="29" border=0>
</td>
<td width="209" height="29" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="209" height="29" border=0>
</td>
<td width="131" height="29" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="131" height="29" border=0>
</td>
</tr>
<tr align="left" valign="top">
<td width="656" height="75" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="656" height="75" border=0>
</td>
<td width="209" height="75" align="left" valign="top"><img src="http://www.mp.com/m_images/mp_logo.gif" name="img0" width="209" height="75" border=0> </td>
<td width="131" height="75" align="left" valign="top"><img src="http://www.mp.com/m_images/spacer.gif" width="131" height="75" border=0>
</td>
</tr>
<tr align="left" valign="top">
<td width="996" height="488" align="left" valign="top" colspan=3><img src="http://www.mp.com/m_images/spacer.gif" width=996 height=488 border=0 >
<br>
</td>
</tr>
</table>
<div ID=firstDiv>
<a href="#" onclick="firstencounter();
</div>
<div ID=firstnetDiv>
<a href="#" onclick="firstencounter();
</div>
<div ID=doodlesDiv>
<img src="http://www.mp.com/m_images/spacer.gif" width=996 height=488 border=0 usemap="#arena">
<map name="arena">
<area shape="poly" coords="0,21,365,74,365,30
<area shape="poly" coords="366,124,621,112,62
<area shape="poly" coords="638,114,697,124,69
<area shape="poly" coords="701,124,995,112,99
</map>
</div>
<div ID=doodlesnetDiv>
<img src="http://www.mp.com/m_images/spacer.gif" width=996 height=488 border=0 usemap="#arenanet">
<map name="arenanet">
<area shape="poly" coords="0,21,365,74,365,30
<area shape="poly" coords="366,124,621,112,62
<area shape="poly" coords="638,114,697,124,69
<area shape="poly" coords="701,124,995,112,99
</map>
</div>
<div ID=bgDiv>
<img src="http://www.mp.com/m_images/bg.jpg" lowsrc="http://www.mp.com/m_images/lowres.jpg" width=996 height=488 border=0>
</div>
<div ID=bgnetDiv>
<img src="http://www.mp.com/m_images/bg.jpg" lowsrc="http://www.mp.com/m_images/lowres.jpg" width=996 height=488 border=0>
</div>
<div ID=guysDiv>
<img src="http://www.mp.com/m_images/guys.gif" width="108" height="240" border="0" alt=""></div>
<div ID=guysnetDiv>
<img src="http://www.mp.com/m_images/guys.gif" width="108" height="240" border="0" alt=""></div>
<div ID=wall1Div>
<img src="http://www.mp.com/m_images/wall1.gif" width="368" height="393" border="0">
</div>
<div ID=wall1netDiv>
<img src="http://www.mp.com/m_images/wall1.gif" width="368" height="393" border="0" alt=""></div>
<div ID=wall2Div>
<img src="http://www.mp.com/m_images/wall2.gif" width="265" height="170" border="0">
</div>
<div ID=wall2netDiv>
<img src="http://www.mp.com/m_images/wall2.gif" width="265" height="170" border="0" alt=""></div>
<div ID=wall3Div>
<img src="http://www.mp.com/m_images/wall3.gif" width="70" height="170" border="0">
</div>
<div ID=wall3netDiv>
<img src="http://www.mp.com/m_images/wall3.gif" width="70" height="170" border="0" alt=""></div>
<div ID=wall4Div>
<img src="http://www.mp.com/m_images/wall4.gif" width="296" height="170" border="0">
</div>
<div ID=wall4netDiv>
<img src="http://www.mp.com/m_images/wall4.gif" width="296" height="170" border="0" alt=""></div>
<div ID=arrowDiv>
<nobr><a href=http://www.mp.com/mp.html><img src="http://www.mp.com/m_images/more.gif" width="48" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/spacer.gif" width="4" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/arrow.gif" width="16" height="16" border="0" align="top"></a></nobr><br
<div ID=arrownetDiv>
<nobr><a href=http://www.mp.com/mp.html><img src="http://www.mp.com/m_images/more.gif" width="48" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/spacer.gif" width="4" height="16" border="0" align="top"><img src="http://www.mp.com/m_images/arrow.gif" width="16" height="16" border="0" alt="" align="top"></a></nobr><br
</body>
</html>
Works fine on IE6...but that doesn't help anyone now does it.. According to an article I read recently, flavors of Internet Explorer account for 96% of the browsers in use. I've given up trying to be "compliant" with the "standards" of anything but the de facto standard which is currently Internet Explorer. Unfortunate: yes. But..its reality.
my code also works for IE5.5, but don't have 5.0 or 5.1 to test it on though.
matea, have you had a chance to test anything out?
matea, have you had a chance to test anything out?
ASKER
thanks for all your help.
i should have paid closer attention to the browser/paltform jungle: this problem seems mac related only. IE5.1 and 5.2 (for either OS9 or OS10) and N6 show the (out of whack) symptoms: home page is not assembled, images are staggered and aligned to left side (sorry for the layman's lingo.)
so far none of your suggested remedies have worked. unfortunately, the target audience of our website are mostly mac fundamentalists - or else we would just ignore this nuisance...
i should have paid closer attention to the browser/paltform jungle: this problem seems mac related only. IE5.1 and 5.2 (for either OS9 or OS10) and N6 show the (out of whack) symptoms: home page is not assembled, images are staggered and aligned to left side (sorry for the layman's lingo.)
so far none of your suggested remedies have worked. unfortunately, the target audience of our website are mostly mac fundamentalists - or else we would just ignore this nuisance...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
the bug was in the lower case. thanks, drain. ribbit ribbit
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
to:
if (document.layers) {n=1;ie=0}
else {n=0;ie=1}
**************************
see how far that gets you first off... we'll debug from there.