nicht angemeldet
Opera schrumpft plötzlich DIVs...
Hallo alle Zusammen,
ich habe im Moment ein recht skurriles Problem: Ich möchte eine Seite von einem Tabellenayout (und IFrames) auf ein ordentliches DIV-Layout (mit overflow:auto) umstellen, mit Inhalten gefüllt wird die Seite mit Typo3.
Ziel ist es, dass der Content immer mittig zu sehen ist, bisher wird der Kram dummerweise per IFrame eingebunden (*urks* - ich weiß...).
Das reine HTML-Template (http://www.purplehorse.de/fileadmin/purplehorse/template3.html) sieht ja erstmal halbwegs passabel aus, wenn ich in den Content-Bereich manuell ordentlich Daten reinfülle wird auch ganz brav gescrollt.
Witzig wird es aber, wenn das Template im Typo3 eingebunden ist und von dort mit Daten gefüllt wird (http://www.purplehorse.de/67.0.html): Der Content-Bereich schrumpft bei der Anzeige im Opera plötzlich auf eine Größe von ca 5 Pixeln zusammen! Und zwar natürlich _NUR_ im Opera - Netscape, Firefox, IE machen keine nennenswerten Probleme, und selbst der Konqueror stellt wenigstens alles dar!
Ja, mir ist schon klar, dass die doctype aus Typo3 heraus Blödsinn ist, aber eine Änderung auf xhtml 1 trans zerhäckselt das Layout in allen Browsern komplett...
Hat jemand eine Idee oder Verbesserungsvorschläge?
Danke & Gruß
Thomas
-
Hi,
die Frage dürfte sein, worauf sich die
height:71%; max-height:71%; min-height:71%;
beziehen. Ein sehr merkwürdiger Versuch übrigens genauso wie das Verpacken des CSS und von HTML-Kommentaren in einen CDATA-Bereich.freundliche Grüße
Ingo-
Hallo Ingo,
...] merkwürdiger Versuch übrigens genauso wie das Verpacken des CSS und von HTML-Kommentaren in einen CDATA-Bereich.
meinst du mit "merkwürdig" die Reihenfolge der Verschachtelung oder überhaupt den XHTML-Code?
Als problematisch ist mir "theObject.blur();" aufgefallen, wodurch wohl ganz unnötig tabbed
browsing verhindert wird, dann noch <link rel="schema.dc" href="dublin_core_elements" />, was
offenbar Severanfragen (und "404") verursachen kann.Grüsse
Cyx23
-
Hi,
...] merkwürdiger Versuch übrigens genauso wie das Verpacken des CSS und von HTML-Kommentaren in einen CDATA-Bereich.
meinst du mit "merkwürdig" die Reihenfolge der Verschachtelung oder überhaupt den XHTML-Code?
beim CSS, daß es überhaupt explizit als CDATA ausgewiesen wird und beim JS, daß einerseits an XML-Parser gedacht wird, andererseits für längst nicht mehr im Einsatz befindliche Browser (die aber Probleme mit der CDATA-Definition haben könnten) eine HTML-Kommentierung verwendet wird.
freundliche Grüße
Ingo-
beim CSS, daß es überhaupt explizit als CDATA ausgewiesen wird und beim JS, daß einerseits an XML-Parser gedacht wird, andererseits für längst nicht mehr im Einsatz befindliche Browser (die aber Probleme mit der CDATA-Definition haben könnten) eine HTML-Kommentierung verwendet wird.
Das Problem ist, dass ich auf _diesen_ Teil der Ausgabe keinen Einfluß habe, den generiert typo3 von sich aus.
Ich habe aber gerade mal die Gegenprobe gemacht und aus der typo3-Ausgabe Stück für Stück allen möglichen Kram rausgeworfen - keine Verbesserung. Bis mir auffiel, dass typo3 <<leftmargin="0" topmargin="0">> aus dem Body-Tag rauswirft. Ich weiß, genaugenommen haben die dort ja auch nichts zu suchen, andererseits sagt ja selbst die Referenz "Bitte benutzen Sie die hier beschriebenen HTML-Attribute nur in begründeten Ausnahmefällen", und einen solchen habe ich offenbar hier, denn mit topmargin="0" funktioniert es auch mit Opera wieder korrekt. Ich schätze, da ist ein Bug-Report fällig...-
Hi,
denn mit topmargin="0" funktioniert es auch mit Opera wieder korrekt. Ich schätze, da ist ein Bug-Report fällig...
ich denke nicht. Wenn Du die Referenz weiterliest: "Diese Attribute gehörten nie zum HTML-Standard" - möglicherweise denkt sich Opera, daß das Dokument bei Verwendung dieses Attributes doch besser im Quirks-("Rate-")Modus interpretiert werden sollte?
freundliche Grüße
Ingo
-
-
Hallo,
...] merkwürdiger Versuch übrigens genauso wie das Verpacken des CSS und von HTML-Kommentaren in einen CDATA-Bereich.
meinst du mit "merkwürdig" die Reihenfolge der Verschachtelung oder überhaupt den XHTML-Code?
beim CSS, daß es überhaupt explizit als CDATA ausgewiesen wird und beim JS, daß einerseits an XML-Parser gedacht wird, andererseits für längst nicht mehr im Einsatz befindliche Browser (die aber Probleme mit der CDATA-Definition haben könnten) eine HTML-Kommentierung verwendet wird.mir ist noch nicht klar wo nun die Merkwürdigkeit liegt und wann Fehler zu
erwarten sind.
Deklaration (d. internen Scripte) bei xhmtl und Rücksicht auf alte Browser
ist doch wohl angebracht?So etwas:
<style type="text/css">
<!-- --> <![CDATA[ /> <!--scheint bei Mozilla Fehler zu verursachen, wird aber irgendwo empfohlen...
Wie wärs hiermit:
<s... type="..."><!--
/* <![CDATA[ /> */Grüsse
Cyx23
-
Hi,
Deklaration (d. internen Scripte) bei xhmtl und Rücksicht auf alte Browser
ist doch wohl angebracht?Geht die Rücksicht auf Browser wie Netscape 1 und IE 2 nicht inzwischen etwas zu weit?
Wie wärs hiermit:
<s... type="..."><!--
/* <![CDATA[ /> */da XML-Parser HTML-Kommentare und damit auch den enthaltenen Inhalt entfernen dürfen, halte ich den Verzicht auf die früher übliche HTML-Auskommentierung durchaus für angebracht.
Und was die CDATA-Deklaration betrifft: die dürfte doch bei CSS überflüssig sein, oder wüßtest Du einen Fall, in dem vor einem XML-Parser zu maskierene Zeichen vorkommen?freundliche Grüße
Ingo-
Hallo Ingo,
<s... type="..."><!--
/* <![CDATA[ /> */
da XML-Parser HTML-Kommentare und damit auch den enthaltenen Inhalt entfernen dürfen, halte ich den Verzicht auf die früher übliche HTML-Auskommentierung durchaus für angebracht.deshalb wohl der Versuch den Kommentar nach innen bzw. nach [CDATA[ zu verlagern. Vielleicht so:
<s... type="...">
/* <![CDATA[ /><!-- */oder //
Und was die CDATA-Deklaration betrifft: die dürfte doch bei CSS überflüssig sein, oder wüßtest Du einen Fall, in dem vor einem XML-Parser zu maskierene Zeichen vorkommen?
Je nachdem was an Unfug drinnen steht (expression, Kommentar, Hacks) wohl schon.
Grüsse
Cyx23
-
Hi,
deshalb wohl der Versuch den Kommentar nach innen bzw. nach [CDATA[ zu verlagern. Vielleicht so:
<s... type="...">
/* <![CDATA[ /><!-- */nunja, ein Uralt-Browser, der die Auskommentierung braucht, könnte sich dann an der CDATA-Deklaration stören und möglicherweise auch /> nicht interpretieren. Aber Du hast doch bestimmt noch einige dieser Schätzchen - teste es doch mal. ;-)
Und was die CDATA-Deklaration betrifft: die dürfte doch bei CSS überflüssig sein, oder wüßtest Du einen Fall, in dem vor einem XML-Parser zu maskierene Zeichen vorkommen?
Je nachdem was an Unfug drinnen steht (expression, Kommentar, Hacks) wohl schon.
Ok, beschränken wir die Überflüssigkeit auf valides CSS.
freundliche Grüße
Ingo
-
-
-
-
-
-
Hi,
die Frage dürfte sein, worauf sich die
height:71%; max-height:71%; min-height:71%;
beziehen. Ein sehr merkwürdiger Versuch übrigens genauso wie das Verpacken des CSS und von HTML-Kommentaren in einen CDATA-Bereich.Wenn ich nicht allzuviel Blödsinn gemacht habe sieht die Struktur so aus:
<div style="height:100%; width:100%;"> ## Ganze Fenstergröße
<div style="width:95%; height:90%;"> ## Umrahmter Bereich, wird zentriert
<div style="min-width:100%; max-width:100%; text-align:center; height:25%;"> ## 1/4 der Höhe des zentrierten Blocks für den Header
</div><div style="min-width:100%; max-width:100%; height:71%; max-height:71%;"> ## 71% der Höhe des zentrierten Blocks für Content
<div style="overflow:auto; height:100%;"> ## Hier ist der Contetnt drin
</div>
</div>
<div style="min-width:100%; max-width:100%; height:4%;"> ## 4% für die Navigation
</div>
</div>
</div>Zumindest war das _meine_ Theorie, wie sich die Größenangaben referenzieren. Wie bereits anderweitig geschrieben hing das Problem am fehlenden topmargin - warumauchimmer. Verstehen tu' ich es nicht.
Wenn Du noch eine Idee oder Erklärung hast - immer her damit ;-)
Thomas
-
Hi,
<div style="height:100%; width:100%;"> ## Ganze Fenstergröße
Nein. 100% Höhe vom Elternelement. Und welche Höhe hat dieses?
<div style="width:95%; height:90%;"> ## Umrahmter Bereich, wird zentriert
Wo wird hier zentriert? Die Breite und Höhe wird lediglich reduziert.
<div style="min-width:100%; max-width:100%; text-align:center; height:25%;"> ## 1/4 der Höhe des zentrierten Blocks für den Header
Wenn min-width = max-width, welche andere Interpretation als width:100% bleibt dann noch?
<div style="min-width:100%; max-width:100%; height:71%; max-height:71%;"> ## 71% der Höhe des zentrierten Blocks für Content
Wenn height:71%, dann erübrigt sich max-height.
<div style="min-width:100%; max-width:100%; height:4%;"> ## 4% für die Navigation
4% von 90% der Höhe des ersten Divs.
freundliche Grüße
Ingo-
<div style="height:100%; width:100%;"> ## Ganze Fenstergröße
Nein. 100% Höhe vom Elternelement. Und welche Höhe hat dieses?Gute Frage. 100% body.
<div style="width:95%; height:90%;"> ## Umrahmter Bereich, wird zentriert
Wo wird hier zentriert? Die Breite und Höhe wird lediglich reduziert.Upps, sorry, im oberen div fehlen die text-align und vertical-align.
<div style="min-width:100%; max-width:100%; text-align:center; height:25%;"> ## 1/4 der Höhe des zentrierten Blocks für den Header
Wenn min-width = max-width, welche andere Interpretation als width:100% bleibt dann noch?Keine. Ziel erreicht. Ohne dieses (leicht merkwürdige) Konstrukt passt sich die Breite immer mal wieder an.
<div style="min-width:100%; max-width:100%; height:71%; max-height:71%;"> ## 71% der Höhe des zentrierten Blocks für Content
Wenn height:71%, dann erübrigt sich max-height.Nicht unbedingt. Wenn ich das Fenster sehr schmal mache, passt sich sonst die Größe an und die Bereiche überlagern sich.
<div style="min-width:100%; max-width:100%; height:4%;"> ## 4% für die Navigation
4% von 90% der Höhe des ersten Divs.Jepp.
Die Frage ist für mich jetzt nur: Warum bitteschön redert Opera ohne das topmargin=0 im body den div-Block für den Content so schrottig?
Thomas
-
Hi,
<div style="height:100%; width:100%;"> ## Ganze Fenstergröße
Nein. 100% Höhe vom Elternelement. Und welche Höhe hat dieses?Gute Frage. 100% body.
und wie hoch ist body? Und falls 100%, wie hoch ist dann das Elternelement?
Upps, sorry, im oberen div fehlen die text-align und vertical-align.
vertical align für div?
Die Frage ist für mich jetzt nur: Warum bitteschön redert Opera ohne das topmargin=0 im body den div-Block für den Content so schrottig?
Teste doch mal was passiert, wenn Du den Doctype wegläßt.
freundliche Grüße
Ingo-
<div style="height:100%; width:100%;"> ## Ganze Fenstergröße
Nein. 100% Höhe vom Elternelement. Und welche Höhe hat dieses?
Gute Frage. 100% body.
und wie hoch ist body? Und falls 100%, wie hoch ist dann das Elternelement?*grummel* *patsch* Dank Deiner Anregung habe ich einfach mal den topmargin-Müll durch ein einfaches <<style="height:100%">> ersetzt, und siehe, es ist gut! Uff!
Wobei die Größen-Refernzierung auf das nächste Elternelement ziemlich besch**** ist - wer oder was ist nächste formatierbare Elternelement von body?Upps, sorry, im oberen div fehlen die text-align und vertical-align.
vertical align für div?Warum nicht? Was spricht dagegen? Wenn ich mir den Thread so anschaue komme ich zwar zu der Überzeugung, öfters mal Tomaten auf den Augen zu haben, aber das ich nicht einem div sagen soll, seinen Inhalt vertikal mittig auszurichten hab ich nirgends gefunden.
Die Frage ist für mich jetzt nur: Warum bitteschön redert Opera ohne das topmargin=0 im body den div-Block für den Content so schrottig?
Teste doch mal was passiert, wenn Du den Doctype wegläßt.Nichts anderes. Dafür hilft eine korrekte und durchgängige Formatierung mit CSS auch für das body-Tag. *hmpf*
Auf alle Fälle vielen Dank,
Thomas
-
Hi,
Gute Frage. 100% body.
und wie hoch ist body? Und falls 100%, wie hoch ist dann das Elternelement?*grummel* *patsch* Dank Deiner Anregung habe ich einfach mal den topmargin-Müll durch ein einfaches <<style="height:100%">> ersetzt, und siehe, es ist gut! Uff!
in jedem Browser? Weil:
Wobei die Größen-Refernzierung auf das nächste Elternelement ziemlich besch**** ist - wer oder was ist nächste formatierbare Elternelement von body?
Sieh' Dir den Quelltext einer Seite an. Am einfachsten findest Du es ganz unten ;-)
Warum nicht? Was spricht dagegen? Wenn ich mir den Thread so anschaue komme ich zwar zu der Überzeugung, öfters mal Tomaten auf den Augen zu haben, aber das ich nicht einem div sagen soll, seinen Inhalt vertikal mittig auszurichten hab ich nirgends gefunden.
Lies http://www.w3.org/TR/CSS21/visudet.html#line-height. Line-height erfüllt in gewissem Sinn eine solche Funkion, zu vertical-align steht aber etwas weiter unten:
"Applies to: inline-level and 'table-cell' elements"
Du müßtest Deinem DIV also vorher die block-level-Eigenschaft nehmen, um vertical-align nutzen zu können, aber das macht ja keinen Sinn, da Du dann die anderen Eigenschaften nicht mehr zuweisen kannst.freundliche Grüße
Ingo
-
-
-
-
-
-