Ralf Behr: «DIV STYLE="position: ...Ergebnis NN4 vs. IE4

Hallo CSS-Profis!

Ich bastele schon geraume Zeit an Seiten mit ueberlappenden Elementen und möchte per "position" Text- und Grafikelemente genau ausrichten.
Klappt fuer IE4 auch alles wunderbar, nur im NN4 nicht.

Hier zwei Beispiele:

Beispiel 1:
<HEAD>

...das aus SELFHTML bekannte JavaScript fuer Bildwechsel...

</HEAD>
<BODY>

<DIV STYLE="position:absolute;left:0px;top:0px">
  <IMG SRC="grossesBild.gif" WIDTH=150 HEIGHT=400>
</DIV>
<DIV STYLE="position:absolute;left:30px;top:50px">
  <A HREF="dorthin.htm" ONMOUSEOVER="Bildwechsel(1,ausoff)" ONMOUSEOUT="Bildwechsel(1,einon)">
  <IMG SRC="schaltbild.gif" HEIGHT=20 WIDTH=90 A>
...usw...
</DIV>
</BODY>

Funktioniert im IE4 wie gewuenscht. Im NN4 sieht man nur das grosse Bild. Die Schaltflaechenbilder verschwinden dahinter.
Wenn ich die Schaltflaechenbilder in ein <TABLE> einbinde, sind diese im NS4 zwar sichtbar, auch die Verweise funktionieren, aber die Java-Bildwechsel nicht.
Wo liegt mein Fehler?

Beispiel 2:
...CSS Angaben zu Schriftart/Groesse und Farbe in externer Datei...
<BODY>
<DIV STYLE="position:absolute;top:0px;">
<TABLE ALIGN=CENTER>
  <TD ALIGN=CENTER>
    <IMG SRC="bildOben.gif" HIGHT=222 WIDTH=307      
  </TD>
</TABLE>

<DIV STYLE="position:relative;top:10px;">

<TABLE ALIGN=CENTER>
  <TR>
    <TD WIDTH=170 ALIGN=RIGHT VALIGN=TOP>
      <IMG SRC="einBild.JPG" WIDTH=164 HEIGHT=260>
    </TD>
    <TD WIDTH=10>   <!-- 10 Pixel Freiraum -->
        
    </TD>
    <TD ALIGN=LEFT VALIGN=TOP>
      <DIV STYLE="position:relative;top:-5px;">
      <P CLASS="xyz" ALIGN=LEFT>Text...
      </P>
    </TD>
  </TR>
</TABLE>

Ergibt im IE4 das gewuenschte Ergebnis. Im NN4 werden weder die Positionen erkannt, noch die Schriftformatierungen aus der CSS-Datei.

Muss ich denn tatsaechlich fuer beide Browser unterschiedliche Scripten schreiben - oder gar meine Gestaltungswuensche auf ein Minimum zurueckschrauben?

Gruss, Ralf!

  1. Hallo Ralf,

    Ergibt im IE4 das gewuenschte Ergebnis. Im NN4 werden weder die Positionen erkannt, noch die Schriftformatierungen aus der CSS-Datei.

    <IMG SRC="schaltbild.gif" HEIGHT=20 WIDTH=90 A>
    sollte auf jeden Fall lauten:
    <IMG SRC="schaltbild.gif" HEIGHT=20 WIDTH=90></A>
    Sonst ist es ein uebler Kodier-Fehler.

    Um mit Netscape auf ein Bild zuzugreifen, das in einem positionierten Bereich ist, muss man mit dem layer-Objekt arbeiten. Bei dem wiederum muss man beachten, dass so ein Layer fuer Netscape stets ein neues Dokument-Objekt bedeutet.

    Statt document.images[1].src muss man also z.B. document.layers[1].document.images[1].src notieren. Nur bei Netscape allerdings, mann muss es also von einer Brwoserabfrage wie if(document.layers) abhaengig machen. Das ist zumindest noch eine andere moegliche Fehlerquelle.

    Viele Gruesse
      Stefan Muenz

    1. Hallo Stefan,

      danke für Antwort.

      <IMG SRC="schaltbild.gif" HEIGHT=20 WIDTH=90 A>
      sollte auf jeden Fall lauten:
      <IMG SRC="schaltbild.gif" HEIGHT=20 WIDTH=90></A>
      Sonst ist es ein uebler Kodier-Fehler.

      ...war nur ein Uebertragungsfehler ins Forum.

      Um mit Netscape auf ein Bild zuzugreifen, das in einem positionierten Bereich ist, muss man mit dem layer-Objekt arbeiten.

      ...inzwischen habe ich mir in SELFHTML die "layer" Kapitel naeher betrachtet. Deine Aussage zeigt mir, dass ich dabei wohl auf dem richtigen Weg sein muss.

      Gruss, Ralf!