nicht angemeldet
Rahmen um floating img in Chrome
Hallo Forum,
ich versuche folgendes zu erzeugen: Eine Art "Box", in der links ein Bild steht und rechts ein beschreibender Text dieses Bild umfließt. Diese Box soll von einem Rahmen umgeben sein.
Mein Minimalbeispiel dazu sieht wie folgt aus:
<div style="border:1px solid #000;display:block;width:500px;">
<img src="http://lorempixum.com/100/200" style="float:left"> Text
<br style="clear:both">
</div>
Das gewünschte Verhalten: Der Rahmen soll mindestens das Bild umfassen, falls der Text länger wird auch den Text.
Wenn man sich das mit dem aktuellen Windows-Chrome anschaut, ist das Verhalten undefiniert. In manchen Fällen wird der Rahmen nur um die Textzeile gezogen, in manchen Fällen um das ganze Bild.
Ich vermute stark dass das ein Bug in Chrome ist -- oder würdet ihr das Problem anders (besser) lösen? Habt ihr eine Idee für einen Workaround?
Vielen Dank für die Hilfe!
Gruß, Sebastian
-
Hallo Forum,
Ich vermute stark dass das ein Bug in Chrome ist -- oder würdet ihr das Problem anders (besser) lösen? Habt ihr eine Idee für einen Workaround?
Ich vermute stark, dass es an deinem spartanischen css liegt.
-
Hallo Forum,
Ich vermute stark dass das ein Bug in Chrome ist -- oder würdet ihr das Problem anders (besser) lösen? Habt ihr eine Idee für einen Workaround?
Ich vermute stark, dass es an deinem spartanischen css liegt.
Danke für die Antwort. Leider verstehe ich nicht was du meinst. Minimalbeispiele sind per se spartanisch, oder habe ich etwas wesentliches vergessen?
-
Hallo Forum,
Ich vermute stark dass das ein Bug in Chrome ist -- oder würdet ihr das Problem anders (besser) lösen? Habt ihr eine Idee für einen Workaround?
Ich vermute stark, dass es an deinem spartanischen css liegt.
Danke für die Antwort. Leider verstehe ich nicht was du meinst. Minimalbeispiele sind per se spartanisch, oder habe ich etwas wesentliches vergessen?
Ja hast du. Denn wenn du wirklich willst das der Browser macht was er soll musst du ihm das schon genau sagen. Ansonsten interpretiert er gern mal was so wie er will.
In deinem Fall:
Du willst ein Element link und eins rechts. Sagst aber nur dem linken was er tun soll. Um mal konkret zu werden. Auch den Text solltest du floaten. Und css doku lesen. Wenn du mit float arbeitest musst du auch ein width angeben etc...-
Hi,
Um mal konkret zu werden. Auch den Text solltest du floaten.
Warum? Der Text soll doch um das Bild fließen und nicht irgendwas um das Bild und den Text?
Wenn du mit float arbeitest musst du auch ein width angeben etc...
Warum? Inhalte nehmen den zur Verfügung stehenden Platz, wozu da eine feste Breite angeben? Da wird evtl. nur das Bild skaliert. Was fällt unter Et cetera?
~dave
-
Hi,
Warum? Inhalte nehmen den zur Verfügung stehenden Platz, wozu da eine feste Breite angeben? Da wird evtl. nur das Bild skaliert. Was fällt unter Et cetera?
Also wenn du mit deinem halbwissen recht haben willst... ok
-
Hi,
Warum? Inhalte nehmen den zur Verfügung stehenden Platz, wozu da eine feste Breite angeben? Da wird evtl. nur das Bild skaliert. Was fällt unter Et cetera?
Also wenn du mit deinem halbwissen recht haben willst... okErkläre es mir doch dann?
Deshalb hab ich doch nachgefragt.~dave
-
Hi,
Warum? Inhalte nehmen den zur Verfügung stehenden Platz, wozu da eine feste Breite angeben? Da wird evtl. nur das Bild skaliert. Was fällt unter Et cetera?
Also wenn du mit deinem halbwissen recht haben willst... okErkläre es mir doch dann?
Deshalb hab ich doch nachgefragt.Ok... Also wie Steve schon gesagt hat ist der Hintergrung folgender:
In der Theorie und der Praxis hab ich schon viele Unterschiede festgestellt. In der Theorie funktioniert einiges mit weniger Angaben. Aber gerade im Bezug auf die IE Versionen kommt es gerne zu Problemen, wenn man floatet ohne Breitenangaben. Ja in der Theorie ist der Inhalt zuständig. Aber arbeite mal Browserübergreifend und du wirst feststellen, dass oft mehr Angaben notwendig sind als die Theorie sagt, um in allen Browsern das selbe Ergebnis zu erreichen.
-
-
Hi,
Warum? Inhalte nehmen den zur Verfügung stehenden Platz, wozu da eine feste Breite angeben? Da wird evtl. nur das Bild skaliert. Was fällt unter Et cetera?
Also wenn du mit deinem halbwissen recht haben willst... okAlso ganz so unrecht hat er nicht. In der Theorie ist das nicht notwendig. Aber ich muss selbst auch sagen, dass in der Praxis ich den Fall hatte das ohne width angabe in irgendwelchen Browsern auch ein Darstellungsproblem auftrat.
-
-
-
-
-
-
Moin,
Mein Minimalbeispiel dazu sieht wie folgt aus:
<div style="border:1px solid #000;display:block;width:500px;">
<img src="http://lorempixum.com/100/200" style="float:left"> Text
<br style="clear:both">
</div>> Das gewünschte Verhalten: Der Rahmen soll mindestens das Bild umfassen, falls der Text länger wird auch den Text. Genau so wirds in meinem Windows Chrome auch angezeigt... Sowohl, wenn der Text kurz ist, als auch wenn er lang ist... Grüße Marco -
Hi,
oder würdet ihr das Problem anders (besser) lösen?
Ja, und zwar ohne unsemantisches br-Element:
<figure> <img src="http://lorempixum.com/100/200"> <figcaption>Text</figcaption> </figure>figure { border:1px solid #000; display:block; width:500px; overflow:hidden; } figcaption { float:left; }Falls kein HTML5 würde ich figure mit div und figcaption mit p ersetzen(?)
~dave
-
Hallo Dave,
oder würdet ihr das Problem anders (besser) lösen?
Ja, und zwar ohne unsemantisches br-Element:
Danke, das ist die Lösung für mich!
Was offensichtlich den Unterschied beim Rendering macht ist das "overflow:hidden". Da muss ich gleich mal genauer nachlesen...Vielen Dank!
Gruß, Sebastian-
Hallo Dave,
Danke, das ist die Lösung für mich!
Was offensichtlich den Unterschied beim Rendering macht ist das "overflow:hidden". Da muss ich gleich mal genauer nachlesen...Nicht nachlesen. Man schneidet Content oder Inhalt nicht ab. Das ist unschön. Einfach validen Code. Dann passt das.
-
Hi,
Nicht nachlesen. Man schneidet Content oder Inhalt nicht ab. Das ist unschön. Einfach validen Code. Dann passt das.
Welcher Inhalt wird wo abgeschnitten?
Welche Teile meines Codes sind invalide?~dave
-
-
-