Absolute Positionierung mit Netscape 6.1

[Eastzone Alien]

Hi ho Leute,

die absolute Positionierung ist ja ein riesengroßes Prob - solange es keinen Standard gibt.

Also: bei Netscape 4.x ging es einigermaßen mit <layer></layer>-Tags, beim MSIE geht es wunderbar mit <div></div>-Tags - und beim Netscape 6.1? Dem scheint beide varianten nicht zu interessieren - er interpretiert das <div></div>-Tag...aber nicht die >>style<< angaben im <div></div>-Tag. Die <layer></layer>-Tags interpretiert dieser Browser überhaupt nicht!

Hat jemand einen Lösungsvorschlag...ich muss! objekte absolut prositionieren können!

EZA

[Mathias Simmack]

Hallo.

Was heißt Problem? Schon der Netscape4 konnte mit dem "div"-Tag umgehen. Die meisten haben nur Netscapes "layer" benutzt und damit nicht gerade den Standard gefördert. Den Beweis dafür kann ich gern antreten, denn ich habe in meiner Seite nicht "layer" und "divs" drin, und trotzdem funktioniert die Anzeige der Namen beispielsweise unter dem Netscape4/6, Mozilla (logo, weil ist ja die Basis für den 6er-NS) und dem IE4/5/6. Der einzige Browser, der mit dynamischen Inhalten nichts anfangen kann ist der Opera, aber der positioniert zumindest den "div" mit dem Standardtext dem Bild entsprechend. Schau´s dir an unter:
http://www.reihe5.de/TheMechanics.htm
. (JavaScript einschalten!)

Fazit: Für den neuen 6er-Netscape kannst/sollst/musst du das "div"-Tag nehmen. Du brauchst also nicht mehr x Tag-Varianten im HTML-Text, und die Seite funktioniert trotzdem in den meisten Browsern.

Nur ansprechen musst du´s im Mozilla/Netscape6 anders. Wenn du also einen "div" einbaust:
<PRE>&lt;div id="MeinDiv" style="position:absolute;"&gt;&lt;/div&gt;</PRE>
dann läuft´s im Mozilla/Netscape6 so im JavaScript:
<PRE>
document.getElementById("MeinDiv").style.left = 100;
document.getElementById("MeinDiv").innerHTML = "Neuer Inhalt!";
</PRE>
Letzteres ("innerHTML") haben sich die Mozilla-Entwickler vom IE abgeschaut. Ist allerdings nicht DOM-Standard.

Mathias

[Eastzone Alien]

Danke schonmal...hat mir schon weitergeholfen.

Wollte aber mal fragen, wieso die JavaScripts jedes Browsers sich irgendwie unterscheiden (ansprechen) - ich denke, wenn angegeben wird, dass JavaScript unterstützt wird, dann muss auch in den Browsern die JavaScript-Sprache mit gleichen Tags laufen und nicht überall anders:
z.B.:
>bei Mozilla/Netscape6 (nach deinen Angaben):<
document.getElementById("MeinDiv").style.left = 100;

>bei MSIE:<
document.MeinDiv.style.left = 100;
oder
document.all.MeinDiv.style.left = 100;

Oder bin ich falsch?

EZ

[Mathias Simmack]

Na ja, das ist dann eben diese Sache, dass die Browser-Hersteller ihr eigenes Süppchen kochen. Der IE besitzt ein paar wirklich schöne Grafikeffekte; aber die kennt eben leider kein anderer Browser.

Oder anders: Warum kennen Opera, Netscape und Mozilla den Standard "window.innerHeight" beispielsweise, aber der IE nicht? Der liefert dir keinen Wert zurück, bzw. einen undefinierten. Wenn du im IE wissen willst, wieviel Platz du im Browserfenster hast, brauchst du hier "document.body.clientHeight". Und damit kann wieder kein anderer Browser etwas anfangen. (

Um auf´s Thema zurückzukommen, ich würd´ das so machen:
<PRE>
//
// Browserversionen herausfinden
//
var Opera = (navigator.userAgent.indexOf("Opera") != -1);

//
// dann, versionsabhängig den JS-Code ausführen
//
if(ns6 && !Opera && !ie) {
document.getElementById("MeinDiv").style.left = 100;
document.getElementById("MeinDiv").innerHTML = "&lt;b&gt;Hallo NS6/Mozilla&lt;/b&gt;";
}
else if(ie && !Opera) {
MeinDiv.style.left = 100;
MeinDiv.innerHTML = "&lt;&gt;Hallo IE!&lt;/b&gt;"
}
else if(ns4 && !Opera) {
document.MeinDiv.left = 100;
document.MeinDiv.document.write("&lt;b&gt;Hallo NS4!&lt;/b&gt;");
document.MeinDiv.document.close();
}
</PRE>
Den Opera musst du so herausfinden, wie gezeigt, weil er sich ja auch als Navigator oder IE ausgeben kann. Das kann zu Problemen führen. Den IE habe ich in der ersten "if"-Bedingung ausgeklammert, weil er ja eigene Routinen kennt. Obwohl er auch das DOM unterstützt. Du kannst ja mal ausprobieren, was dir besser gefällt.

Gruß,
Mathias

[Eastzone Alien]

thx

EZ

[Eastzone Alien]

So ich hab's versucht...funct aber trotzdem nicht: der Netscape 6.1 mach t nur unfug. Ich poste hier mal den code...vieleicht sind hier ja doch fehler drin:
<br>
Die Pfade sind richtig!
<br>
//************** infos.js ***************<br>
function initInfos()<br>
{<br>
load(); //*** hier wird nur ein Picchange initialisiert<br>
if(navigator.appName=="Netscape")<br>
{<br>
document.getElementById("themen").style.left = 0;<br>
document.getElementById("themen").style.top = 0;<br>
document.getElementById("themen").style.width = 60;<br>
document.getElementById("themen").style.height = 15;<br>
document.getElementById("themen").style.visibility = hide;<br>
<br>
document.getElementById("themen_on").style.left = 0; <br>
document.getElementById("themen_on").style.top = 0; <br>
document.getElementById("themen_on").style.width = 60; <br>
document.getElementById("themen_on").style.height = 15; <br>
document.getElementById("themen_on").style.visibil ity = show; <br>
<br>
document.getElementById("home").style.left = 596; <br>
document.getElementById("home").style.top = 0; <br>
document.getElementById("home").style.width = 44; <br>
document.getElementById("home").style.height = 15; <br>
document.getElementById("home").style.visibility = show; <br>
<br>
document.getElementById("themenpanel_bg").style.le ft = 225; <br>
document.getElementById("themenpanel_bg").style.to p = 25; <br>
document.getElementById("themenpanel_bg").style.wi dth = 191; <br>
document.getElementById("themenpanel_bg").style.he ight = 91; <br>
document.getElementById("themenpanel_bg").style.vi sibility = show;<br>
<br>
document.getElementById("themenpanel_opt").style.l eft = 225; <br>
document.getElementById("themenpanel_opt").style.t op = 25; <br>
document.getElementById("themenpanel_opt").style.w idth = 191; <br>
document.getElementById("themenpanel_opt").style.h eight = 91; <br>
document.getElementById("themenpanel_opt").style.v isibility = show; <br>
<br>
document.getElementById("con_Infos").style.left = 20; <br>
document.getElementById("con_Infos").style.top = 20; <br>
document.getElementById("con_Infos").style.width = 600; <br>
document.getElementById("con_Infos").style.height = 400; <br>
document.getElementById("con_Infos").style.visibil ity = show; <br>
<br>
document.getElementById("con_CAfOS").style.left = 20; <br>
document.getElementById("con_CAfOS").style.top = 20; <br>
document.getElementById("con_CAfOS").style.width = 600; <br>
document.getElementById("con_CAfOS").style.height = 400; <br>
document.getElementById("con_CAfOS").style.visibil ity = hide; <br>
<br>
document.getElementById("con_membership").style.le ft = 20; <br>
document.getElementById("con_membership").style.to p = 20; <br>
document.getElementById("con_membership").style.wi dth = 600; <br>
document.getElementById("con_membership").style.he ight = 400; <br>
document.getElementById("con_membership").style.vi sibility = hide; <br>
}<br>
else<br>
{...

HAbt ihr noch ne idee?

[Eastzone Alien]

und nu die HTML-File:

//************* infos.html ***************
"<!doctype html public "-//w3c//dtd html 4.0 transitional//en">"
"<html>"
" <head>"
" <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">"
" <meta http-equiv="content-script-type" content="text/javascript">"
" <meta http-equiv="content-style-type" content="text/ccs">"
" <script language="JavaScript" src="../../js/infos.picchange.js" type="text/javascript">"
" </script>"
" <script language="JavaScript" src="../../js/infos.js" type="text/javascript">"
" </script>"
" </head>"
<body bgcolor="#000000" background="../../tex/frameset/bg.gif" onload="javascript:initInfos();">
<div id="themen" style="position:absolute;z-index:2;">
<img src="../../tex/infos/but_themen_off.gif" width="60" height="15" onmousemove="javascript:if (booPic1 == false) {booPic1 = true; picload(0,pic1b);}" onmouseout="javascript:if (booPic1 == true) {booPic1 = false; picload(0,pic1a);}">
</div>
<div id="themen_on" style="position:absolute;z-index:2;">
<img src="../../tex/infos/but_themen_on.gif" width="60" height="15">
</div>
<div id="home" style="position:absolute;z-index:2;">
<a href="../main.opt.html" target="main">
<img src="../../tex/common/but_home_off.gif" width="44" height="15" onmousemove="javascript:if (booPic2 == false) {booPic2 = true; picload(2,pic2b);}" onmouseout="javascript:if (booPic2 == true) {booPic2 = false; picload(2,pic2a);}" border="0">
</a>
</div>

<div id="themenpanel_bg" style="position:absolute;z-index:2;">
<img src="../../tex/infos/bg_opt.gif" width="191" height="91">
</div>
<div id="themenpanel_opt" style="position:absolute;z-index:2;">
//img-tag...
</div>

<div id="con_Infos" style="position:absolute;z-index:1;">
//font-tag mit text
</div>

<div id="con_CAfOS" style="position:absolute;z-index:1;">
<table border="0" cellspacing="0" cellpadding="0" width="600" height="400">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
//font-tag mit text
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

<div id="con_membership" style="position:absolute;z-index:1;">
//font-tag mit text
</div>

</body>
</html&gt

[Mathias Simmack]

Hi, probier´s mal mit "visible" anstelle von "show". In meinen Skripten funktioniert das tadellos:

<PRE>document.getElementById('themen').style.visib ility = "visible";
document.getElementById('themen').style.visibility = "hidden";</PRE>

Manchmal (keine Ahnung, wieso) funktionieren auch die doppelten Anführungszeichen nicht. Probier in dem Fall mal die einfachen - wie gezeigt.

Gruß,
Mathias

[Mathias Simmack]

Ach so, ein Nachtrag noch:
Die Syntax orientiert sich, wie du sehen kannst, ungefähr am IE. Der IE kann eigentlich auch DOM. Ich glaube ab Version 5. Theoretisch könntest du also den selben Code für den Mozilla/Netscape6 und den IE5.x benutzen.

Allerdings wäre trotzdem eine extra Abfrage für den IE4 nötig gewesen. Deswegen habe <u>ich</u> ja auch für den IE5 und höher die alten Routinen benutzt.

Mathias.

Wollt´ ich nur so einwerfen, falls einer sagt, das wäre zu umständlich

[Eastzone Alien]

Ja - ok...für den IE klapps mit den visible und hidden angaben...der Netscape 6.1 macht dat auch...das prob - nicht aus JavaScript raus...mit welchem Tag ich die Absolute positionierung hinbekomme habe ich rausbekommen - table style="..." ist in dieser Version der Tag ders macht...ich habs bloß noch nicht hinbekommen diese Styleangaben von JavaScript zu setzen - meine versuche: (die kleiner und größer zeichen lasse ich mal weg...sonst bekommt dieses Forum einen zuviel...dafür aber §G§ und §K§<br>
<br>
§K§table class="test" style="position: absolute;"§G§<br>
...<br>
§K§/table§G§<br>
<br>
document.classes.test.all.left = "40"; //so stehts in den Dev-Docs von Nets 6.1<br>
oder<br>
document.test.all.left = "40";<br>
oder<br>
document.all.test.style.left = "40"; //MSIE-Variante (dann aber nicht "CLASS" sondern "ID"<br>
oder<br>
document.ids.test.all.left = "40"; //Dev-Docs von Nets 6.1 (nicht mit "CLASS" sondern "ID"<br>
<br>
<br>
<b>Noch irgendwelche vorschläge???</b><br>
<br>
EZ

[Mathias Simmack]

Jetzt bin ich verwirrt.<br><br>
Wenn du ein Element neu ausrichten willst, was zum Geier macht dann das "all" da drin? Das ist doch unsinnig? Jedenfalls in meinen Augen.<br>Okay: bisher habe <u>ich</u> immer von einem DIV geredet, weil du in deinem ersten Posting was von LAYER erzählt hast. Und mein DIV hat meinetwegen die ID "HalloDuDa":

<PRE>&lt;div id="HalloDuDa" style="position:absolute;"&gt;&lt;/div&gt;</PRE>

Wenn ich das Ding jetzt verrücken will, dann nutze ich den schon mal geposteten Code. So mach´ ich´s doch auch unter dem Link, den ich oben gepostet habe. Guck doch mal in den Quellcode rein, ist doch nichts geheimes.

Wenn du sichergehen willst, dass sowohl alte und neue Browser mit dem Bezeichner was anfangen können, dann schreib´ sowohl <b>id="HalloDuDa"</b> als auch <b>name="HalloDuDa"</b>.

So, abschließend - inwieweit man eine Tabelle verrücken kann, weiß ich nicht. Wird sicher gehen. Irgendwie. Was ich aber weiß: wenn du aber die Tabelle <font color=#ff0000><b>in</b></font> einen DIV setzt, dann verrückst du den DIV, und es funktioniert wunderbar!

Mathias.

PS: Die Frage wäre noch, wie du die Browserversionen abfragst. Vielleicht liegt´s ja daran, dass der Netscape ein bisschen aus dem Tritt kommt. Wir hatten das Thema schon mal, und ich will auch keinen langweilen, aber <u>ich</u> favorisiere folgende Methoden:

<PRE>
var Opera = (navigator.userAgent.indexOf("Opera") != -1);
var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= "4" && !Opera); // schließt den IE5/6 mit ein
var ns4 = (navigator.appName == "Netscape" && navigator.appVersion.charAt(0) == "4" && !Opera);
var w3c = (document.documentElement && !ie4); // Mozilla/Netscape6 und teilweise sogar der Opera
</PRE&gt

[Eastzone Alien]

Ja das mit dem Div meinte ich genau so wie du das geschrieben hast...aber in der Dev-Doc von Nets 6.1 stand drin, dass <div> nicht mehr unterstützt wird und man <table> nehmen soll...zu meinem entsetzen hat das auch gefunct (gleiche style-angaben wie beim div-Tag)...OK ich werd ma bei dir kucken...und die Browserabfrage ist ähnlich wie deine...habe jetzt nur nicht die Version abgefragt...<br>
<br>
<b>Tschau. Thx.</b><br>
<br>
EZA<br&gt