hiya
I am trying to have a dynamic menu (tree like navigation)
to work on NS6 (works already very well on NS4.xx and IE5+)
I am using layers, Javascript, CSS ....
for some reason NS6 just refuse to display anything else than a black page with a small velvet box.
here's the HTML :
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title></title>
<script language="JavaScript" src="_ScriptLibrary/dynlayer.js"></script>
<script language="JavaScript" src="_ScriptLibrary/dynlayer-glide.js"></script>
<script language="JavaScript" src="_ScriptLibrary/dynlayer-common.js"></script>
<script language="JavaScript" src="_ScriptLibrary/collapsemenu.js"></script>
<script language="JavaScript">
<!--
var Open = ""
var Closed = ""
function preload(){
Open = new Image(10,10)
Closed = new Image(10,10)
Open.src = "images/openfolder.gif"
Closed.src = "images/closefolder.gif"
init()}
function showhide(number,what){
if (collapse.blocks[number].open){
what.src=Open.src
}
else{
what.src=Closed.src
}
}
function init() {
collapse.activate()
// set the height of the document based on the height of the menu
if (is.ns) document.height = collapse.lyr.y + collapse.h
}
collapse = new CollapseMenu(0,0,1000,6)
collapse.openStyle = 'glide'
collapse.bgColor = '#F3F0FF'
collapse.speed = '16'
collapse.build()
writeCSS(
collapse.css
)
//-->
</script>
</head>
<body onLoad="preload()" leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0" bgcolor="rgb(243,240,255)">
<pre style="FONT-WEIGHT: bold; FONT-FAMILY: Arial; BACKGROUND-COLOR: rgb(243,240,255)">
<script language="JavaScript">
document.write(collapse.divStart)
</script>
<div id="CollapseMenu0Block0">
<div id="CollapseMenu0Block0Item"><a onClick="showhide(0,cross0)" href="javascript
:collapse.toggle(0)"><img id="cross0" alt src="images/openfolder.gif" border="0" WIDTH="10" HEIGHT="10"><font color="#000088"> SAW 08/11/2000 13:51</font></a> <br>Every screen of PS-Team should be mocked up as an HTML page. Vlad will then
</div>
<div id="CollapseMenu0Block0Content">
cut the HTML into pieces and store the pieces in the PS-Team database.
We decided yesterday...
The main screen per topic would contain
Ps-team logo, short topic name and long topic name on first line
Single toolbar (see below)
Table of gripes such that you can reorder columns by clicking on headers
The toolbar would contain...
Combobox of topics (just those you are involed in) + ALL
Combobox of filters (My topics (default) and All topics (greyed if ALL
chosen above)
New task icon
Search icon
Project icon
Settings button
The psteam logo would link to the topic overview page (all topics)
The search page will probably have two levels - quick search and advanced
search
The settings page will contain the details of acolytes, demigod, listeners,
etc.
This needs to be done so that a draft is ready at least a week before the end
of November to allow for agreement and tweaking by end November.
The
<br>
</div>
<div id="CollapseMenu0Block1">
<div id="CollapseMenu0Block1Item"><a href="javascript
:collapse.toggle(1)"><font color="#000088">ZHV 05/12/2000 15:24 </font><font color="#000000">(A sac:::
</font></a><br> Change of priority. I will need it soon (next week preferably).
</div>
<div id="CollapseMenu0Block1Content">
</div>
<div id="CollapseMenu0Block2">
<div id="CollapseMenu0Block2Item"><a href="javascript
:collapse.toggle(2)"><font color="#000088">BJS 05/12/2000 16:23</font><font color="#000000"> (A sac:1:11122000:
</font></a><br> who is doing this? <br>
</div>
<div id="CollapseMenu0Block2Content">
</div>
<div id="CollapseMenu0Block3">
<div id="CollapseMenu0Block3Item"><a onClick="showhide(3,cross1)" href="javascript
:collapse.toggle(3)"><img id="cross1" alt src="images/openfolder.gif" border="0" WIDTH="10" HEIGHT="10"><font color="#000088"> CLJ 05/12/2000 17:42</font><font color="#0000ff"> </font><font color="#000000">(A sac saw:1:11122000:
</font></a><br> It was Stef, but when I spoke to him last week he was very busy.
</div>
<div id="CollapseMenu0Block3Content">
We agreed that Alexis could help if Stef went thru some training/explanation
with him.
<br>
</div>
<div id="CollapseMenu0Block4">
<div id="CollapseMenu0Block4Item"><a href="javascript
:collapse.toggle(4)"><font color="#000088">SAW 07/12/2000 07:20</font><font color="#0000ff"> </font><font color="#000000">(A sac saw:1:11122000:
</font></a> <br>Assigning to Alexis <br>
</div>
<div id="CollapseMenu0Block4Content">
</div>
<div id="CollapseMenu0Block5">
<div id="CollapseMenu0Block5Item"><a href="javascript
:collapse.toggle(5)"><font color="#000088">SAW 07/12/2000 07:22</font><font color="#0000ff"> </font><font color="#000000">(A afm:1:11122000:
</font></a><br>Assigning to project 287 <br>
</div>
<div id="CollapseMenu0Block5Content">
</div>
<script language="JavaScript">
document.write(collapse.divEnd)
</script></div></div></div></div></div>
</pre>
</body>
</html>
the function that poses problem is writeCSS (a function to dynamically define the CSS for each menus you construct).
the css it creates is like this :
str "<STYLE TYPE="text/css">
#CollapseMenu0 {position:absolute; left:0px; top:0px; width:1000px; height:0px; clip:rect(0px 1000px 0px 0px);}
#CollapseMenu0Block0 {position:absolute; left:0px; top:0px; width:1000px;}
#CollapseMenu0Block0Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
#CollapseMenu0Block0Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
#CollapseMenu0Block1 {position:absolute; left:0px; top:0px; width:1000px;}
#CollapseMenu0Block1Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
#CollapseMenu0Block1Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
#CollapseMenu0Block2 {position:absolute; left:0px; top:0px; width:1000px;}
#CollapseMenu0Block2Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
#CollapseMenu0Block2Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
#CollapseMenu0Block3 {position:absolute; left:0px; top:0px; width:1000px;}
#CollapseMenu0Block3Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
#CollapseMenu0Block3Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
#CollapseMenu0Block4 {position:absolute; left:0px; top:0px; width:1000px;}
#CollapseMenu0Block4Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
#CollapseMenu0Block4Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
#CollapseMenu0Block5 {position:absolute; left:0px; top:0px; width:1000px;}
#CollapseMenu0Block5Item {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF;}
#CollapseMenu0Block5Content {position:absolute; left:0px; top:0px; width:1000px; background-color:#F3F0FF; margin-left:0}
#CollapseMenu0Block6 {position:absolute; left:0px; top:0px; width:1000px; height:0px; clip:rect(0px 1000px 0px 0px); background-color:#F3F0FF;}
</STYLE>" String
somehow, every browser is happy with this, but not NS6.
is the problem obvious to anyone ?
or can you give me links to comprehensive sites (I cannot insist too much on comprehensive .. :-) where some "good" cross browser coding practises are defined ?
thanks in advance
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
