Mozilla vs. XHTML/CSS - Containerhilfe gesucht

+---------+
|+---+---+|
||Box|Box||
|| 2 | 3 ||
|+---+---+|
|  Box 1 ||
+---------+

+---------+
+---------+

+---+---+
|Box|Box|
| 2 | 3 |
+---+---+

Hallo Reimer,

um welchen Code handelt es sich denn bei dem Problem genau? Aus den angegebenen Links kann ich diesen jetzt nicht folgern, bzw. auch nicht aus der Anzeige selber, da mein Mozilla/Firebird 0.7+ nichts unterschiedlich dargestellt hat eben im Vergleich zum IE .

Gruß,
Lars

http://4desktops.de/bug.gif

Ich habe die einzelnen Boxen nochmals farblich hinterlegt und zu zeigen, wo mein Firebird 0.7 rumzickt. Die hellblaue Box soll den Hintergrund von Box2 und Box3 darstellen. In Firebird wird jedoch die Box nicht nach unten verlängert, sondern ist nur diese eine Zeile dort oberhalb.

Mein Firebild spuckt mir übrigens dieses Layout aus:
http://4desktops.de/firebird.jpg

:/

... womit meine Frage nach dem Code immer noch nicht beantwortet wäre - und was die fehlerhafte Darstellung angeht, ist mir diese auch mit den farblich markierten Bildern nicht ersichtlich, wohl weil sich wie gesagt auf meinem Rechner Darstellung von IE zu Mozilla/Firebird0,7+ nur in einer Feinheit unterscheidet (leicht unterschiedliche Darstellung der Schriften, was aber als normal zu betrachten ist), und selbst im Opera7 sah sie vorhin nicht nennenswert anders aus...

Siehe Anhang, so sieht Deine Problemseite bei mir im IE6 aus - und dito (leider?) auch im Firebird, und das unterscheidet sich vom Layout nicht von der von Dir angehängten Firebird-Ausgabe.
Markier vielleicht bitte besser darin mal die problematische Stelle (den Unterschied deutlich machen zu dem, wie es sein sollte) oder besser noch, häng mal ein Bild der Darstellung an wie Du sie gerne hättest - vielleicht versteh ich dann endlich, was das eigentliche Problem ist...

Gruß,
Lars

ps: klasse Idee mit der "visited link"-Darstellung - gefällt

Miniaturansicht angehängter Grafiken

 

Mhhh,

das ist jetzt doch mal merkwürdig. Um den Code zu nennen: Das sind im CSS Code diese Teile:

Der XHTML Code ist folgender:
Nun wunder ich mich in der Tat über das Ergebnis, dass bei dir Website im Firebird normal aussieht und bei mir zerrissen wird.

Kann bitte mal ein anderer Firebild/Mozilla Nutzer einen Blick drauf werfen, da dann evtl. das Problem nur bei mir liegen würde.

Und bezüglich Layout: Naja, ich habe versucht mal etwas ganz anderes zu machen und da sich die Website ja um Wallpaper dreht, sollte das Layout auch an ein Wallpaper erinnern. Aber ich muss noch viel dran machen.

Hab`s mir grade im Firebird und im Opera angesehen.

Opera: Alles ok.
Firebird: Sieht ziehmlich blöd aus. Habe also das selbe wie du, wenn du nach etwas scrollen zu einem halbiertem Inhalt kommst. "

Hmm... Vermutung: Dein Mozilla macht aus den div's das, was sie eigentlich sind: Zeilen, sprich div-links und div-rechts erscheinen untereinander anstatt nebeneinander. Hast Du es probeweise mal mit table, tr und td versucht?
Sprich

Ich möchte ja gerade auf Tabellen zu Gunsten von XHTML verzichten.... Aber ich habe schon mal einen entscheidenen Hinweis erhalten.

Oha, das ist eine Aussage, die mich denn jetzt doch neugierig hat werden lassen: inwiefern 'zugunsten XTHML'? Tabellen sind meines Wissens in XHTML2.0 weiterhin vorgesehen und unter 1.1 ebenso noch ganz normal (wie bisher) zu verwenden möglich, weswegen ich bislang auch diese weiter genutzt habe - also weniger gut bzw. sollte man nicht machen?

Zum Thema nochmal: das mit der Darstellung verwundert mich weiter nicht... im Grunde müsste man nämlich das ganze so interpretieren:
*********400px mit id page*************
------200px mit id left----
------200px mit id right---
***********************************

... also wie eben zwei Zeilen, die man untereinander zu schreiben hat, so wie es der reine HTML-Code im Grunde sogar auch vorgibt: zwei div-Zeilen, die wiederum von einer anderen div-Zeile umklammert werden. Daß die beiden Zeilen mit 200px, wie im CSS festgelegt, zufälligerweise jeweils die Hälfte der grösseren mit 400px einnehmen, hat weiter in der Darstellung nichts zu bedeuten im Sinne von, daß die Zeilen gewünscht nebeneinander dargestellt werden sollten anstatt untereinander.

Versuch's vielleicht mal im CSS mit margin-left: 200 px (bei #right natürlich), sprich die rechte Box mit 200px Einrückung starten zu lassen... und dann den HTML-Code so umzuschreiben, daß das ganze bestenfalls sich innerhalb einer Zeile befindet und nicht in zwei verschiedenen div-Einheiten, so wie es mit Deinem jetzigen Code der Fall ist, da <div>links</div><div>rechts</div> nunmal zwei Zeilen ergeben und nicht zwei nebeneinander darzustellende Elemente...

Gegenfrage an Dein Verständnis: was würdest Du von einem Browser erwarten, wie er folgende Zeilen darstellt:
I. <div>Test1</div><div>Test2</div>
II. <p><div>Test1</div><div>Test2</div></p>
Und nun ersetze gedanklich mal das p durch Dein div... worin soll der Unterschied in der Darstellung liegen? (ein IE stellt in dem Fall denn wohl einfach nur das dar, was dieser hineininterpretiert, nicht das, was er darstellen sollte - laß diesen mal das ganze im konformen Standardmodus anzeigen)

Gruß,
Lars

Natürlich sind weiterhin Tabellen möglich, aber sie nicht zu Layoutzwecken entfremdet werden. Eine Tabelle ist ausschließlich zum Darstellen von Daten zu nutzen.

Das Layout hingegen soll, sofern möglich, komplett in CSS definiert sein. Dass die Div-Container untereinander stehen ist im übrigen auch Teil von XHTML. Inhalte sollen im Quelltext logisch aufeinander folgen. Wenn du Beispielsweise eine Navigation hast, welche auf deiner Website am unteren Bildschirmrand zu finden ist, wäre es möglich diese weiter vorne in deinem Quelltext zu schreiben und mittels CSS nach später so auszurichten, dass sie im Layout wieder unten erscheint.

Vorteil ist, dass bei deaktivierten CSS die Website noch hervorragend zu betrachten ist, Inhalt und Layout komplett getrennt sind.

Im Layout liegt auch mein Problem im Moment. Da ich die beiden Container mittels Float ausgerichtet habe, ist für meinen 400er Container kein Grund vorhanden länger zu werden.

Daher muss ich am CSS Code noch ein bischen feilen und eine der Boxen nicht durch Float ausrichten. Ist vom Prinzip keine große Arbeit, aber damit wird mein eigentliches Konzept durcheinander gebracht. Denn sobald der nicht-gefloatete Container länger ist als der gefloatet Container, umfließt dieser den anderen und meine netten Spalten lösen sich auf.

Trotzdem Danke, muss mal schauen wie ich das ganze hübsch lösen kann. Ein Grund, warum ich XHTML immer noch nicht als perfekte Lösung ansehe: Nur schwer kompatibel zu halten.

... und wieder was dazugelernt - danke für die Erläuterung, Reimer, und tut mir leid, daß ich bei Deinem Problem denn leider Dir nicht weiter groß (mehr) helfen konnte...

Gruß,
Lars

Naja, eine Lösung hast du mir ja gegeben und ich hatte es auch schon selber überlegt, ob ich nicht wieder die gute alte Tabelle dafür ausgraben sollte. Ich sehe das allerdings zur Zeit als Lernphase für XHTML/CSS an und man lernt ziemlich schnell dazu.

Hier nochmal ein paar Links dazu:
http://css.maxdesign.com.au/selectutorial/index.htm
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
http://www.alistapart.com