[CSS] Wieder IE Bugs, und Probleme mit floats, clears u. fixed (Layout-Diskussionen)

[Enchanter]

Hallo Ihr,

ich hab Ärger mit meinem CSS Layout.
Ich brauch jemanden der mir zeigen kann, was hier falsch läuft.
Ich seh mal wieder den Wald vor lauter Bäumen nicht.

Irgendwann, hab ich das hinbekommen was ich wollte(Fließtext),
hab aber dabei die "html body div#bodybox" in voller grösse verloren.
Die sollte eigentlich weiss mit solid 1px Border hinter dem ganzem kram prangern.
Links, Rechts und Oben sollten 15px grauer Ränder sein.
Ich denk wenn ihr euch den Code anseht wird das klar.

Warum hab ich das schon hinbekommen das die Box mitwächst?
Und was hab ich jetzt getan, damit sie verschwindet?

Mein zweites Problem ist, das der Text im Content Teil eigentlich nicht das Bild umfließen sollte,
sondern in der Spalte neben dem Bild nach unten wachsen sollte.
Ich hatte dehn Text bis eben in einem eigenem div,
dann hab ich allerdings das Problem, dass ich keinen Fließtext realisiert bekomme.
Die Lösung schien ein float:left float:right wie im Header.
Aber dann wächst egal mit welchem overflow,
je nach Browser der Content einfach nach Rechts und nicht unten.
Was ist der unterschied zum Header?
Es folgten width:auto und height Attribute.
Es ergab sich allerdings keine Abhilfe.

Also im Prinzip die selbe Frage wie oben. Wo zur Hölle ist der Fehler?
Das gehört doch nicht so oder wie? Wie soll man webseiten machen,
wenn der eine Browser einen horizontalen, und der andere einen vertikalen Scrollbalken darstellt?
Wo ist spezifiziert, ob ein div aufgedrückt, oder umgebrochen wird?

Auch die 15px padding links neben dem Bild auf der Linken Seite,
sehen im IE irgendwie breiter aus. Ich schätze ich hab irgendwas vermurkst.
Das mistding von IE ist nun auch schon 5 mal abgeschmiert.

Was mir in diesem Layout auch nicht gelang, ist position:fixed für den IE umzusetzten.
Das Problem mit dem existierendem Hack ist, dass ich in meinem Fall kein Element,
sondern den body als scollbaren-Bereich haben will.
D.h. Der Scrollbalken soll nach ganz rechts;
aber nur der Text unten Rechtsmittig soll unter der Headline durch scrollen.
Sollte das möglich sein, soll natürlich die bodybox, 15px vor dem Boden der Seite aufhören.

Damit ich noch was sinnvolles beitrage, das hier gezeigte Layout provoziert, reproduzierbar einen Render-Bug im IE.
Nach meiner letzten Action, dem auskommentieren des positionierungsteils; der #content ebene.
Verschwindet im IE 6.0.2800 SP2 der blaue hintergrund beim Menu,
[der noch durch ein Bild ersetzt werden soll].
Wechsele ich aber in den Firefox und wieder zurück, ist das Blau plötzlich da.
Ich hab fast das gefühl, der IE macht nur was wenn der Fall von den Programmierern beachtet wurde.

Gruss und ich hoffe mal irgendjemand liest bis hier.
Achtung Bastelcode. Ich will die Übersicht nicht ganz verlieren.

[Enchanter]

Auch nett jetze.

[1]
Einfach im IE6 öffnen, akualisieren, und den Browser im Speichernirvanna wiederfinden.
Bock ne Website zu schreiben? Macht laune die css Engine vom IE.
Ein 6er pack Bier, und den passenden Ruhm, für den ersten BO.

Ich bin jetzt zwar dicht dran, also die Spalte ist schon richtig,
wenn man das width aus der contentbox nimmt.
Die IE Fragen bleiben aber bisher unbeantwortet.
Vorallem das fixen am body würde die hälfte lösen.

Wenn besagtes width weg ist, probiert im IE mal aktuallisieren, und dann rechtsklick in die Darstellung.
Klack weg isser.

Und _Mir auch völlig unerklärlich, obwohl ein kollege gerade sagt: "Das kennt man!".
Warum sind die Zeilenanfänge des Contents im IE nicht bündig mit diesem Code?
Ich mach jetzt schluss, das Teil macht mich fertig.
Später noch mehr dazu.

Gruss nochmal

[1]

[zettacht]

Hallo!


Wuerde mir das ganze schon gern mal ansehen - jetzt mal keine Garantie auf Loesung :D - nur kann ich keine .rar-Dateinen entpacken. Vielleicht kannst Du es ja noch zusaetzlich zippen?


MfG
zettacht

[Enchanter]

Es gibt unrar und winrar_trials ich find das schon recht faul,
mich nach ner zip zu fragen.
Wenn du dir etwas ansehen möchtest musst du es schon entpacken.
Aber hier, weil du mitgucken magst. Ich denk in dem Script findet jeder was.

[morpheus]

@Enchanter
Du haettest auch gleich koennen das ZIP-Format verwenden, da ich persoenlich das RAR-Format auch beschissen finde und keine Lust habe "Trials" zu installieren, um es entpacken zu koennen. Allerdings soweit kein Problem, wenn man einen guten Open-Source Packer wie 7-zip verwendet, da er alle verbreiteten Formate unterstuetzt.

Ich werde es mir dann auch mal ansehen, wenn ich mehr Zeit dafuer habe.

[zettacht]

Off Topic
@Enchanter: Entschuldige bitte, aber ich lass mich hier von Dir mit Sicherheit nicht als faul bezeichnen! Wenn Dir geholfen werden soll, bist IMO Du (!) dafuer zustaendig, dass jede/r die Datei zu sehen bekommt. Es kommt naemlich gelegentlich vor, dass man auf Rechern, die sich nicht im persoenlichen Besitz befinden, keine Rechte zum Installieren hat bzw. mit der vorinstallierten SW vorlieb nehmen muss.

Na gut, ich habe meinem Unmut Luft gemacht. Ueberleg Dir bitte fuer die Zukunft Deine Aussagen noch einmal bevor Du sie postest!


zettacht

[Enchanter]

Ich bin jetzt ein ganzes Stück weiter gekommen.

Eins der hauptprobleme war, das floaten nur klappt wenn width angegeben ist.

Nach dem Link von Fellohr über CSS Threads,
brutalem 5.5 6.0 und padding gedönse, hab ich ein praktikables fixes Layout.
Code(nur Technik) gibts per PN im beliebtem Format. ;-)
Ich poste erst wieder archive, wenn es keine konkreten Fragen mehr gibt.
Weil es andersherrum komplizierter währe, hier noch die offenen Fragen.
Bitte einfach von diesem Post wegquoten.

Warum lässt sich innerhalb meines Contentbereiches, die Sache mit float left;right nicht nutzen?
Ich positionier jetzt hauptsächlich mit margin.

Gibt es ein schönes Tut das mir erklären kann, was es mit der magischen Breite 100% auf sich hatt?
Manche dinge greifen in den Browsern nur, wenn tatsächlich genau 100% entstehen.
Das macht es mir schwer meine Aussenabstände zu realisieren.
Also schreibe ich bspw. 100% - marginPx Spinnen plötzlich alle anderen Sachen.
Mach ich das nicht,, ist 100% = 140% *schulterzucks, wer hatt den scheiss nur geschrieben.

Ich versteh nicht warum eine div mit !breite! in allen Browsern anders wächst.
Warum funktioniert ein <div style="width:100%"><div style="margin:0 auto"></div>;
fast immer besser ale ein width 100%?
Warum wächst es manchmal nach rechts, und manchmal nach unten.
Bin ich da bescheuert oder ist das willkür?
Müsste es nicht ein attribut geben um das attribut overflow zu relativieren?
Also visible bottom oder so?

Wie soll ich an das Layouten rangehen, wenn Breiten abstecken, tatsächlich keinen sinn hatt?
Als ich mal ein echtes Layer Layout machte, hatt mich mein Chef fast gekilled, sinnvoll?

Wenn das Layout nun fixed ist; wärs dann frevel, die besagte Bodybox, als z-index:0 zu fixieren?
Andernfalls mach ich mir ja das für den 5.5er extrem komplizierte Scrolling wieder kaputt.

Nur um es nicht zu vergessen, ich würde gern wissen, ob die weiteren in den Achiven oben gezeigten Fehler Bugs sind oder Blödheit.
Vorallem die fliegende Schrift ist doch echt seltsam gewesen.
Die Abstürze, sind das schlechte exceptions, oder doch Speicherfehler?
Unsicher bin ich nun, weil ein Code hier liegt, der 100% Auslastung erzeugt.
Nur ein neustart hilft. Wenn ich verstanden hab warum, poste ich auch dehn.

Ich werd da sooderso noch ne weile dran basteln, währ froh über jedliche Intensionen.

[Enchanter]

Für alle die noch mitlesen, hier der letzte Versuch.
Allein um das Layout endlich fertig zu bekommen,
stehen nun noch die folgenden Probleme von IE5.5 und 6 an.

Der Top und Bottom Border, ist nicht einen Pixel hoch; warum?

Ganz unten auf der Seite findet sich bei Maximiertem Fenster ein ca 1px breiter Schein,
Man kann den scrollenden Content durchschimmern sehen.
Das will ich natürlich nicht, gibt es abhilfe?
Als Lösung käme auch ein Layout in Frage, das so scrollt wie meines aber die Ränder sauberer realisiert.

Wie man sehen kann, endet der Scrollbalken nicht genau am Ende der Seite.
Kann ich da etwas tun?

Zittert speziell der IE5.5 bei euch auch beim Scrollen?

Davon mal abgesehen, was macht der IE5.5 Bei der Positionierung von Menu und Submenus?
Kann ich die Headlines aufdrücken so das es alle drei Kanidaten es nahezu gleich machen?

Muss ich aufgeben wegen der 15px Ränder?
Muss ich aufgeben wegen des Scrollings am Body?

Übrigens kann ich weder Abstürze oder Prozessorlast mit dem IE, wie oben beschrieben,
heute Nachmittag noch einmal nachstellen.
Ich hab nun aber auch keine Idee mehr um den dritt Einfluss hier auf drei Maschinen zu suchen.
Hmm, aber ein Absturz muss doch auch Gründe haben.
Weil hier keine Einwände kamen, geh ich davon aus, ihr konntet das rekonstruieren?

Hier noch das neue HTML:

[Enchanter]

Ich sterb hier gleich sieben Tode.
Neustart des Rechners heute Morgen.
IE6 -> alle Fehler weg, alle zwar ausser die Schrift und dem Pixel Loch ganz unten bei Maximiertem Browser,
aber da war ich gestern noch nicht. Remoteverbindung anderer PC -> Da läuft die Session noch.
In dem IE5 sind alle Fehler von gestern zu sehen.
Neustart dieser Win2K Kiste. -> Der IE5.5 Macht fast alles.
Ich schätze es währe sehr nützlich, wenn IRgendJemand von euch mal seine Erfahrungen,
mit den Codes oben postet.

[morpheus]

IE6 -> alle Fehler weg, [...]
Kann ich mir schwer vorstellen - nicht, dass es nicht moeglich waere man hat auch schon davon gehoert - allerdings glaube ich in diesem Fall eher, dass du was am Code geaendert hast? Haenge doch nochmal den neuen Code an. Bei deinem alten habe ich die von dir genannten Probleme mit dem Border oben und unten.
Das mit dem "Pixelloch" - du meinst den Streifen ganz unten bei welchem der Text beim Scrollen durchschimmert? - kann ich auch nachvollziehen allerdings warte ich mal ab, ob du nicht doch eine neuere Version des Codes hast.


Ich schätze es währe sehr nützlich, wenn IRgendJemand von euch mal seine Erfahrungen, mit den Codes oben postet.
Also allgemein zum Code. Die Definitionen "html body div" sind nicht noetig - du kannst das Element auch direkt mit div oder #menu ansprechen. Desweiteren ist es fuer mich nicht ersichtlich warum du dir 4 Klassen/Divs fuer den Border anlegst und nochmal 4 fuer den Margin. Das sollte anders auf jeden Fall auch realisierbar sein.

Angaben wie right, bottom und min-width sind mit Vorsicht zu geniessen, da die ersten zwei der M$ IE 5.5 nicht kennt und das letzte der M$ IE allgemein nicht.

[Enchanter]

Kann ich mir schwer vorstellen - nicht, dass es nicht moeglich waere man hat auch schon davon gehoert - allerdings glaube ich in diesem Fall eher, dass du was am Code geaendert hast? Haenge doch nochmal den neuen Code an. Bei deinem alten habe ich die von dir genannten Probleme mit dem Border oben und unten.
Das mit dem "Pixelloch" - du meinst den Streifen ganz unten bei welchem der Text beim Scrollen durchschimmert? - kann ich auch nachvollziehen allerdings warte ich mal ab, ob du nicht doch eine neuere Version des Codes hast.

Es liegt daran, das meine letzte Tat gestern, das nutzbare Typo3 System war.
Der Content in der Mitte drueckt erst die beiden dicken Border platt, und overflowed dann.
Gestern hab ich noch im Template gearbeitet.



Also allgemein zum Code. Die Definitionen "html body div" sind nicht noetig - du kannst das Element auch direkt mit div oder #menu ansprechen.

Ich fand es sauberer, ich habe auch vor, in Zukunft ids und Klassen zu trennen.



Desweiteren ist es fuer mich nicht ersichtlich warum du dir 4 Klassen/Divs fuer den Border anlegst und nochmal 4 fuer den Margin. Das sollte anders auf jeden Fall auch realisierbar sein.

Ganz einfach, weil der content Teil von Browserkante bis Kante gehen muss.
Andernfalls, fände sich der Scrollbalken ja nicht dort wo er hin soll,
sondern würde 15px vor dem Rand aufhöhren.
Wenn man nicht aufpasst, kann man sogar die Ebene über den Balken schieben.
Hatt sich aber eh erledigt, der Scrollbalken kommt jetzt aus Browserfreundlichkeit direkt ans Content div.
Von unten bis genau unter dehn Header.



Angaben wie right, bottom und min-width sind mit Vorsicht zu geniessen, da die ersten zwei der M$ IE 5.5 nicht kennt und das letzte der M$ IE allgemein nicht.
Gut das du es sagst, ich bau es gerade wieder von Grund auf neu...
Allerdings liesse sich ja, ohne Bodybalken, der weisse umrandete Teil(bodybox); wieder leichter realisieren.
Wie kann hier, aber unter diesen vorraussetzungen, genau 15px Rand realisieren?
(, alternativ 2% linksrechts und 3% obenunten)
Ein height 96% interessiert den IE6 speziell ja auch nicht.
Mein Content hatt niemals die genau passende Grösse zum Aufdrücken.
Diese Box muss aber wie gesagt an allen ecken mit 15px Raum verankert sein.
Der Rest ist dann leicht.

Ein weiteres grosses Problem an den Codes oben ist, das irgendwo immer mit padding oder margin gearbeitet wurde.
Je nach Browser und Situation, sind 100% dann zuviel.

Hier noch frischer aber aktueller Code:

[morpheus]

Ich fand es sauberer, ich habe auch vor, in Zukunft ids und Klassen zu trennen.
Das ist etwas anderes. Aber es ist ganz einfach sinnlos sprich Overhead das "html body" anzugeben, weil so gut wie alles eine Tochterelement von html und body ist.


Ganz einfach, weil der content Teil von Browserkante bis Kante gehen muss. Andernfalls, fände sich der Scrollbalken ja nicht dort wo er hin soll, sondern würde 15px vor dem Rand aufhöhren.
Ich verstehe jetzt zwar nicht ganz was du damit meinst aber die Scrollbar wandert fuer gewoehnlich nicht, sondern bleibt immer am rechten Rand fixiert. Oder meinst du eine Scrollbar fuer einen Div-Bereich?


Allerdings liesse sich ja, ohne Bodybalken, der weisse umrandete Teil(bodybox); wieder leichter realisieren.
Wie kann hier, aber unter diesen vorraussetzungen, genau 15px Rand realisieren?
(, alternativ 2% linksrechts und 3% obenunten)

[QUOTE=Enchanter]Diese Box muss aber wie gesagt an allen ecken mit 15px Raum verankert sein. Der Rest ist dann leicht.
Was sagst du dazu?

<style>

html, body {
overflow:hidden;
height:100%; width:100%;
margin:0px; padding:0px;
}

div {
height:92%;
margin:2% 3% 2% 3%;
padding:0px;
background:#eee;
}

</style>

<body>
<div>
Test
</div>
</body>

Ein weiteres grosses Problem an den Codes oben ist, das irgendwo immer mit padding oder margin gearbeitet wurde.
Je nach Browser und Situation, sind 100% dann zuviel.
Klar sind 100% Breite/Hoehe zuviel, wenn diese dann noch ein padding/margin hat.

[Enchanter]

Das ist etwas anderes. Aber es ist ganz einfach sinnlos sprich Overhead das "html body" anzugeben, weil so gut wie alles eine Tochterelement von html und body ist.

Da spricht wohl nichts gegen. Schade, ich fands hübscher wegen dehn Browserhacks.



Ich verstehe jetzt zwar nicht ganz was du damit meinst aber die Scrollbar wandert fuer gewoehnlich nicht, sondern bleibt immer am rechten Rand fixiert. Oder meinst du eine Scrollbar fuer einen Div-Bereich?

Das ist ja ein "fixed" Layout das in allen drei laufen soll.
Also ja, es ist nur die div Scrollbar am ganzen rechten Rand zu sehen.
Der html, body overflow ist hidden.

--

Dein Code ist nice, ich geh davon aus, das du das im 5.5er getestet hast.
Sonst muss ich das Morgen wiederufen.
Ich bin kurz vor Feierabend auf folgende Lösung gestossen.
Wundert euch nicht über die unfertigen unteren Boxen,
da bin ich heute stehen geblieben und such noch ne gute Lösung.
Es ist aber fieses rumgehacke.

Magst du mir noch erklären wieso 92% und nicht 96 oder 95?
Warum bei dir jetzt height, aber kein width, schnall ich auch nicht.
In welchen Situationen darf man den mit margin platzieren?

[morpheus]

Das ist ja ein "fixed" Layout das in allen drei laufen soll.
Also ja, es ist nur die div Scrollbar am ganzen rechten Rand zu sehen.
Der html, body overflow ist hidden.
Ich sehe dennoch die Notwendigkeit nicht das so kompliziert zu loesen wie du es gemacht hast. ;)


Dein Code ist nice, ich geh davon aus, das du das im 5.5er getestet hast.
Kannst du auch. Selbst der M$ 5.01 stellt es so dar.


Magst du mir noch erklären wieso 92% und nicht 96 oder 95? Warum bei dir jetzt height, aber kein width, schnall ich auch nicht.
In welchen Situationen darf man den mit margin platzieren?
So ist es vielleicht noch etwas besser:

div {
height:92%; width:94%;
margin:2% 3% 2% 3%;
background:#eee;
}
Wieso 92 und 94? Weil es so sein muss, damit der Div oben/unten und linke/rechts denselben Abstand hat - probier es einfach aus. width kann man in diesem Fall setzen muss es aber nicht unbedingt machen.

Ich wuesste nicht, wenn man mit margin Elemente nicht 'platzieren' duerte.

[Enchanter]

Wenn ich ein konkretes bsp. wüsste hätt ich es gebracht.
Wir reden da ein bisschen aneinander vorbei.
Aber nimm deinen Code, zur Wasserdichtheit fehlt doch eigentlich mind. ein alignment.
Aber was mach ich dann mit der Vertikalen? vertical-align scheint ja humbug zu sein.
Siehst du das anders?

[morpheus]

Aber nimm deinen Code, zur Wasserdichtheit fehlt doch eigentlich mind. ein alignment.
Eigentlich nicht, denn ich will es ja gar nicht irgendwie zentrieren. Ich setze nur einen margin drum herum und der sieht "zufaellig" so aus als waere es zentriert. Da brauchst du aber kein text-align oder aehnliches mehr setzen - das macht das margin schon.


Aber was mach ich dann mit der Vertikalen? vertical-align scheint ja humbug zu sein. Siehst du das anders?
Teilweise, ja. Aber das ist eigentlich wiederum logisch erklaerbar. vertical-align ist halt (leider) nicht dafuer gedacht um einen Div-Bereich vertikal zu zentrieren.

Die W3C-Spezifikation sagt dazu:

'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
[...]
Da steht nichts von Block-Elementen bei "Applies To:" sprich es vertical:align greift bei Block-Elementen nicht.

http://www.w3.org/TR/CSS21/visudet.html#line-height

Es gibt aber einige andere Moeglichkeiten eine vertikale Zentrierung zu realisieren.
http://www.student.oulu.fi/~laurirai/www/css/middle/

[Enchanter]

Die Angabe von width, haut es mir im IE kaputt.
Das soll jetzt mal einer verstehen. Welchen Doctype würdest du wählen?
Bestimmte doctypes, lassen es im ie6 dann wieder gut aussehen.

[morpheus]

Die Angabe von width, haut es mir im IE kaputt.
Stimmt. Habe das eben nur ohne width:; getestet gehabt. Muesste man wahrscheinlich wieder etwas pfuschen, damit es auch mit dem width:; funktioniert aber es ist besser, wenn man es einfach weglaesst oder einfach ein width:auto; setzt.


Das soll jetzt mal einer verstehen. Welchen Doctype würdest du wählen? Bestimmte doctypes, lassen es im ie6 dann wieder gut aussehen.
XHTML Strict aber ohne XML-Deklaration. Die kann den M$ IE 6 derbst durcheinander bringen.

[Enchanter]

So nun, ich komm in Zeitdruck.
Derzeitig, obwohl ich ein paar bsp. hätte, gilt für mich als Perfektionisten:
"Ein sauberes fixed Layout, oder auch die alternative 'ein Layout mit tlw. statischen weiten und höhen' ist derzeit nicht parktikabel realisierbar."
Geringsten falls nur, zuckt der FF beim Scrollen weils gerade im IE geht.
Ich hab zwei einfache Liquid Layouts draus gemacht, die ich als alternative anbieten werde,
wenn ich an diesem WE keine Lösung finde.

Dann hab ich noch ein bisschen was über die doctypes erfahren,
mit sauberem Doctype sind die Broser im CSS1 komp. mode, ohne im sog. quirks mode.
Ich hab es letztenendes weder im rückwärtskompatiblen, noch im standart hinbekommen.
Die rückwärtskompatible, dem IE5 sehr ähnliche Darstellung, ist an allen Ecken zu beschränkt.
Im Standart Kompatiblen Mode gibt es vieles nicht mehr was ich erwartete.
In der Interpretationsengine, fehlt scheinbar gänzlich eine bottom right fixierung.
Man hatt keine Chance, wenn man so vorgeht wie ich.
Was ich noch probieren werde ist, ob ich an einem Kompromiss weiter komme.
Wenn keine einzige Weite oder Höhe statisch ist, und zwar wirklich keine,
könnte ich meine Content Box so platzieren, das sie immer bis unten geht,
aber auch immer unter dem Menu anfängt.
Das Problem ist das selbst Abstände zwischen Text, Text und Bild relativ währen.
So fällt das Layout zusammen wenn ich mal im fenster Mode bin,
oder sieht richtig schaurig aus auf 1280xx.
Das hab ich also zunächst auch zur Seite gelegt.

Richtig schwer ist übrigens noch rechts oben im Content.
Dort ist eine kleine subnav aus grauem Text, darunter ein roter Balken.
Wenn subnav und breadcrum nicht mitscrollen sollen, wär die scrollbar einfachstenfalls, unter der subnav.
Sieht aber echt schlecht aus wenn der Scrollbar plötzlich aufhört.
Deswegen wollte ich ihn, im Fall einer Scrollbar im Inhalts div, noch an der subnav vorbei laufen lassen.
Nun ist im Standart ja kein Abstand nach rechts machbar,
ein blank.gif überdeckte kurze Zeit später den Knopf zum Hochscrollen. ;-(
So hab ich quasi wieder ein ähnliches Prob wie mit der grossen Scrollbar.
Ich will statische abstände, ich will 100%, ich will darin, elemente die andere Elemente überdecken(auch transparent).
Ich will CSS2Comp.
Hatt jemand mein Problem verstanden?
Denkt dran euch oben Fragen rauszuqouten, fragen stehen hier nun genug.

[q=Enchanter]Die Abstürze, sind das schlechte exceptions, oder doch Speicherfehler?[/enchanter]
Das war grosser Zufall, ein Javascript in den Typo3 Fenstern, war der dritte Faktor.
Auch wenn keiner meckert, ich schätze nicht, das ihr es nachstellen könnt.
Sieht mir nach kaputten Speicherriegeln aus.

@morpheus
Ich hab lange damit rumgespielt, und komme zu dem Schluss.
Gehackt zentrieren, ist besser als margin ohne 100%.
Die Browser haben dann manchmal echt nen Linksdrall.

[morpheus]

Ich hab zwei einfache Liquid Layouts draus gemacht, die ich als alternative anbieten werde,wenn ich an diesem WE keine Lösung finde.
Was spricht gegen ein Liquid Layout? Das haette bei mir immer den Vorzug, wenn ich mich zwischen statisch und liquid entscheiden muesste.


Im Standart Kompatiblen Mode gibt es vieles nicht mehr was ich erwartete.
Der Standard-Compliance Mode ist um einiges strenger als der Quirks Mode und mag einem deshalb auch ungewohnt vorkommen, wenn man zuvor nur mit dem Quirks Mode gearbeitet hat aber er ist eindeutig die bessere Wahl.

http://www.mozilla.org/docs/web-developer/quirks/
http://www.mozilla.org/docs/web-developer/quirks/quirklist.html


In der Interpretationsengine, fehlt scheinbar gänzlich eine bottom right fixierung.
Beispiel?


Wenn keine einzige Weite oder Höhe statisch ist, und zwar wirklich keine, könnte ich meine Content Box so platzieren, das sie immer bis unten geht, aber auch immer unter dem Menu anfängt.
http://www.alistapart.com/articles/fauxcolumns/
http://www.maxdesign.com.au/presentation/liquid/

Nuetzt dir das etwas?


So fällt das Layout zusammen wenn ich mal im fenster Mode bin, oder sieht richtig schaurig aus auf 1280xx.
Na ja, wirklich alles mit relativen Groessen zu realisieren funktioniert auch nicht. Bestimmte Elemente muessen ein bestimmte Groesse haben, weil sonst alles, wie du schon gesagt hast, zusammenfaellt.


Nun ist im Standart ja kein Abstand nach rechts machbar,
ein blank.gif überdeckte kurze Zeit später den Knopf zum Hochscrollen. ;-(
Abstand nach rechts kannst du mit padding/margin machen? Deine Probleme mit den Srollbars sind mir immer noch nicht wirklich verstaendlich.


Hatt jemand mein Problem verstanden?
So ca. schon ja ich habe keine Ahnung wie ich dir da nun genau weiterhelfen soll/kann.


Auch wenn keiner meckert, ich schätze nicht, das ihr es nachstellen könnt. Sieht mir nach kaputten Speicherriegeln aus.
Ich konnte es auf jeden Fall nicht reproduzieren.


Ich hab lange damit rumgespielt, und komme zu dem Schluss. Gehackt zentrieren, ist besser als margin ohne 100%.
Die Browser haben dann manchmal echt nen Linksdrall.
So pauschal kann man das nicht sagen. Es kommt immer auf den konkreten Fall an. Aber schon gesagt gibt es auch einige gute Hacks, um Inhalt vertikal zu zentrieren.

[Enchanter]

Auf die bottom right fixierung komm ich noch zurück.
Mein Problem ist kurz gefasst; wie kann ich div#content so hoch machen wie es die div#bodybox zulässt?
Vorrausgesetzt, die bodybox hält ihre Abstände ein und bekommt kein links oder oben Drall.
Das ist wichtig, weil der Scrollbalken in die content Box soll. Ist sie zu gross oder zu klein,
gilt das auch für den Scrollbalken. :-(


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

<head>
<title>Box Test</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

html, body {
overflow:hidden;

width:100%;
height:98%;

margin:0px;
padding:0px;

background:#AAAAAA;
}

div#bodybox {
height:94%;

margin:3%;
padding:0px;

border:solid 1px #000000;
background:#FFFFFF;
}

div#bodybox div#header {
width:100%;
height:120px;

margin:0px;
padding:0px;

background:#FFFFFF;
}

div#bodybox div#menu {
width:100%;
height:25px;

margin:0px;
padding:0px;

background:#333366;
}

div#bodybox div#submenus {
width:100%;
height:25px;

margin:0px;
padding:0px;

background:#000FFF;
}

div#bodybox div#content {
width:80%;

margin:0px 0px 0px 20%;
padding:0px;

background:#FFFF00;
}

div#bodybox div#leftIllu {
float:left;

width:20%;
/* Nur zum Testen */
height:50px;

margin:0px;
padding:0px;

background:#FF0000;
}
-->
</style>
</head>

<body>
<div id="bodybox">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="submenus">SUBMENU</div>

<div id="leftIllu">
</div>
<div id="content">
Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
<br><br>Ein bisschen Fliesstext zum Testen und danach ein paar umbrüche, Test TEST 1 2 3 TEST<br>
</div>
</div>
</body>

</html>

Jetzt mal nur im Firefox betrachtet.

Stufe zwei den Thread rückwärts, wäre die submenus über dem Scrollendem Text fliegen zu lassen.
Dabei ist es mir nicht geluingen, über den "Pfeil nach oben" Knopf am rechtem Rand hinweg,
ein padding für das submenu zu realisieren.
Stufe drei wär der Beginn des Threads, ein Layout das am Body Scrollt,
aber nur der Text in div#content bewegt sich.
Allerdings ist letzteres schon von der Useabillity her vom Tisch.
Ich versuche 1 oder zwei zu erreichen.
Da wir aber die höhe nicht kontrollieren können und nicht von unten ausgehen dürfen,
seh ich da kein Land.

Was deine zuversicht betrifft Statische "Groessen" zu realsieren, ich sprach von Rows nicht von Cols.
In der weite sind nur relative Breiten wie gezeigt gut möglich.
Schön wär natürlich wenn die LeftIllu z.B immer 15px Rand nach Links und Rechts zum Text hin hatt.
Aber dann währens wieder margin-left 20%+15px+15px für die div#content.

Sagt bitte bescheid, wenn ich gegen den ContentType verstosse, das muss dann auch weg.

[Enchanter]

So. Genau hingesehen habe ich. Unerklärlich ist es mir trotzdem schon wieder, und der IE6 saugt einfach.

Im Anhang dieses Posts zu findener HTML Code ist eigentlich die schönste Variante.
Allerdings auch nur, weil alle Schwierigkeiten weg vielen. Also das Scrolling ist pase´.
Das Submenu findet sich nicht mehr irgendwo drüber.

Allerdings wird es jetzt schwer zu lesen, weil das Problem der von typo3 eingefügte Content ist.
Die HTML Seite stellt meine Arbeit hier vom internen typo3 Server da.
Ich hab es auf Statisches HTML zurückgeschrieben.
Die Bilder wurden entfernt, und Verweise, wurden aufgelöst.
Das nach unten öffnende Hauptmenu immoment links, ist nur vom Style her interessant.
Haut schnell ein Wort Text rein zb..
Der Fehler den ich gerade zu beseitigen denke, bleibt auch so.

Schaut euch den Text in der Mitte an. Resized man den IE6 verschwinden Teile der Schrift.
Mag auch sein, das sie weiss wird. Den an ihrem Platz ist die Schrift.
Am besten ihr markiert die ganze Mitte wenn ihr es geöffnet habt.
Allerdings ist der Text nicht markier, also ereichbar wenn ihr das foldout menu gegen Text ersetzt habt.
Findet irgendjemand herraus, was das Problem ist, das es zu umgehen gilt?

Wenn das Problem nun schon wieder an der nicht von mir aufgesetzten Kiste hier liegen sollte.
Sagt bitte sofort bescheid, wenn ihr dehn Verdacht habt.

P.S.
Eine right fixierung, existiert, wenn width:auto; gesetzt wurde.
Ein gutes bsp. für unten Rechts, hab ich aber immer nocht nicht.
Ich versuche offsets nach unten und Rechts,
jetzt so aufmerksam wie möglich zu vermeiden.

Achtet ihr bitte auch auf den neuen Doctype, das Javascript fürs Menu Links ist nicht XHTML konform.


Sollte ein Mod die sichere Antwort geben können, bitte ich darum den Thread dahinter zu teilen.
Auf Fragen im Thread komme ich zurück, aber es geht mir um die Zukunft dieses Threads.
Es könnte gut daran angeschlossen werden.
So bald wird es von meiner Seite keine Lösungen für die oben genannten Probleme geben.