Boris: absolute Positionierung und IE4...

Hallo, Forum!

ich habe gestern ein wenig mit position:absolute rumexperimentiert, um auszutesten, ob ich solche Sachen auch verwenden kann... nun ja, die folgende Angabe funktioniert mit meinem Netscape 4.51 einwandfrei, sieht auf dem IE4 allerdings ziemlich Kraut-und-Ruebig aus... jetzt ist es aber so, dass Laut SelfHTML http://self/tdch.htm#a2 der IE die absolute Positionierung auch unterstuetzt, daher bin ich doch etwas verwirrt gewesen...
also, hier mein Code:

hier kommt erstmal Text... <div style="position:absolute; top:65px; left:22%; z-index:1; ">
<img src="../images/dots/dot_black.gif" width="72" height="1"></div>
<div style="position:absolute; top:51px; left:22%; z-index:0; ">
<img src="../images/dots/dot_gw.gif" width="72" height="16"></div>
<div style="position:relative; z-index:2">Wieder Text, der in NS einwandfrei auf dem blauen Rechteck platziert ist.... </div> und hier wieder Text...

Also, wie gesagt, Netscape macht das alles richtig, ein blaues Rechteck auf dem ein Text steht, unter dem ein schwarzer Strich steht...

fuer Hinweise, wo mein Denkfehler liegt, waer ich echt dankbar!

Boris

  1. Moin,
    ich glaube es liegt daran, dass der IE das mit der %-Angabe nicht interpretiert. Sonst sehe ich keinen Fehler.
    Tschau, Robert.

    1. Tach!

      ich glaube es liegt daran, dass der IE das mit der %-Angabe nicht interpretiert. Sonst sehe ich keinen Fehler.

      stimmt, Danke!
      ich hab das jetzt mal korrigiert, und jetzt stimmt auch der Einzug von _links_. Von oben ist es allerdings immer noch verschoben, und zwar weil im IE Die Schrift weiter oben Anfaengt -  Warum ???

      Boris

  2. Hi Boris,

    der IE benutzt bei position:relative die Angaben left und top relativ zum normalen Textfluß. Die alleinige Angabe von position:relative ohne left und top bewirkt deshalb nichts, der relativ positionierte Text wird dahinter gesetzt.

    So verstehe ich jedenfalls die Erklärung unter http://msdn.microsoft.com/workshop/author/css/csspos/csspos.asp

    Gruß,
    Martin

    1. Howdy Martin!

      der IE benutzt bei position:relative die Angaben left und top relativ zum normalen Textfluß. Die alleinige Angabe von position:relative ohne left und top bewirkt deshalb nichts, der relativ positionierte Text wird dahinter gesetzt.

      Aehm... ja, das ist schon durchaus richtig, aber... wie steht das jetzt im Zusammenhang mit meinem Problem ? <remember: es geht um _ABSOLUTE_ Positionierung...>

      Gruss

      Boris

      1. Hi Boris,

        Howdy Martin!

        mach ich: aua! ;-)

        Aehm... ja, das ist schon durchaus richtig, aber... wie steht das jetzt im Zusammenhang mit meinem Problem ? <remember: es geht um _ABSOLUTE_ Positionierung...>

        du verwendest aber auch position:relative, und da sitzt das Problem.

        Gruß,
        Martin

        1. Howdy Martin!

          mach ich: aua! ;-)

          hmmmm... naja, sooo wars ja nicht gedacht... sollst nicht immer alles so woertlich nehmen! ;v)

          du verwendest aber auch position:relative, und da sitzt das Problem.

          hmmm... jetzt war ich grad erst ganz schockiert und hab nochmal nachgeschaut, und siehe da: stimmt tatsaechlich... allerdings: der text, der `relative‚ positioniert ist, steht genau da, wo er hingehoert... also: kein problem, hier... mein Problem liegt wirklich und warhaftig ausschliesslich bei der _absoluten_ positionierung...

          Gruss
          Boris

  3. Hallo!

    Bei solchen Fällen ist ein url immer gut.

    Bei mit zeigen alle 3 Borwser (NS4.5 IE5 /4.01) das selbe Bild: einen Rechteck mit einem strich drunter und *über* (nicht darauf) dem ganzen einen Text.

    Ich sehe auch nicht warum du 3 divs brauchst (ein mit einem 'text' <br><img..>, das ganze zentriert würde reichen),aber das ist deine Sache ;-).

    <div style="position:absolute; top:65px; left:22%; z-index:1; ">

    nach z-index:1; solltest du das Leerzeichen eliminieren und eventuell solltest du width:__px; auch einfügen.

    Grüße
    Thomas

    PS. positon:relative; bezieht sich immer auf das vorangehenden Element, wenn kein solches da ist (wie bei dir, da position:absolute die Elemente aus dem normalen Elementenfluß herausnimmt) dann auf das Browserfenster.

    1. Hai!
      »»

      Bei solchen Fällen ist ein url immer gut.

      wollt ich liefern, aber leider kann ich meinen FTP-Server nicht erreichen um die Datei hochzuladen
      =v(

      Bei mit zeigen alle 3 Borwser (NS4.5 IE5 /4.01) das selbe Bild: einen Rechteck mit einem strich drunter und *über* (nicht darauf) dem ganzen einen Text.

      vielleicht liefer‚ ich einfach mal den kompletten Code dazu...

      <HEAD>
      <TITLE>Der Verfasser</title>
      <style type="text/css">
      body { margin-left:80px; }
      </style>
      </head>
      <body OnLoad="SetVar()">
      <div style="position:absolute; top:10px; left:10px; ">
       <a href="mailto:kuehn@ics-ag.de?to=boris@kuehn.com&Subject=Verlag"><img src="../images/email.gif" border="0"></a>
      </div>
      <br>
      Der Autor dieser Seiten bin ich, <div style="position:absolute; top:65px; left:84px; z-index:1; ">
      <img src="../images/dots/dot_black.gif" width="77" height="1"></div>
      <div style="position:absolute; top:51px; left:84px; z-index:0; ">
      <img src="../images/dots/dot_gw.gif" width="77" height="16"></div>
      <div style="position:relative; z-index:2">Boris Kühn. </div>Daß Sie diesem Link gefolgt sind, verrät mir, daß Sie gerne ein wenig über mich erfahren würden. Also gut.
      </BODY>
      </HTML>

      Ich sehe auch nicht warum du 3 divs brauchst (ein mit einem 'text'
      <img..>, das ganze zentriert würde reichen),aber das ist deine Sache ;-).

      wie eingangs erwaehnt ist das ganze ein Experiment, mehr oder weniger, ich hab eigentlich garnicht damit gerechnet, dass es Probleme gibt...

      <div style="position:absolute; top:65px; left:22%; z-index:1; ">

      nach z-index:1; solltest du das Leerzeichen eliminieren und eventuell solltest du width:__px; auch einfügen.

      hmmm... werd ich machen, obwohl es _hiermit_ keine Probleme gibt...

      Grüße
      Thomas

      mehr Gruesse:

      Boris =v)

      PS. positon:relative; bezieht sich immer auf das vorangehenden Element, wenn kein solches da ist (wie bei dir, da position:absolute die Elemente aus dem normalen Elementenfluß herausnimmt) dann auf das Browserfenster.

      ist mir bekannt hilft mir aber leider nicht weiter...

      1. Hallo!

        Ich habe noch leider immer keinen blassen Schimmer was du haben möchtest. Deshalb habe ich ein screenshot von dem gemacht was dargestellt wird:

        http://www.unet.univie.ac.at/~a9105535/forum/boris1.gif das Bild ist identisch unter NS4.5 und IE4.01

        Ah ja, zur Info: body { margin-left:80px; }
        bewirkt unter dem IE5 einen automatischen margin-right:80px; für body.

        Grüße
        Thomas

        1. Hallo!

          Ich habe noch leider immer keinen blassen Schimmer was du haben möchtest. Deshalb habe ich ein screenshot von dem gemacht was dargestellt wird:

          http://www.unet.univie.ac.at/~a9105535/forum/boris1.gif das Bild ist identisch unter NS4.5 und IE4.01

          Danke schoen... aber nein: so sieht‚s bei mir im NS nicht aus... verdammt, wenn morgen das mit dem FTP nicht klappt, werd ich verrueckt! Hmmm... kann ich dir die Datei morgen vielleicht mal per Email schicken ? (wenn‚s dann immernoch nicht klappt...)

          Danke erstmal

          Boris

          1. Hallo!

            »»Hmmm... kann ich dir die Datei morgen vielleicht mal per Email schicken ? (wenn‚s dann immernoch nicht klappt...)

            Kannst du gern, aber das hast du ja schon, zumindest den Quelltext gepostet. Ich habe den genommen, nur die Bilder habe ich durch eige Pixelgrafiken ersetzt.

            Grüße
            Thomas