Link to home
Start Free TrialLog in
Avatar of matea
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
Avatar of TallerMike
TallerMike

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.

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>
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?
Avatar of matea

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

ASKER CERTIFIED SOLUTION
Avatar of drain
drain
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of matea

ASKER

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