Netscape 6 problem when trying to make visible/hidden complex DIV objects
Hi everybody,
OK, I got it! My sample Web page WORKS on Netscape 6.
my saver) who provide me very useful NS6/DOM tutorials and articles
http://www.scottandrew.com ) , whatever the fact that I submit a Document
Object Model issue (related to NN6) on a Microsoft based newsgroup.
suggested me to isolate the problem by creating a simpler test Web page.
The problems were in the way that I have defined my css style sheet. I was
not enough rigorous and forgot the clip:rect(...) attribute for the complex
DIV objects named content11, content12, content13 and content21.
For instance, the first one defined (and didn't work on NN6) was the
following:
<style type="text/css">
<!--
.fonttitle {font-family:Arial, Helvetica, sans serif;
color:#993366;font-weight:bold;font-size:145%;}
.fontwaiting {font-family:Arial, Helvetica, sans serif;
color:#993366;font-weight:bold;font-size:110%;}
#canet3map { position: absolute; top: 60px; left: 20px; visibility:
visible; z-index:0; }
#toc10 { position: absolute; top: 10px; left: 20px; visibility:
visible; z-index:5; }
#toc11 { position: absolute; top: 30px; left: 50px; visibility:
visible; z-index:5; }
#toc12 { position: absolute; top: 50px; left: 50px; visibility:
visible; z-index:5; }
#toc13 { position: absolute; top: 70px; left: 50px; visibility:
visible; z-index:5; }
#toc20 { position: absolute; top: 90px; left: 20px; visibility:
visible; z-index:5; }
#toc21 { position: absolute; top: 110px; left: 50px; visibility:
hidden; z-index:5; }
#content11 { position: absolute; top: 40px; left: 20px; visibility:
visible; z-index:0; }
#content12 { position: absolute; top: 40px; left: 20px; visibility:
hidden; z-index:0; }
#content13 { position: absolute; top: 40px; left: 20px; visibility:
hidden; z-index:0; }
#content21 { position: absolute; top: 40px; left: 20px; visibility:
hidden; z-index:0; }
#content11title { position: absolute; top: 0px; left: 200px; width:500px;
height:40px; clip:rect("0,505,45,0"); visibility: inherit; border:solid;
z-index: inherit;}
#content12title { position: absolute; top: 0px; left: 200px; width:500px;
height:40px; clip:rect("0,505,45,0"); visibility: inherit; border:solid;
z-index: inherit;}
#content13title { position: absolute; top: 0px; left: 200px; width:500px;
height:40px; clip:rect("0,505,45,0"); visibility: inherit; border:solid;
z-index: inherit;}
#content21title { position: absolute; top: 0px; left: 200px; width:500px;
height:40px; clip:rect("0,505,45,0"); visibility: inherit; border:solid;
z-index: inherit;}
#content11waiting { position: absolute; top: 50px; left: 200px;
width:700px; height:50px; clip:rect("0,705,55,0"); visibility: inherit;
border:solid; z-index: inherit;}
#content13waiting { position: absolute; top: 50px; left: 200px;
width:700px; height:50px; clip:rect("0,705,55,0"); visibility: inherit;
border:solid; z-index: inherit;}
#content12waiting { position: absolute; top: 50px; left: 200px;
width:700px; height:50px; clip:rect("0,705,55,0"); visibility: inherit;
border:solid; z-index: inherit;}
#content21waiting { position: absolute; top: 50px; left: 200px;
width:700px; height:500px; clip:rect("0,705,505,0"); visibility: inherit;
border:solid; z-index: inherit;}
-->
</style>
The second one defined (and worked with NN6) was the following:
<style type="text/css">
<!--
.fonttitle {font-family:Arial, Helvetica, sans serif;
color:#993366;font-weight:bold;font-size:145%;}
.fontwaiting {font-family:Arial, Helvetica, sans serif;
color:#993366;font-weight:bold;font-size:110%;}
#canet3map { position:absolute; top: 60px; left: 20px;
visibility:visible; z-index:0;}
#toc10 { position:absolute; top: 10px; left: 20px;
visibility:visible; z-index:5;}
#toc11 { position:absolute; top: 30px; left: 50px;
visibility:visible; z-index:5;}
#toc12 { position:absolute; top: 50px; left: 50px;
visibility:visible; z-index:5;}
#toc13 { position:absolute; top: 70px; left: 50px;
visibility:visible; z-index:5;}
#toc20 { position:absolute; top: 90px; left: 20px;
visibility:visible; z-index:5;}
#toc21 { position:absolute; top:110px; left: 50px;
visibility:hidden; z-index:5;}
#content11 { position:absolute; top: 40px; left: 20px; width:940px;
height:575px; clip:rect(0px 945px 580px 0px); visibility:visible;
z-index:0; border:solid; }
#content12 { position:absolute; top: 40px; left: 20px; width:940px;
height:575px; clip:rect(0px 945px 580px 0px); visibility:hidden; z-index:0;
border:solid;}
#content13 { position:absolute; top: 40px; left: 20px; width:940px;
height:575px; clip:rect(0px 945px 580px 0px); visibility:hidden; z-index:0;
border:solid;}
#content21 { position:absolute; top: 40px; left: 20px; width:940px;
height:575px; clip:rect(0px 945px 580px 0px); visibility:hidden; z-index:0;
border:solid;}
#content11title {position:absolute; top: 0px; left:200px; width:500px;
height: 40px; clip:rect(0px 505px 45px 0px); visibility:inherit;
z-index:inherit; border:solid;}
#content12title {position:absolute; top: 0px; left:200px; width:500px;
height: 40px; clip:rect(0px 505px 45px 0px); visibility:inherit;
z-index:inherit; border:solid;}
#content13title {position:absolute; top: 0px; left:200px; width:500px;
height: 40px; clip:rect(0px 505px 45px 0px); visibility:inherit;
z-index:inherit; border:solid;}
#content21title {position:absolute; top: 0px; left:200px; width:500px;
height: 40px; clip:rect(0px 505px 45px 0px); visibility:inherit;
z-index:inherit; border:solid;}
#content11waiting{position:absolute;top:50px;left:200px;width:700px;height:
50px; clip:rect(0px 705px 55px 0px); visibility:inherit; z-index:inherit;
border:solid;}
#content13waiting{position:absolute; top:50px;
left:200px;width:700px;height: 50px;clip:rect(0px 705px 55px
0px);visibility:inherit; z-index:inherit; border:solid;}
#content12waiting{position:absolute; top:50px;
left:200px;width:700px;height: 50px;clip:rect(0px 705px 55px
0px);visibility:inherit; z-index:inherit; border:solid;}
#content21waiting{position:absolute; top
50px;left:200px;width:700px;height:500px;clip:rect(0px 705px 505px
0px);visibility:inherit;z-index:inherit; border:solid;}
-->
</style>
As you may noticed, when we are rigorous in the way that we defined object
in a css style sheet and add the clip:rect(...) attribute when required,
everything works well on any browsers and platforms.
Herv
Quote:
> Really it's not a javascript issue at all, it's Document Object Model
issue.
> People in this newsgroup should take a large interest in learning about
how
> NS6/Mozilla works, because the underlying theme of writing to the standard
> DOM is important to all of us if we want to write code that has a broad
> reach.
> It has historically been Netscape who tended to semantically lump
javascript
> and their document model together as a single item, confusing programmers
> into thinking javascript and Jscript are very different - they're not.
> They're both quite compatible implementations of the ECMAscript
> specification which happen to be closely tied to different document object
> models. With Netscape6, the distinction becomes more clear, as the
language
> and DOM are obviously separated and clearly stated as such. At this
point,
> it becomes even more like IE5, since the DOM implementations are quite
> similar.
> Take a look at www.webstandards.org and www.alistapart.com
> Herve - I found some interesting NS6/DOM tutorials and articles at
> www.scottandrew.com that might be of use to you. Really useful
> documentation is hard to find right now.
> - Brent -
> > Sorry, It is already done!
> > Herv
> > PS I know that is a microsoft based newsgroup but isn't
> > public.scripting.jscript newsgroup talking about javascript issues and
its
> > related challenge to solve them!
Quote:
> > > Don't mean to sound rude, but wouldn't it be more appropriate to ask
> this
> > in
> > > a Netscape group?
> > > > Hi everybody,
> > > > I'm a newbie with Netscape 6! I try to adapt my Web pages (that work
> > well
> > > on
> > > > NS4-IE4 and IE5+) to NS6 but I got big problems.
> > > > You can access to a sample on my page on the following URL:
> > > > http://ardnoc82.canet2.net/CAnet3map/test_visibility_hidden2.htm
> > > > As you can see, I have implement an expandable menu on the top-left
on
> > the
> > > > page in order to hide or make visible certain DIV objects on my
page.
> > > > The problem is probably due to the fact the complex nature of the
DIV
> > > > objects that I want to make visible or hide. For instance, it may
look
> > > like
> > > > this:
> > > > <div id="content11">
> > > > <div id="content11title">
> > > > <span CLASS="fonttitle">
> > > > CAnet 3 Traffic Map : Rates (mrtg)
> > > > </span>
> > > > </div>
> > > > <div id="content11waiting">
> > > > <span CLASS="fontwaiting">
> > > > <p>Please Wait while Remote Scripting
> > > > Methods<br>download the mrtg Data synchronously</p>
> > > > </span>
> > > > </div>
> > > > <div id="routervancor01mrtg">
> > > > <img SRC="images/router.gif" border="0" width="27"
> > > > height="16">
> > > > </div>
> > > > </div>
> > > > when I
...
read more »
