works with IE 5.0 not with 5.1

matea
matea used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try changing the following line in JavaScript from:

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.
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.

Commented:
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(sId)
      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,302,0,358" href="#" onclick="popup2('m_sub/background.htm'); return false;" onMouseOver="mistywall(wall1);" onMouseOut="mistywall(wall1);">
      <area shape="poly" coords="366,124,621,112,621,259,366,256" href="#" onclick="popup2('m_sub/clients.htm'); return false;" onMouseOver="mistywall(wall2);" onMouseOut="mistywall(wall2);">
      <area shape="poly" coords="638,114,697,124,697,249,638,259" href="#" onclick="popup2('m_sub/contact.htm'); return false;" onMouseOver="mistywall(wall3);" onMouseOut="mistywall(wall3);">
      <area shape="poly" coords="701,124,995,112,995,248,701,248" href="#" onclick="popup2('m_sub/news.htm'); return false;" onMouseOver="mistywall(wall4); mistyarrow();" onMouseOut="mistywall(wall4);">
      </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,302,0,358" href="#" onclick="popup2('m_sub/background.htm'); mistywall(wall1); return false;" onMouseOver="mistywall(wall1);" onMouseOut="mistywall(wall1);">
      <area shape="poly" coords="366,124,621,112,621,259,366,256" href="#" onclick="popup2('m_sub/clients.htm'); mistywall(wall2); return false;" onMouseOver="mistywall(wall2);" onMouseOut="mistywall(wall2);">
      <area shape="poly" coords="638,114,697,124,697,249,638,259" href="#" onclick="popup2('m_sub/contact.htm'); mistywall(wall3); return false;" onMouseOver="mistywall(wall3);" onMouseOut="mistywall(wall3);">
      <area shape="poly" coords="701,124,995,112,995,248,701,248" href="#" onclick="popup2('m_sub/news.htm'); mistywall(wall4); return false;" onMouseOver="mistywall(wall4); mistyarrow();" onMouseOut="mistywall(wall4);">
      </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>
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Commented:
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.

Commented:
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?

Author

Commented:
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...

Commented:
ok if you take the code I had above, and change all the
#stylenamediv
to
#stylenameDiv

all of them need to be changed...

it will work

for NN6 and IE5.1+ on the Mac, Ids are case sensitive apparently...

tested on OS10 IE 5.1 and NN6.2

don't you LOVE platform differences :-)

http://www.nonsensical.com/clients/mp/mp.html

to check it out...

Author

Commented:
the bug was in the lower case. thanks, drain. ribbit ribbit

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial