hm: IE(6) - Mal wieder IrgendEin Problem ...

Guten Tag,

um einen "Schatten" zu realisieren verwende ich folgendes HTML:
<div id="schatten">
<div id="seite">
INHALT
</div>
</div>

Mit folgendem CSS:
#schatten {
 background: #969696;
 left: 25px;
 margin: 40px auto 25px auto;
 position: relative;
 width: 80%;
}

#seite {
 background: #fff;
 left: -25px;
 padding: 0;
 position: relative;
 top: -25px;
}

Unter Firefox, Opera und Konqueror auch kein Problem. Der "Schatten" wird wie gewünscht umgesetzt und innerhalt von #seite kann ich hin- und herfloaten und das Ergebnis ist wie erwartet.

Doch im IE mal wieder nicht:
Nur nicht-gefloatetes wird korrekt innerhalb von #seite angezeigt. Alles was gefloatet wird erscheint im "darunterliegenden" #schatten und ist somit nicht wirklich brauchbar, weil es vom weißen Hintergrund der #seite verdeckt wird.
Hat jemand eine Idee, welche Sonderbehandlung der IE mal wieder möchte?

Gruß

  1. Hi,

    Doch im IE mal wieder nicht:
    Nur nicht-gefloatetes wird korrekt innerhalb von #seite angezeigt. Alles was gefloatet wird erscheint im "darunterliegenden" #schatten und ist somit nicht wirklich brauchbar, weil es vom weißen Hintergrund der #seite verdeckt wird.

    Das kann ich mit deinem Minimalcode nicht nachvollziehen - du beschreibst ja nicht mal, was gefloatet wird und wo.

    Bitte stelle ein vollstaendiges, dabei minimales und selsbtverstaendlich valides Online-Beispiel zum Testen bereit.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Kann leider kein Online-Beispiel zur Verfügung stellen, aber hier das minimal-Problem-Beispiel:
      -----
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
      <head>
       <style type="text/css">
      #container {
       background: #000;
       left: 25px;
       margin: 50px auto 25px auto;
       max-width: 55em;
       min-width: 20em;
       position: relative;
       width: 80%;
      }

      #seite {
       background: #fff;
       border: 1px solid #000;
       left: -25px;
       position: relative;
       top: -25px;
      }

      div#links {
       background: #ddd;
       float: left;
      }

      .seitenansprache-rechts {
       background: #f88;
       float: right;
       max-width: 33%;
      }
       </style>
      </head>

      <body>

      <!-- CONTAINER -->
      <div id="container">

      <!-- SEITE -->
      <div id="seite">

      <!-- LINKS -->
      <div id="links">
      Links gefloateter div<br />
      Links gefloateter div<br />
      Links gefloateter div<br />
      Links gefloateter div<br />
      Links gefloateter div<br />
      </div>
      <!-- LINKS -->

      <!-- INHALT -->
      <div id="inhalt">
      <h1>Inhalt</h1>
      <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt</p>
      <p class="seitenansprache-rechts">seitenansprache-rechts: rechts-gefloateter, 25% breiter Absatz</p>
      <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt</p>
      </div>
      <!-- INHALT -->

      </div>
      <!-- SEITE -->

      </div>
      <!-- CONTAINER -->

      </body>
      </html>
      -----

      Im Opera, Firefox, Konqueror soweit kein Problem (außer nach einem seitenanspruch kommt kein bzw. zu wenig Text, dann steht der seitenansrpuch außerhalb von #seite).
      Im IE(6) aber ist nur der Inhalt wie erwartet zu sehen und #seite hat einen "Schatten". Die gefloateten Bereiche verschwinden jedoch im schwarzen container und sind nicht wirklich sichtbar.

      Gruß

      1. Hi,

        Kann leider kein Online-Beispiel zur Verfügung stellen, aber hier das minimal-Problem-Beispiel:

        OK, damit ist das Problem zumindest nachvollziehbar.

        Im IE(6) aber ist nur der Inhalt wie erwartet zu sehen und #seite hat einen "Schatten". Die gefloateten Bereiche verschwinden jedoch im schwarzen container und sind nicht wirklich sichtbar.

        Auch hier duerfte mal wieder die simple Ergaenzung von position:relative fuer die gefloateten Elemente helfen.
        Ich hab das jetzt zwar nur im IE6-Modus des IETesters ausprobieren koennen, aber ich denke mal in einem "echten" IE6 geht es damit auch.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Hallo,

          danke das funktioniert soweit gut!

          Habe dennoch weitere Probleme mit dem blöden IE und kann schlecht testen, da ich hier mit einem Linux unterwegs bin ...

          a) verschachtelte ol-Liste wird im IE völlig auseinandergezogen dargestellt
          b) habe p:first-letter formatiert und dann allerdings blockquote p:first-letter anders formatiert, jedoch wir zweiteres vom IE nicht beachtet.
          c) bei meinen 3 Browsern konnte ich für den body und #seite jeweils das gleiche Hintergrundbild ohne Wiederholung und fixed links oben anordnen und die Hintergrundbilder wurden dann so ausgerichtet, dass sich das zusammengesetzte Bild ergab. Beim IE erhält Body und IE jeweils ein eigenes Hintergrundbild ohne Zusammensetzung.

          Man schade da hat man ein Design, was einem selbst gefällt ...

          Gruß

          1. Hi,

            Habe dennoch weitere Probleme mit dem blöden IE und kann schlecht testen, da ich hier mit einem Linux unterwegs bin ...

            Wenn testen unter WINE oder einer virtuellen Maschine nicht in Frage kommt, und kein echtes Windows zur Vefuegung steht - dann bleiben wohl nur noch Dienste wie browsershots.org

            a) verschachtelte ol-Liste wird im IE völlig auseinandergezogen dargestellt

            Per Default regeln die Browser die Einrueckung in Listen unterschiedlich, ueber margin und/oder padding. Wenn man halbwegs konsistente Ergebnisse haben will, sollte man also zu beiden Eigenschaften eigene Vorgaben machen.

            b) habe p:first-letter formatiert und dann allerdings blockquote p:first-letter anders formatiert, jedoch wir zweiteres vom IE nicht beachtet.

            Und wenn du's ueber blockquote:first-letter probierst, ohne das nachfolgende P zu beachten? (Nur ein Schuss ins Blaue.)

            c) bei meinen 3 Browsern konnte ich für den body und #seite jeweils das gleiche Hintergrundbild ohne Wiederholung und fixed links oben anordnen und die Hintergrundbilder wurden dann so ausgerichtet, dass sich das zusammengesetzte Bild ergab. Beim IE erhält Body und IE jeweils ein eigenes Hintergrundbild ohne Zusammensetzung.

            Der IE 6 kann mit fixierten Hintergrundbildern noch nicht richtig umgehen; er versaut die Ausrichtung am Viewport fuer andere Elemente als html oder body.

            Aber IE 6 ist so gut wie tot; auf jeden Fallrechtfertigt er keinen allzu hohen Aufwand mehr, um lediglich das Aussehen konsistent zu aktuellen Browsern hinzukriegen, solange die Funktionalitaet gegeben ist.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
            1. Hallo,

              ok die hasLayout-Sache werde ich mir mal anschauen.

              Für das Problem mit dem Hintergrund gibt es aber keine Lösung?

              Gruß