CSS / Probleme beim Positionieren

Buzzdee

Hallo,

ich habe gerade Firefox 0.8 de installiert und mir gleich mal meine Seiten angeschaut. Dabei habe ich einen riesigen Schreck bekommen.

Seite 1
Seite 2

Bei der zweiten Seite kann ich es ja evtl. noch verstehen, da ich hier wirklich getrickst habe, aber bei Seite 1 war ich doch sehr verblüfft, vor allem weil der CSS Code dort 100% valide ist (bei Seite 2 zu 99% bis auf die IE specials).

Hier mal die stylesheets :

Seite 1

Code

html { height:100%; margin:0; padding:0; }
body { font-size:11px; background-color:#B4B6CD; font-family:Verdana,Arial,sans-serif; color:#000040; height:100%; margin:0; padding:0; }


#rahmen { width:100%; height:100%; text-align:center; }
#box1 { text-align:left; left:20%; width:60%; height:25%; margin-top:20px; padding:5px; background:#EED751; overflow:auto; border-style:solid; border-color:#000040; border-width:1px; }
#box2 { text-align:left; left:20%; width:60%; height:60%; margin-top:20px; padding:5px; background:#EED751; overflow:auto; border-style:solid; border-color:#000040; border-width:1px;}
#box3 { width:37px; min-width:37px; }

Seite 2

Code

html { height:100%; margin:0; padding:0; }
body { font-size:11px; background-color:#004080; font-family:Arial,sans-serif; color:#D0CC68; height:100%; margin:0; padding:0; }


.ro { background:url("gfx/box_ro.gif") top right no-repeat; margin:0; padding:0; height:100%; }
.lo { background:url("gfx/box_lo.gif") top left no-repeat; margin:0; padding:0; height:100%; }
.ru { background:url("gfx/box_ru.gif") bottom right no-repeat; margin:0; padding:0; height:100%; }
.lu { background:url("gfx/box_lu.gif") bottom left no-repeat; margin:0; padding:0; height:100%; }
.inhalt { margin-top:15px ; padding:0px; color:#000000; background:#c1bd75; height:90%; width:75%; overflow:auto; }


.rahmen { width:100%; height:100%; text-align:center; }
.box1 { width:33%; height:100%; float:left; margin:0; padding:0; background:transparent; }
.box2 { width:33%; height:100%; float:left; margin:0; padding:0; background:transparent; }
.box3 { width:33%; height:100%; float:left; margin:0; padding:0; background:transparent; }
.clear { clear: both; }

Alles anzeigen

Auf der Seite 1 sollten die Textboxen eigentlich mittig stehen und auf der Seite 2 die Textboxen inkl. Scrollbalken innerhalb der 3 Grafik-Boxen, aber irgendwie scheint FF die Positionierungen nicht korrekt zu interpretieren. Unter IE6 sieht natürlich alles stimmig aus ...

Any ideas ?

Edit: Ups, sorry für's posten in's falsche Forum
Edit 2 : Ach, Opera 7 hat genau die gleichen Darstellungsprobleme wie FF ...

Belly

Mmh.
Also du verwendest du haufensweise styleclasses, die du nie deklariert hast!
Was bitte soll das mit:
<b class="large"> auf Seite 1 oder

<div class="box1">
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu"> auf Seite 2?

Das, was du da machst ist vorne und hinten nicht valide. Zumindest aber nicht sinnvoll.
Im übrigen spricht es kaum für ein Problem vom Firebird, wenn Opera es genauso macht.
Eher für einen üblen Hack, den nur der IE versteht. Wie hast du diese Seite denn erstellt?

Du solltest dir die Seite übrigens unbedingt mal im Konqueror anschauen. Da ist sie nämlich total zerhäckselt!

Buzzdee

Hallo Belly,

hmm, also da is schon alles richtig deklariert. Ich habe jetzt nur die für's positionieren relevanten Teile aus der stylesheet datei hier angegeben.

Auf Seite 1 habe ich nur mit IDs gearbeitet und die sind ja alle da ...
#rahmen ...
#box1 ...
#box2 ...
#box3 ...

und auf Seite 2 mit Classes (die aber auch da sind wenn du auf den von mir dargestellten code schaust).

Und zur Validität (zumindest von Seite 1) : jigsaw.w3.org

Belly

Aber in der Datei stylesheet.css steht auch nicht mehr drin, als du hier gepostet hast!
http://www.one-brain-cellers.de/lightsaber/stylesheet.css

Ich hab mir das alles schon ein bißchen gründlicherlicher angeschaut - und ehrlich gesagt kapiere ich nicht, was du mit diesen ganzen Schachtelungen bezwecken willst.

Das das Stylesheet selbst validiert habe ich auch gesehen.
Nur eine valide CSS-Datei nützt halt auch nix, wenn die zugehörige HTML-Seite irgendwie völlig andere Dinge enthält und obendrein nicht validiert wirklich.

Buzzdee

Hallo Belly,

hmm, ok. Also, diese class="large" war wirklich falsch. Lag daran, das ich das stylesheet aus einem anderen projekt übernommen habe.

Konzentrieren wir uns mal auf Seite 1, die ist weniger kompliziert "designed".

Die beiden Boxen sollen, egal welche Fenstergröße oder Auflösung, immer in der Mitte des Browserfensters stehen. Der Text soll innerhalb der Boxen scrollbar sein. Das ist eigentlich schon alles.

Zu Seite 2:
Diese Verschachtelung hat folgende Gründe :
Einmal das der Text in Boxen erscheint, die einen grafischen Hintergrund mit runden Ecken haben (Tutorials hierzu gibt's haufenweise, das beste deutsche dazu auf der Seite http://www.andreas-kalt.de). Die Verschachtelung ist (soweit ich rausgefunden habe) die einzige Möglichkeit den Text innerhalb der Grafikbox zu lassen und auch innerhalb der Boxen scrollbar zu machen. Ausserdem sollen auch diese Boxen sich an das Browserfenster anpassen.

Im Grunde gehts mir aber nicht um die Technik der Gestaltung der Textboxen, sondern darum das FF auf Seite 1 die Boxen nicht browsermittig positioniert und der div-Container mit dem Text auf Seite 2 nicht korrekt in denm anderen div-Container positioniert wird.

Wie gesagt, das alles sieht korrekt unter IE aus, ohne dabei irgendwelche Hacks oder Tricks zu benutzen. Und der Code ist reine "Handarbeit" (kein Frontpage oder Dreamweaver wisch-wasch)...

Buzzdee

So, Seite 1 geht jetzt.

Ich habe den div-Container "Rahmen" entfernt und das left-Attribut durch margin-left ersetzt.

Sieht schon besser aus als vorher. Nur warum ich einen Scrollbalken im Browserfenster habe verstehe ich noch nicht ... egal, tut ja nicht weh.

bugcatcher

Zum Test2:

Also wenn ich mir anschaue, was der IE da macht, würde ich gerne wissen, warum. Ich sehe nirgends im Quelltext, dass er den Inhalts-Teil in die mitte von den ganzen "Box"en-Teilen schieben soll.

(übrigends gibt es für das "vertical-align" (im "rahmen") keinen wert "center" ... das heisst "middle")

Daher würde ich von so aussagen wie "Unter IE6 sieht natürlich alles stimmig aus ... " Abstand halten. Zwar ist das CSS bis auf den einen angesprochenen Fehler und die IE-Only-Scrollbalken "valide", aber "das alles sieht korrekt unter IE aus", ist leider wunschdenken. Nur weil das Ergebnis das ist, was Du erreichen wolltest, ist noch lange nicht der Weg der richtige. Hier handelt es sich um einen klassischen Fall einer "doppelten
Negation": Programmierer produziert fehlerhaften (zumindest in Hinsicht auf die Logik) Code, den IE auch noch falsch interpretiert, wobei zufälligerweise das richtige rauskommt.

Mozilla und Opera hingegen machen das im aktuellen Beispiel absolut richtig.

In keinem der im box-div enthaltenden "rahmen"-divs (ro,lo,ru,lu) wird ein Abstand zum Rand festgelegt, also haben sie alle 100% Ausbreitung. Ein Hintergrundbild erzwingt keinerlei abstand. Es liegt ja auch im Hintergrund.

Eine Verehrbung der "text-align:center; vertical-align:center(middle);" aus der "rahmen"-Klasse ist auch unzulässig.

Die inhalds-divs haben eine "height:90%; width:75%;"-ausbreitung. Aber die positionierung wurde nicht festgelegt und ist daher im Div standardgemäss oben links. Und genau dort fängt bei Mozilla das 75%-breite und 90%-Hohe inhalts-Div an. Mozilla machts also absolut richtig.

Jetzt frag ich dich: Ist es immernoch richtig, dass der IE das Inhalt-Div "mittig" anzeigt, obwohl man es ihm nirgends gesagt hat?

Merke: Nur weil es der IE so anzeigt, wie man es sich wünscht, ist es noch lange nicht richtig. Diesem Trugschluss fielen schon viele "Webdesigner" zum Opfer.

(Wobei ich amSchluss einen Wehrmutstropfen vergiessen muss. Beim "margin-top:15px;" bei den inhalts-divs hätte ich was anderes erwartet. Als ergebnis Erwartet.)

Man möge mich zurechtweisen, wenn meine Ausführungen einen Denkfehler beinhalten. Dann werde ich mich natürlich entschuldigen und das Gegenteil behaupten. ; )

Buzzdee

Hallo bugcatcher,

danke für die ausführlichen Hinweise, ist bei mir angekommen.

Bei der Programmierung habe ich halt die "Hilfe" aus verschiedenen anderen Quellen (Foren, Tutorials) genommen bis das Ergebnis für mich auf meinem System so aussah wie ich es mir gewünscht habe. Das dies aus einer, wie du es nennst, doppelten Negation entstanden ist halt Pech für mich.

Das ich mich auf die Darstellung des IE nicht verlassen sollte habe ich nun sehr eindeutig verstanden. Ich wollte jetzt hier auch keine Diskussion über die Mängel des IE und die Vorzüge alternativer Browser anfachen oder mich für die Art meiner CSS-Programmierung rechtfertigen.

Mich würde jetzt noch gerne ein Lösungsansatz interessieren um dem Darstellungsproblem den Garaus zu machen. Ich habe jetzt schon mit verschiedenen Möglichkeiten der Positionierung rumgespielt, habe aber leider das "falsche" Ergebnis des IE noch nicht zufriedenstellend für "korrekte" Browser lösen können.

bugcatcher

Die height:100%; -Angabe ist recht schwer brauchbar einzusetzen. ich würde für das was du vorhast immer(noch) einen table nutzen, auch wenn das nicht sonderlich schön ist. aber html4.01 eignet sich für sowas gut und so wird es auch von allen browsern brauchbar verstanden.