crossbrowser probleem - Softwareontwikkeling

vrijdag 8 maart 2002 10:27

Acties:

Karnemelk FTW

Topicstarter

Ok ik heb mij eerste DHTML menuutje in elkaar geklust. Ik heb echter een probleem met mij absolute positionering. In Internet explorer werkt alles goed en staan alle tabelletjes netjes uitgelijnd ten opzichte van elkaar. In Netscape echter verlopen mijn menutjes steeds meer van elkaar naar mate ik verder naar beneden ga. Het lijkt er wel op dat Netscape per DIV een extra pixel toevoegd ofzo.
Ik kan helaas geen voorbeeld laten zien systeembeheer laat geen ftp naar buiten toe

.
wel de code

code:

<html>
<head>
<title>DHTML menu basics</title>
<script type="text/javascript">
browser=navigator.appName;
if(navigator.appName == "Netscape") 
{
browserID=2;
//window.alert(browserID);
}
else
{
browserID=1;
}
hideTimer=setTimeout('',0);
active="menu_99";
activelevel=1;
menuArray = new Array(4);
menuArray[1]="menu_99";
menuArray[2]="menu_99_99";
menuArray[3]="menu_99_99_99"; 
menuArray[4]="menu_99_99_99_99"; 

function closeMenu(divName)
{
if (browserID==1)
{  
    document.getElementById(divName).style.visibility="hidden";
}
else
{
    document.layers[divName].visibility="hide";
}
}

function openMenu(divName,menuLevel,x,y)
{
for(i=menuLevel; i<4; i++)
{
    closeMenu(menuArray[i]);
}

clearTimeout(hideTimer);

if (browserID==1)       //for InterNet Explorer
{
    document.getElementById(divName).style.left=x;
    document.getElementById(divName).style.top=y;
    document.getElementById(divName).style.visibility="visible";
}
else                //for Netscape
{
    document.layers[divName].pageX=x;
    document.layers[divName].pageY=y;   
    document.layers[divName].visibility="show";
}
menuArray[menuLevel]=divName;
//activelevel=menuLevel;
}

</script>
</head>
<body>
<div id="menu" style="position:absolute;">
<TABLE BORDER=1 BORDERCOLOR="#000000" CELLSPACING=0 WIDTH=100>
<TR HEIGHT=30px><TD BGCOLOR="#FFFFAA"><A HREF="javascript:openMenu('menu_1',1,40,5)"><FONT SIZE=4><B><I>VPN</I></B></FONT></A></TD></TR>
<TR HEIGHT=30px><TD BGCOLOR="#FFFFAA"><A HREF="javascript:openMenu('menu_2',1,40,35)"><FONT SIZE=4><B><I>Techniek</I></B></FONT></A></TD></TR>
<TR HEIGHT=30px><TD BGCOLOR="#FFFFAA"><A HREF="javascript:openMenu('menu_3',1,40,65)"><FONT SIZE=4><B><I>Handleidingen</I></B></FONT></A></TD></TR>
</TABLE>
</DIV>
<div id="menu_1" style="position:absolute; left:1px; top:1px; visibility:hidden">
<TABLE BORDER=1 BORDERCOLOR="#000000" CELLSPACING=0 WIDTH=100>
en nog veel meer divjes he
</BODY>
</html>

Overigens het draait ook in een frame dus als je hem gweoon bekijkt za; het er wel niet goed uitzen

vrijdag 8 maart 2002 10:28

Acties:

Grum

javascript/dhtml moet in WG niet in PW

vrijdag 8 maart 2002 10:42

Acties:

TrailBlazer

Karnemelk FTW

Topicstarter

voor de mod die hem moved sorry ik zat per ongeluk in het verkeerde forum solly

vrijdag 8 maart 2002 10:45

Acties:

chem

Reist de wereld rond

move P&W naar W&G

Klaar voor een nieuwe uitdaging.

vrijdag 8 maart 2002 11:04

Acties:

TrailBlazer

Karnemelk FTW

Topicstarter

Ik zit er over te denken om aan de hand van de indexwaarde van er een aamtal pixel van de absolute positionering af te halen volgens ij moet dit wel gaan werken alleen hoe haal ik d eidnex op.
document.layers[divName].index is het niet

vrijdag 8 maart 2002 11:55

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Op vrijdag 08 maart 2002 10:27 schreef TrailBlazer het volgende:
Het lijkt er wel op dat Netscape per DIV een extra pixel toevoegd ofzo.

[code]
if (browserID==1)//for InterNet Explorer
{
document.getElementById(divName).style.left=x;
document.getElementById(divName).style.top=y;
document.getElementById(divName).style.visibility="visible";
}
else//for Netscape
{
document.layers[divName].pageX=x;
document.layers[divName].pageY=y;
document.layers[divName].visibility="show";
}

[...]

<div id="menu" style="position:absolute;">

[...]

<div id="menu_1" style="position:absolute; left:1px; top:1px; visibility:hidden">

je zet in de style exact datgene wat je in ns6/moz ervaart, namelijk een left-positioning van 1px meer dan de vorige div

voor explorer definieer je de positioning (neem aan dat browserId==1 slaat op explorer, of document.all)

aan te raden valt om je positioning script apart te zetten en uit drie delen te laten bestaan: document.getElementById (Moz/ns6, msie5+, Opera), document.all (msie4+) en document.layers (ns4x)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 8 maart 2002 12:01

Acties:

Verwijderd

Op vrijdag 08 maart 2002 11:04 schreef TrailBlazer het volgende:
Ik zit er over te denken om aan de hand van de indexwaarde van er een aamtal pixel van de absolute positionering af te halen volgens ij moet dit wel gaan werken alleen hoe haal ik d eidnex op.
document.layers[divName].index is het niet

Pas op met dit soort dirty bugfixes. Voor je het weet is 50% van je code een fix van de fouten in de andere 50%.

Gebruik bijvoorbeeld
document.layers[layerNaam].moveTo(x,y);
om in NS4.x layers te positioneren. Dan komt ie precies waar je 'm wilt hebben. Bovendien is dit loeisnel.

vrijdag 8 maart 2002 13:18

Acties:

TrailBlazer

Karnemelk FTW

Topicstarter

Op vrijdag 08 maart 2002 11:55 schreef RM-rf het volgende:

[..]

je zet in de style exact datgene wat je in ns6/moz ervaart, namelijk een left-positioning van 1px meer dan de vorige div

voor explorer definieer je de positioning (neem aan dat browserId==1 slaat op explorer, of document.all)

aan te raden valt om je positioning script apart te zetten en uit drie delen te laten bestaan: document.getElementById (Moz/ns6, msie5+, Opera), document.all (msie4+) en document.layers (ns4x)

Nee die pixels definite doet er niet toe. Die moet ik opgeven omdat explorer geen positie object kan aanpassen. Ik kan de bron even zo snel niet vinden. Maar het staat ergens op de microsoft site. Ik weet ook al wat het probleem is denk ik.
Netscape heeft een andere interpretatie van cell hoogte in eene tabel dan IE

.

Ook dat is het niet

maar ik weet het wel ik wil in een Style de cell hoogte zetten alleen vindt Netscape dit geen goed idee dit is de code die ik gebruik

code:

<STYLE type="text/css">
TD.level0 {height: 60px; background-color:#FFFFAA}
TD.level1 {height: 25px; background-color:#FFAAFF}
TD.level2 {height: 20px; background-color:#AAFFFF}
TD.level3 {height: 20px; background-color:#AAAAFF}
TD.level4 {height: 25px; background-color:#FFAAAA}
</STYLE>

.
.
.
.
.
<TR><TD CLASS="level0"><A HREF="javascript:openMenu('menu_2',1,40,40)"><FONT SIZE=4><B><I>Techniek</I></B></FONT></A></TD></TR>

netscape negeert de height statement in de Style IE niet.
Weet iemand hier een oplossing voor