Marc Nilius: Layer-Begrenzung und Hintergrundbild

Hallo!

Ich bins mal wieder.
Ich habe noch so meine Probleme mit "vollstaendig CSS und Div-Layer"-basierenden Layouts.

auf http://kunden.amazingmedia.de/vfbwissen/main2.html seht ihr den aktuellen Entwicklungsstatus.

Bei allen von mir getesteten Browsern sieht Ergebnis genau so aus wie es soll, nur nicht im IE6. Getestet wurde unter: Netscape 6.2, Mozilla 1.0, Opera 6.04, alle unter Win98
(Habe auch im NN 4.72 getestet, nur der zerschiesst wirklich alles...)

Das Problem aeussert sich darin, dass sich im IE scheinbar am oberen und unteren Rand des Layers ein Abstand befindet zum Inhalt des Layers, bei dem das Hintergrundbild durchscheint, was es aber gar nicht soll. Am Anfang und Ende des Layers befinden sich Grafiken, die den Rest des Layers grafisch abgrenzen. Nun erscheint darunter und darueber wieder das Hintergrundbild, was doch eher besch... aussieht.

Woran liegt dass? Was macht der IE da? Und ganz wichtig: wie kann ich das abstellen, dass der das macht und gleichzeitig bei den anderen Browsern das aktuelle Erscheinen beibehalten?

Danke schonmal im voraus....

Gruss,
Marc

  1. Ich habe noch so meine Probleme mit "vollstaendig CSS und Div-Layer"-basierenden Layouts.

    Bei allen von mir getesteten Browsern sieht Ergebnis genau so aus wie es soll, nur nicht im IE6.

    Bevor Du vom IE verlangst, CSS richtig zu interpretieren, solltest Du ihn in den standardkompatiblen Modus setzen, siehe http://www.hut.fi/~hsivonen/doctype.html.

    (Habe auch im NN 4.72 getestet, nur der zerschiesst wirklich alles...)

    Dann solltest Du in Betracht ziehen, mehr mit HTML-Tags zu arbeiten (zur Strukturierung) und CSS per @import einzubinden, so daß Netscape 4 nur reines HTML vorgesetzt bekommt. Das sieht dann zwar nicht knallig-bunt aus, aber wenigstens kann es jeder lesen.

    Das Problem aeussert sich darin, dass sich im IE scheinbar am oberen und unteren Rand des Layers ein Abstand befindet zum Inhalt des Layers, bei dem das Hintergrundbild durchscheint, was es aber gar nicht soll. Am Anfang und Ende des Layers befinden sich Grafiken, die den Rest des Layers grafisch abgrenzen. Nun erscheint darunter und darueber wieder das Hintergrundbild, was doch eher besch... aussieht.

    Eventuell mußt Du mit margin _und_ padding arbeiten. Beachte auch, daß Grafiken auf der Basislinie einer Zeile stehen (sollten), nicht bündig unten.

    Gruß,
      soenk.e

    1. Hallo!

      Bevor Du vom IE verlangst, CSS richtig zu interpretieren, solltest Du ihn in den standardkompatiblen Modus setzen, siehe http://www.hut.fi/~hsivonen/doctype.html.

      so, dass habe ich jetzt (XHTML 1.0 Transitional), laut Validator ist die Seite auch ok.
      Die Darstellungsprobleme im IE habe ich jetzt auch geloest, align="left" in der img-Referenz hat geholfen. Wie kann ich das auch per CSS loesen?

      Seit der Umstellung des Doctypes scheint Mozilla mein externes Stylesheet nicht mehr lesen zu wollen. Woran kann das liegen?

      Dann solltest Du in Betracht ziehen, mehr mit HTML-Tags zu arbeiten (zur Strukturierung) und CSS per @import einzubinden, so daß Netscape 4 nur reines HTML vorgesetzt bekommt. Das sieht dann zwar nicht knallig-bunt aus, aber wenigstens kann es jeder lesen.

      Was meinst du damit genau?

      Soweit schonmal vielen Dank fuer die Hilfe. Vielleicht kannst du / koennt ihr ja auch noch das naechste Problem loesen (s.o.) :-)

      Gruss,
      Marc

      1. Noch ein kleiner Nachtrag:

        Seit der Umstellung des Doctypes scheint Mozilla mein externes Stylesheet nicht mehr lesen zu wollen. Woran kann das liegen?

        In IE6, Opera 6.04, Netscape 6.2 (alle Win98) ist jetzt alles ok und genau so wie es sein soll.
        Nur im Mozilla halt nich... :-(

        Gruss,
        Marc

        1. Hallo Marc,

          In IE6, Opera 6.04, Netscape 6.2 (alle Win98) ist jetzt alles ok und genau so wie es sein soll.
          Nur im Mozilla halt nich... :-(

          Als mein Mozilla (1.0.0 auf Debian 3.0) macht das prima mit... Vielleicht ein Caching-Problem?

          Noch etwas zu Deiner Seite: Warum eine feste Breite? Bei mir klebt sie jetzt richtig links oben am Bildschirm und sonst ist viel Platz verschwendet. Du könntest doch alles bis zum rechten Rand laufen lassen, und alles nach dem Farbverlauf mit dem Blau auffüllen. Nur mal so eine Idee...

          Grüße,

          Christian

          --
          Sollen sich alle schämen, die gedankenlos sich der Wunder der Wissenschaft und Technik bedienen und nicht mehr davon erfasst haben als eine Kuh von der Botanik der Pflanzen, die sie mit Wohlbehagen frisst.
                                -- Albert Einstein
          1. Hallo Christian!

            Als mein Mozilla (1.0.0 auf Debian 3.0) macht das prima mit... Vielleicht ein Caching-Problem?

            Scheint wirklich ein Caching-Problem zu sein...

            Noch etwas zu Deiner Seite: Warum eine feste Breite? Bei mir klebt sie jetzt richtig links oben am Bildschirm und sonst ist viel Platz verschwendet. Du könntest doch alles bis zum rechten Rand laufen lassen, und alles nach dem Farbverlauf mit dem Blau auffüllen. Nur mal so eine Idee...

            Also so oben links in der Ecke soll es auch nicht bleiben.Es wird zentriert in die Mitte gesetzt. Warum die Seite eine feste Breite hat? Weiss nicht, persoenliche Empfindung, dass das angenehmer ist als variable. Aber ohne das konkretisieren zu koennen...

            Gruss,
            Marc

            --
            Alles wird gut - www.amazingmedia.de
            1. Hallo Marc,

              Scheint wirklich ein Caching-Problem zu sein...

              Dann lösche doch mal Deinen Cache, dann weißt Dus...

              Warum die Seite eine feste Breite hat? Weiss nicht, persoenliche Empfindung, dass das angenehmer ist als variable. Aber ohne das konkretisieren zu koennen...

              Naja. Ich persönlich mag variable Seiten lieber. Vielleicht, weil ich dann selbst bestimmen kann, wieviel Platz sie mir vom Bildschirm "wegnehmen". Deine nimmt mir im Moment zu wenig weg. Naja, es gibt schlimmeres, als ein festes <div>-Layout: ein festes Tabellenlayout. ;-)

              Grüße,

              Christian

              --
              Sollen sich alle schämen, die gedankenlos sich der Wunder der Wissenschaft und Technik bedienen und nicht mehr davon erfasst haben als eine Kuh von der Botanik der Pflanzen, die sie mit Wohlbehagen frisst.
                                    -- Albert Einstein
      2. Die Darstellungsprobleme im IE habe ich jetzt auch geloest, align="left" in der img-Referenz hat geholfen. Wie kann ich das auch per CSS loesen?

        float:left ist das entsprechende CSS-Konstrukt. Probiere auch mal display:block.

        Seit der Umstellung des Doctypes scheint Mozilla mein externes Stylesheet nicht mehr lesen zu wollen. Woran kann das liegen?

        Wenn's mit Netscape 6+ klappt, mit Mozilla aber nicht, würde ich wie Christian eher auf ein temporäres Problem schließen. Die beiden Browser sind schließlich fast identisch.

        Dann solltest Du in Betracht ziehen, mehr mit HTML-Tags zu arbeiten (zur Strukturierung) und CSS per @import einzubinden, so daß Netscape 4 nur reines HTML vorgesetzt bekommt. Das sieht dann zwar nicht knallig-bunt aus, aber wenigstens kann es jeder lesen.

        Was meinst du damit genau?

        In der HTML-Datei _nur_ die logische Struktur der Seite und das _komplette_ Layout in eine CSS-Datei. Diese CSS-Datei wird per

        <style type="text/css">
          @import url(style.css)
          </style>

        eingebunden. Netscape 4 kennt @import nicht, ignoriert deshalb das Stylesheet, kann dementsprechend auch nicht drüber stolpern und alles durcheinanderwürfeln, sondern zeigt die HTML-Datei einfach "roh" an.
        Das hat den IMHO nicht zu unterschätzenden Vorteil, daß man sich mit CSS weitesgehend austoben kann, aber Netscape 4-Nutzer trotzdem mit der Seite etwas anfangen können.

        Siehe beispielsweise http://alistapart.com/ oder http://kino-fahrplan.de/programm/ (ok, Eigenlob stinkt:). Hier im Forum finden sich auch eine ganze Reihe von Diskussionen zu dem Thema (Stichworte CSS, Netscape, Trennung, Inhalt, Layout, Design).

        Gruß,
          soenk.e

        1. Hi!

          In der HTML-Datei _nur_ die logische Struktur der Seite und das _komplette_ Layout in eine CSS-Datei. Diese CSS-Datei wird per

          <style type="text/css">
            @import url(style.css)
            </style>

          eingebunden. Netscape 4 kennt @import nicht, ignoriert deshalb das Stylesheet, kann dementsprechend auch nicht drüber stolpern und alles durcheinanderwürfeln, sondern zeigt die HTML-Datei einfach "roh" an.
          Das hat den IMHO nicht zu unterschätzenden Vorteil, daß man sich mit CSS weitesgehend austoben kann, aber Netscape 4-Nutzer trotzdem mit der Seite etwas anfangen können.

          Siehe beispielsweise http://alistapart.com/ oder http://kino-fahrplan.de/programm/ (ok, Eigenlob stinkt:). Hier im Forum finden sich auch eine ganze Reihe von Diskussionen zu dem Thema (Stichworte CSS, Netscape, Trennung, Inhalt, Layout, Design).

          Danke fuer den Tipp! Mal schauen, was sich da noch so machen laesst... :-)

          Gruss,
          Marc

          --
          Alles wird gut - www.amazingmedia.de