Zur Boardunity Forenstartseite
  #1  
Alt 01.02.2004, 16:54
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990

Mozilla vs. XHTML/CSS - Containerhilfe gesucht


So, ich versteh mal wieder die Welt nicht, warum sich Mozilla über solche in Problem aufregt. Die Lage ist folgende

Code:
+---------+
|+---+---+|
||Box|Box||
|| 2 | 3 ||
|+---+---+|
|  Box 1 ||
+---------+
  • Box 1 ist 400px breit
  • Box 1 enthält eine Hintergrundgrafik
  • Box 1 enthält die Boxen 2 und 3.
  • Box 2 ist 200 Pixel breit
  • Box 3 ist 200 Pixel breit

Ziel ist es, dass die Hintergrund auf der kompletten Höhe der Boxen 2 und 3 angezeigt wird. IE und Opera machen (natürlich) keine Probleme, aber Mozilla nervt rum. Das Problem liegt daran, dass er die Box 1 nicht den Inhalt (Box2/3) nicht anerkennt. Gleichzeitig verschwinden die Boxen 2 und 3 im HTML Nirvana.

Code:
+---------+
+---------+

+---+---+
|Box|Box|
| 2 | 3 |
+---+---+
HTML: http://4desktops.de/index.php
CSS: http://4desktops.de/default.css

Also, wieso weigert sich mein Freund Mozilla die Box1 höher als einen Pixel darzustellen?
  #2  
Alt 01.02.2004, 18:21
Benutzerbild von OrcaDesign
elitäre Pappnase
 
Registriert seit: 12.2003
Ort: "Berlin Nebenstelle", vor Köln
Beiträge: 150
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

__________________
Lars
~ Mein Haus, mein Auto, meine Yacht ~
  #3  
Alt 01.02.2004, 22:58
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
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

:/

  #4  
Alt 02.02.2004, 10:15
Benutzerbild von OrcaDesign
elitäre Pappnase
 
Registriert seit: 12.2003
Ort: "Berlin Nebenstelle", vor Köln
Beiträge: 150
... 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
mozilla-vs-xhtml-css-containerhilfe-gesucht-unbenannt.jpg  

__________________
Lars
~ Mein Haus, mein Auto, meine Yacht ~
  #5  
Alt 02.02.2004, 11:25
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
Mhhh,

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

Code:
#paper {
	background: url("img/paper.jpg");
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 400px;
}
#left {
	width: 200px;
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0;	
}
#right {
	width: 200px;
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 0;	
}
Der XHTML Code ist folgender:
Code:
<div id="page">
	<div id="left">
		Linker Inhalt
	</div>
	<div id="right">
		Rechter Inhalt
	</div>
</div>
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.

  #6  
Alt 02.02.2004, 12:20
Mitglied
 
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 777
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. "

__________________
Patrick Gotthardt
Patrick Gotthardt on Software
  #7  
Alt 02.02.2004, 13:14
Benutzerbild von OrcaDesign
elitäre Pappnase
 
Registriert seit: 12.2003
Ort: "Berlin Nebenstelle", vor Köln
Beiträge: 150
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
Code:
<table><tr id="page">
	<td id="left">
		Linker Inhalt
	</td>
	<td id="right">
		Rechter Inhalt
	</td>
</tr></table>

__________________
Lars
~ Mein Haus, mein Auto, meine Yacht ~
  #8  
Alt 02.02.2004, 15:10
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
Ich möchte ja gerade auf Tabellen zu Gunsten von XHTML verzichten.... Aber ich habe schon mal einen entscheidenen Hinweis erhalten.

Zitat:
er beinhaltet nur zwei gefloatete elemente, und die werden ja bekanntlich aus dem dokumentfluss herausgenommen, analog wie mit position:absolute positionierte elemente.

  #9  
Alt 02.02.2004, 21:59
Benutzerbild von OrcaDesign
elitäre Pappnase
 
Registriert seit: 12.2003
Ort: "Berlin Nebenstelle", vor Köln
Beiträge: 150
Zitat:
Ich möchte ja gerade auf Tabellen zu Gunsten von XHTML verzichten
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

__________________
Lars
~ Mein Haus, mein Auto, meine Yacht ~
  #10  
Alt 03.02.2004, 15:45
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
Zitat:
Zitat von OrcaDesign
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?
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.

  #11  
Alt 03.02.2004, 15:58
Benutzerbild von OrcaDesign
elitäre Pappnase
 
Registriert seit: 12.2003
Ort: "Berlin Nebenstelle", vor Köln
Beiträge: 150
... 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

__________________
Lars
~ Mein Haus, mein Auto, meine Yacht ~
  #12  
Alt 03.02.2004, 16:29
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
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

Antwort


Stichworte
-

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Problem bei Mozilla Jan Stöver Programmierung und Datenbanken 7 13.01.2004 13:57






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24