Hallo zusammen,
seit Tagen u. Stunden suche ich nach einer Lösung, werde aber leider nicht fündig.
Und zwar habe ich ein p Tag und in diesem zwei Bilder (IMG) eingebunden. Das erste IMG ist schmaler als das zweite IMG. Den beiden IMG-Tags habe ich float right vergeben. Und so floatet der Text entsprechend links neben und im Verlauf auch unter diesen Images . Soweit okay.
Wird das p-Tag jetzt schmaler gemacht dann rutscht das zweite IMG unter das erste IMG. Das soll auch so sein, also noch alles okay.
Der Bug(?): Das Problem ist jetzt der Zeilenumbruch, welcher am Ende des ersten (schmaleren) Bildes entsteht. Und zwar entsteht der zu spät und ein kleiner Teil des Textes liegt bei bestimmter Bildhöhe des ersten Bildes über dem zweiten Bild.
Das passiert im IE, Chrome und Safari. Nur FF und Opera funktioniert der Umbruch m.E. korrekt.
Eventuell vergesse ich aber einfach nur eine Kleinigkeit...
Damit man sich das anschauen kann, hier ein Link zum Bsp.: csstest (Dem P-Tag habe ich die Breite 400px vergeben)
So sieht das Ergebnis im Chrome Version (16.0.912.63 m) aus: chrome_bug.gif
Der Code:
CSS:
Code:body {margin: 0px; } p { color:#FFF; background-color: #666; width:400px; padding:0px; margin:0px; } .imgcl1, .imgcl2 { float:right; } .imgcl1 { padding: 0px; margin: 0px; width: 200px; height: 50px; } .imgcl2 { padding: 0px; margin: 0; width: 270px; height:70px; }
HTML:
Hoffe jemand hat eine Idee wie ich dieses Problem lösen kann.Code:<div> <h2>TEST</h2> <p> <img src="test_200x050.gif" title="Bild 1 (schmaler)" class="imgcl1"> <img src="test_270x070.gif" title="Bild 2 (breiter)" class="imgcl2"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div>
Danke schon mal im Voraus.
Gruß Rafael
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)