DIV-Breite ändert sich bei kursiver Schrift

[marv]

Hallo,

ich habe ein kleines Problem mit kursivem Text in einem DIV-Block.

Es sieht folgendermaßen aus: Der DIV-Block hat eine feste Breite. Wenn dieser allerdings einen längeren (sprich: mehrere Zeilen langen) kursiv formatierten Blocksatz-Text beinhaltet, überschreitet der Internet Explorer die angegebene Breite von 615 Pixeln.

[code lang=html]
 <div style="width: 615px; border: 1px solid black">
  <p style="text-align: justify; font-style: italic">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
[/html]

Meine erste Lösung war, den Absätzen einfach eine Breite von 99% zuzuweisen. Das klappt zwar, macht aber ein neues Problem: Wenn ich im Text bspw. eine Tabelle habe, die mit float:right vom Text umflossen werden soll, dann klappt das zwar beim ersten Absatz. Ist das Bild aber höher als der erste Absatz, beginnt der zweite erst nach dem Bild, er umfließt also nicht mehr die Tabelle.

Ich habe mal drei Beispiele online gestellt, damit man das Problem besser versteht:

http://www.trekzone.de/usr/ml/csstest.html
(Die blauen Balken dienen haben die korrekte Breite von 615 Pixeln. Im Vergleich sieht man, dass die zweite Textbox aus dem Rahmen fällt)

Beispiel 1: Kein kursiver Text, deshalb stimmt die DIV-Breite
Beispiel 2: Der Text ist kursiv, die Box zu breit
Beispiel 3: Der Text ist kursiv und hat eine Breite von 99%, der zweite Absatz umfließt die Tabelle nicht mehr

Mit padding und margin habe ich (anstatt einer Breitenangabe für die Absätze) auch schon rumprobiert, funktioniert aber auch nicht - die Box ist trotzdem zu groß.

Das Problem tritt nur im Internet Explorer auf - der Firefox machts richtig (wenn man mal davon absieht, dass er den Rahmen auf die Gesamtbreite draufrechnet - aber das ist ja ne andere Sache).

Bin für jeden Hinweis dankbar

mfg,
marvin

[marv]

Sry, falsch formatiert:

  
 <div style="width: 615px; border: 1px solid black">  
  <p style="text-align: justify; font-style: italic">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>  
 </div>  

[Der Martin]

n'Abend,

Es sieht folgendermaßen aus: Der DIV-Block hat eine feste Breite. Wenn dieser allerdings einen längeren (sprich: mehrere Zeilen langen) kursiv formatierten Blocksatz-Text beinhaltet, überschreitet der Internet Explorer die angegebene Breite von 615 Pixeln.

das ist ein nicht ganz einleuchtendes Fehlverhalten des IE, das durch zwei Bugs entsteht, die hier zusammenfallen. Zum einen berücksichtigt er beim Berechnen der Abmessungen einer Textbox nicht, dass der Text darin kursuv sein soll, zum andern macht er ein Element automatisch breiter, wenn der Inhalt es erfordert, auch wenn für das Element eine feste Breite gesetzt ist.

<div style="width: 615px; border: 1px solid black">

<p style="text-align: justify; font-style: italic">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

  
Diesen unschönen IE-Effekt kannst du vermeiden, indem du dem div-Element für den IE overflow:hidden zuweist. Dann wird eventuell zu großer Inhalt beim Rendern einfach am Rand abgeschnitten, die Box aber nicht mehr vergrößert. Damit der Rand der Kursivschrift dann nicht abgeschnitten aussieht, empfiehlt sich dazu ein padding von ein paar px.  
  
So long,  
 Martin  

-- 
Ja, ja... E.T. wusste schon, warum er wieder nach Hause wollte.

[marv]

Aah, vielen Dank!

Auf die Idee war ich blöderweise noch gar nicht gekommen.

[Steel]

Hi,

Das Problem tritt nur im Internet Explorer auf - der Firefox machts richtig (wenn man mal davon absieht, dass er den Rahmen auf die Gesamtbreite draufrechnet - aber das ist ja ne andere Sache).

Der Martin hat Dir ja schon eine Loesung genannt. Aber hierzu noch eine kleine Anmerkung: Der Firefox machts richtig. Der IE hat da was, das man Box Model Bug nennt. ;) Du stolperst also grad ueber noch einen Bug des IE...

[Patrick Andrieu]

Hallo Steel!

Du stolperst also grad ueber noch einen Bug des IE...

Ja: den italic bug.

Viele Grüße aus Frankfurt/Main,
Patrick