nicht angemeldet
Firefox 0.8; float + overflow:hidden
Hola!
Hier seht ihr mal ein bißchen Quelltext; schön, nicht wahr? Leider beginnt der Textabsatz im Firefox erst rechts neben der Überschrift.
Ohne die Overflow-Eigenschaft ist alles wie es sein soll: der Absatz nimmt die ganze breite des <div> ein.
[...]
div { border: 2px solid #0000ff; }
p { overflow: hidden; border: 2px solid #ff0000; }
h1 { width: 10em; float: left; border: 2px solid #00ff00; }
[...]
<div>
<h1>Überschrift</h1>
<p>Text
</p>
</div>
[...]
Weiß jemand, woran das liegt und vor allem, wie man es abstellen kann?
Gracias y saludos
Toni
P.S.: Falls jemand testen möchte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
div { border: 2px solid #0000ff; }
p { overflow: hidden; border: 2px solid #ff0000; }
h1 { width: 10em; float: left; border: 2px solid #00ff00; }
-->
</style>
</head>
<body>
<div>
<h1>Überschrift</h1>
<p>
Verzweifle nicht, werde nicht mißmutig, wenn Du nicht die moralische oder intellektuelle
Höhe erreichen kannst, auf welcher ein andrer steht, und sei nicht so unbillig, andre gute
Seiten an Dir zu übersehn, die Du vielleicht vor jenem voraus haben magst - und wäre das
auch nicht der Fall! Müssen wir denn alle groß sein?
Verzweifle nicht, werde nicht mißmutig, wenn Du nicht die moralische oder intellektuelle
Höhe erreichen kannst, auf welcher ein andrer steht, und sei nicht so unbillig, andre gute
Seiten an Dir zu übersehn, die Du vielleicht vor jenem voraus haben magst - und wäre das
auch nicht der Fall! Müssen wir denn alle groß sein?
</p>
</div>
</body>
</html>
-
Hallo,
[...]
div { border: 2px solid #0000ff; }
p { overflow: hidden; border: 2px solid #ff0000; }
h1 { width: 10em; float: left; border: 2px solid #00ff00; }
[...]Vielleicht fehlt eine Breitenangabe/Höhenangabe für das <p>?
Mit freundlichen Grüßen
André
-
Hallo Andre!
Vielleicht fehlt eine Breitenangabe/Höhenangabe für das <p>?
Das ist es leider nicht. Der Absatz rutscht auch mit width: nicht nach links, sondern ragt Ggfs. rechts aus dem <div> (und im Beispiel auch aus dem Browserfenster) heraus.
Danke schön
Toni
-
-
Hi,
Weiß jemand, woran das liegt
http://www.w3.org/TR/CSS21/visuren.html#q15, erster Absatz.
und vor allem, wie man es abstellen kann?
Vermeide die im o.g. Text genannten Umstände.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah!
Danke für
http://www.w3.org/TR/CSS21/visuren.html#q15, erster Absatz.
Mal sehen, was ich davon kapiert habe.
Der Absatz erzeugt einen neuen "block-formatting-context", weil overflow auf hidden gesetzt ist. Das W3C erlaubt in diesem Fall, daß die Box (d.h der Absatz?) wegen des vorangehenden Floats schmaler wird. Und genau das wird sie im Firefox auch (naja, eigentlich wird sie verschoben, wie man sieht, wenn man ihr eine Breite zuweist).
Bleiben zwei Fragen:
1. Ist es möglich, daß mein Text um die Überschrift fließt und ein übergroßes Bild im Absatz abgeschnitten wird?
2. Was ist ein block-formatting-context?
Gruß
Toni-
Hi,
Mal sehen, was ich davon kapiert habe.
offenbar alles, worauf es hier ankommt :-)
Der Absatz erzeugt einen neuen "block-formatting-context", weil overflow auf hidden gesetzt ist. Das W3C erlaubt in diesem Fall, daß die Box (d.h der Absatz?) wegen des vorangehenden Floats schmaler wird.
Ich würde nicht "erlauben" sagen, sondern je nachdem, wie man den CSS-Standard an sich betrachtet, "empfehlen" oder "verpflichten". Die Box des <p>-Elements verhält sich im Hinblick auf die Positionierung so, als wäre sie gefloatet.
- Ist es möglich, daß mein Text um die Überschrift fließt und ein übergroßes Bild im Absatz abgeschnitten wird?
Nicht bei dieser Struktur. Entweder Du gibst einem umgebenden Element die overflow-Eigenschaft, oder Du musst auf den run-in-Ersatz verzichten.
- Was ist ein block-formatting-context?
Das beschreibt genau die von mir genannte Seite. Dort steht allerdings nicht "Ein Block Formatting Context ist ...", sondern "In einem Block Formatting Context passiert ...".
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah!
Danke für die Lehrstunde.
Ich würde nicht "erlauben" sagen, sondern je nachdem, wie man den CSS-Standard an sich betrachtet, "empfehlen" oder "verpflichten".
"...in which case the box itself m a y become narrower due to the floats..."
Da steht ausdrücklich "dürfen" (3. Absatz). Muß man sich sich ja nicht wundern, wenn die Browserbauer machen, was sie wollen. :-)
Nicht bei dieser Struktur. Entweder Du gibst einem umgebenden Element die overflow-Eigenschaft...
Dann ignoriert ein Browser (ich hab vergessen welcher) das padding des umgebenden <div>; bezüglich overflow meine ich. Dank André bin ich allerdings gerade über clip gestolpert. Vielleicht kann man damit das padding simulieren. Hier wäre wohl ein Fragezeichen angebracht, aber ich will ja nicht unverschämt wirken. ;-)
Gruß
Toni-
Hi,
"...in which case the box itself m a y become narrower due to the floats..."
stimmt, der dort beschriebene Zusammenhang trifft auf Deinen Fall zu, das habe ich übersehen.
Da steht ausdrücklich "dürfen" (3. Absatz). Muß man sich sich ja nicht wundern, wenn die Browserbauer machen, was sie wollen. :-)
:-)
Nicht bei dieser Struktur. Entweder Du gibst einem umgebenden Element die overflow-Eigenschaft...
Dann ignoriert ein Browser (ich hab vergessen welcher) das padding des umgebenden <div>; bezüglich overflow meine ich.Kannst Du das bitte herausfinden? Ich kenne padding-bezügliche "Probleme" (die eigentlich keine sind, aber ggf. unschön) bei overflow:auto, aber nicht bei overflow:hidden. Das mag daran liegen, dass ich es gewöhnlich nicht einsetze.
Dank André bin ich allerdings gerade über clip gestolpert. Vielleicht kann man damit das padding simulieren.
clip gibt es nur bei absolut positionierten Elementen, und negatives Clipping ist nicht möglich.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah!
Dann ignoriert ein Browser (ich hab vergessen welcher) das padding des umgebenden <div>; bezüglich overflow meine ich.
Kannst Du das bitte herausfinden? Ich kenne padding-bezügliche "Probleme" (die eigentlich keine sind, aber ggf. unschön) bei overflow:auto, aber nicht bei overflow:hidden. Das mag daran liegen, dass ich es gewöhnlich nicht einsetze.
Ich glaube ich kriege es nochmal zusammen. Wer weiß, wenn ich Murks produzieren w i l l, kommt womöglich noch eine schöne Seite dabei heraus. Ich probiere es heute abend mal aus, jetzt geht´s erst mal in die Sonne.
clip gibt es nur bei absolut positionierten Elementen, und negatives Clipping ist nicht möglich.
Damit hast Du mir viel Arbeit erspart.
Gruß
Toni -
Hi,
clip gibt es nur bei absolut positionierten Elementen,
Warum?
http://www.w3.org/TR/REC-CSS2/visufx.html#propdef-clip sagt:'clip'
Value: <shape> | auto | inherit
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentages: N/A
Media: visualThe 'clip' property applies to elements that have a 'overflow' property with a value other than 'visible'. Values have the following meanings:
Ok, gilt also nur, wenn overflow anwendbar ist. Also gucken wir mal da nach (http://www.w3.org/TR/REC-CSS2/visufx.html#propdef-overflow):
'overflow'
Value: visible | hidden | scroll | auto | inherit
Initial: visible
Applies to: block-level and replaced elements
Inherited: no
Percentages: N/A
Media: visualAuch kein Hinweis auf absolut positionierte Elemente.
Wo versteckt sich denn die Einschränkung?
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da. -
Hallo Cheatah, hallo Forumsbesucher!
Ich habe das erwähnte padding/overflow:hidden-Problem reproduziert (s. beigefügten Quelltext).
Damit erhalte ich folgende Darstellung (Windows XP Pro mit SP1):Opera 7.23: Perfekt. Der Absatz samt Rahmen bleibt innerhalb des padding. Das Bild wird bündig mit dem Absatz abgeschnitten.
IE6: Der Absatz wird auf die Breite des Bildes ausgedehnt (wie gewohnt). Zwar bleibt der Text innerhalb des paddding, das Bild und der Rahmen jedoch werden erst am Rahmen des <div> abgeschnitten.
Firefox 0.8: Jetzt wird´s lustig. Nach dem Laden entspricht die Darstellung weitgehend dem IE; allerdings endet das <div> unmittelbar nach der letzten Textzeile, d.h. kein margin und Rahmen (des Absatzes), kein padding. Ändert man nun die Fenstergröße, so werden diese angezeigt, das div wird länger. Ändert man die Fenstergröße ein zweites mal, tut sich auch am rechten Rand etwas: der Absatz bleibt innerhalb des padding. Dieses Padding ist aber etwa doppelt so groß, wie es sein sollte. Das Bild erstreckt sich uber den Absatz hinaus bis zum Rahmen des <div>.
Ich hoffe die Beschreibung ist verständlich; ansonsten bitte ich darum, das Ganze am eigenen Rechner nachzuvollziehen. Bei Bedarf schicke ich gerne screenshots.
Noch eine andere Frage. Ich habe über den CSS-Teil von Selfhtml einen ganz guten überblick. Da lernt man aber vor allem etwas über die verschiedenen Eigenschaften, das Einbinden in Dateien, Selektoren etc. Um CSS zu verstehen, so mein Eindruck, muß man aber auch verschiedene Konzepte, wie eben den box-formatting-context, kennen. Sonst hat man einen unzusammenhängenden Haufen von Kenntnissen, die nur eingeschränkt auf neue Probleme übertragbar sind. Wie kann man das systematisch lernen, wenn man nicht die Spezifikation von vorne bis hinten lesen will? Mit welchem Aufwand muß man rechnen, bis Wissen zu Verstehen wird?
Gruß und schönes Wochenende
Toni<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body { background-color: #ffffff; }
div { width: 30em; padding: 2em; overflow: hidden; border: 2px solid #0000ff; }
p { border: 10px solid #ff0000; }
-->
</style>
</head>
<body>
<div>
<p>
<img src="bild.bmp" style="width: 800px; height: 150px;">
Verzweifle nicht, werde nicht mißmutig, wenn Du nicht die moralische oder intellektuelle
Höhe erreichen kannst, auf welcher ein andrer steht, und sei nicht so unbillig, andre gute
Seiten an Dir zu übersehn, die Du vielleicht vor jenem voraus haben magst - und wäre das
auch nicht der Fall! Müssen wir denn alle groß sein?Verzweifle nicht, werde nicht mißmutig, wenn Du nicht die moralische oder intellektuelle
Höhe erreichen kannst, auf welcher ein andrer steht, und sei nicht so unbillig, andre gute
Seiten an Dir zu übersehn, die Du vielleicht vor jenem voraus haben magst - und wäre das
auch nicht der Fall! Müssen wir denn alle groß sein?</p>
</div>
</body>
</html>
-
-
-
-
-
hi,
Leider beginnt der Textabsatz im Firefox erst rechts neben der Überschrift.
Ohne die Overflow-Eigenschaft ist alles wie es sein soll: der Absatz nimmt die ganze breite des <div> ein.p { overflow: hidden; border: 2px solid #ff0000; }
wofür _braucht_ der absatz den overflow:hidden, wenn eh keine maße definiert sind ...?
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you can _think_ about them, before you break 'em."-
Hallo wahsaga!
wofür _braucht_ der absatz den overflow:hidden, wenn eh keine maße definiert sind ...?
Da hast du natürlich recht. Das Beispiel ist nur ein "minimal test case"; auf der echten Seite ist ein Wert definiert. Die Breite ändert ja nichts an dem Float-Problem.
Gruß
Toni-
Hallo,
Da hast du natürlich recht. Das Beispiel ist nur ein "minimal test case"; auf der echten Seite ist ein Wert definiert. Die Breite ändert ja nichts an dem Float-Problem.
Dann solltest du den kompletten Code posten. Vielleicht liegt der Fehler an anderer Stelle?! Oder einen Link zur Seite?
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow
Mit freundlichen Grüßen
André
-
Hallo André!
Dann solltest du den kompletten Code posten. Vielleicht liegt der Fehler an anderer Stelle?! Oder einen Link zur Seite?
Das ist z.Zt. leider nicht möglich, da ich per FTP nicht an meinen Webspace (Hochschule) komme. Aber das ist eine andere Frage...
Ich verdaue gerade Cheatahs Hinweis.
Danke und Gruß
Toni-
Hallo Toni,
Ich verdaue gerade Cheatahs Hinweis.
Wenn es dir so geht wie mir, lies:
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap11.html#heading-11.1
Und der CSS-Validator ist auch ganz hilfreich.
Mit freundlichen Grüßen
André
-
Hallo André!
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap11.html#heading-11.1
Das ist ja mal was. Danke.
Gruß
Toni
-
-
-
-
-