Ebene mit Text?!

[Rony]

Ich habe mehrere Ebenen mit CSS ( div ) erstellt die übereinander liegen. Nun möchte ich in die 3 Ebene Text schreiben. Jedoch interpretiert Netscape die Abstände zum Ebenrand anders als IE. Das heißt der Text ist etwas verrückt in der Eben. Bei Netscape ist er nicht dirckt am Rand wo er eigentlich sein soll. Wie kann ich das beheben?

Danke !

[Tim Tepaße]

Hallo Rony*,

Ich habe mehrere Ebenen mit CSS ( div ) erstellt die übereinander liegen. Nun möchte ich in die 3 Ebene Text schreiben. Jedoch interpretiert Netscape die Abstände zum Ebenrand anders als IE. Das heißt der Text ist etwas verrückt in der Eben. Bei Netscape ist er nicht dirckt am Rand wo er eigentlich sein soll. Wie kann ich das beheben?

Fragen dazu:

• Welcher Netscape? 4.x oder modernere?
• Wie sieht der HTML-Quelltext aus?
• Wie sieht der CSS-Quelltext aus?

Rateversuche dazu:

• Meinst Du vielleicht die falsche Darstellung des Box Modells vom IE <= 5?

• Tim

[Rony]

Hi,

moderner Netscape (bei Mozilla das gleiche).

Code:

<div style="position:absolute; width:45%; height:100%; top:0px; left:0px; background-color:#006699; border:0px;">
 <div style="position:absolute; width:250px; height:120px; bottom:10px; right:10px; border:0px;">
 <div style="position:absolute; width:250px; height:120px; bottom:0px; right:0px; border:0px;">
 <p><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif">Dieser Text verschiebt sich.
 </div>
</div>

[Rony]

PS: IE zeigts richtig an. Beim Netscape und Mo ist es verrutscht.

[Tim Tepaße]

Hallo Rony,

<p><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif">Dieser Text verschiebt sich.
</div>
</div>

Wo schließt Du denn das dritte <div>, wo schließt Du das <p> und wo schließt Du das veraltete <font>?
Welche Doctype hast Du angegeben? Das Darstellungsverhalten des IE ist auch von der Doctype abhängig. Bei mir hat er gerade mit XHTML 1.1 Doctype nichts angezeigt.

Und vor allem: Was ist das "richtige" Verhalten? Welchen Effekt möchtest Du erreichen? Denn bislang ist mir Dein Konzept der ineinander verschachtelten absolut positionierten Divs noch irgendwie komisch.

• Tim

[Rony]

Das <div> und <p> sowie das <font> habe ich geschlossen. Die Befehle sind wohl beim aufschreiben in der Eile untergegangen! Was meinst du mit doctype?

[Tim Tepaße]

Hallo Rony,

Das <div> und <p> sowie das <font> habe ich geschlossen. Die Befehle sind wohl beim aufschreiben in der Eile untergegangen! Was meinst du mit doctype?

Was eine Doctype ist, erklärt wohl am besten SELFHTML (#1), dessen Basiswissen hier vorrausgesetzt wird. Wichtig sind Doctypes generell, aber auch wegen des Spezialfalls, daß der Internet Explorer dann bestimmte Elemente anders darstellt (#2).

Oft passiert es, das manche Leute ein fehlerhaftes Anzeigen von CSS-Befehlen durch den IE als "richtiges" Anzeigen annehmen und andere (bessere) Browser dann als "flashc" klassifizieren, obwohl die den Standard richtig interpretieren. Ohne Dich dieses Verhaltens anklagen zu wollen, aber es erscheint mir doch am wahrscheinlichsten, daß Dein Problem des Verrückens durch so etwas verursacht wird.

Trotzdem sind wir jetzt nicht weiter. Idealerweise postest Du den Quellcode nochmal, diesmal in der korrekten Form. Schließlich weiß niemand außer Dir, wo diese Divs geschlossen werden. Auch weiß noch keiner, welchen Effekt Du erreichen willst. Bislang habe ich nur die die Vermutung, daß Du die linken 45% der Anzeigefläche in einem netten Dunkelblau haben willst und darauf liegend am unteren Rand irgendetwas mir Text drin.
Vielleicht wären zwei kleine Screenshots angebracht (d.h. nur die betreffenden Stellen), auf denen Du vielleicht einzeichnest, was "richtig", sprich gewollt ist, und was fehlerhaft ist. Wie man hier Bilder einbindet, steht in der </faq/> (#3).

(#1) http://selfhtml.teamone.de/html/allgemein/grundgeruest.htm#dokumenttyp
(#2) http://www.styleassistant.de/tips/tip52.htm
(#3) </faq/#Q-19>

• Tim

PS: Klinge ich harsch? Soll aber nicht. Es ist nur so, daß Du imho viel
    zuwenig Angaben zu Deinem Problem machst. "Verrutscht" ist keine wirklich
    gute Fehlerbeschreibung.

[Rony]

Ne, harsch klingste nicht. Also was "doctype" ist weiß ich, ich wollte nur genau wissen welchen du stehen hast. Und das mit der genauen Fehlerbeschreibung stimmt. Ich werde nun versuchen Material zusammen zu legen und vielleicht mein Problem in Kürze detalierter beschreiben. Danke erst einmal für deine Hilfe.

[Rony]

Ich habe mal spontan mein Problem hochgeladen. Du findest die Seite unter:

http://web210.server18.greatnet.de/ebeneindex.htm

Den Quelltext müsstest du ja lesen können und meine Problem is nur, dass es auf dem IE anders aussieht als auf dem Netscape (bzw. Mozilla (?1.1?) . Ich hoffe du hast beide Browser parrat.

Danke

[Tim Tepaße]

Hallo Rony,

Den Quelltext müsstest du ja lesen können und meine Problem is nur, dass es auf dem IE anders aussieht als auf dem Netscape (bzw. Mozilla (?1.1?) . Ich hoffe du hast beide Browser parrat.

Es ist mir zwar unbegreiflich, weswegen Du all diese Layer absolut positionierst und dann irgendwie übereinander legst, aber Du wirst schon Deine Gründe für diese in meinen Augen umständliche Vorgehensweise haben.

Zu Deinem Problem:

Du verwendest das div#adresse zur Positionierung und packst darin ein p-Element, das den Text enthält. Nun ist die reale Position des Textes von drei Faktoren abhängig:

1. Dem Innenabstand von div#adresse
2. Dem Außenabstand des p-Elementes
3. Dem Innenabstand des p-Elementes

Ich setze in meinem Lösungsvorschlag den Innenabstand von div#adresse auf 0 Pixel, weil man sich damit einige Probleme mit dem Box Model erspart:

<div id="adresse" style="padding:0px;">

Den Außenabstand des p-Elementes setze ich dann für den Abstand ein:

<p id="weiss" style="margin:10px; padding:0px;">

Und den Innenabstand des p-Elementes (das obige padding) ignoriere ich einfach mal geflissentlich, weil wir ja schon ein Mittel zur Abstandskontrolle haben. Voilá!

• Tim

[Rony]

Ich danke dir !!!!!!!!

PS: Ich konnte es nicht erwarten und habe kurz bevor du geantwortet hast einen neues Thema geöffnet. Einfach ignorieren ;-).

Ich hoffe auf der Welt gibt es noch mehr Menschen wie dich. Danke, Danke, Danke.

Einen schönen Abend noch!