Ich bin ja ständig dabei, das Design dieser Seite zu verbessern. Heute ist mir ein Problem aufgefallen, für das ich noch nicht wirklich eine Lösung gefunden habe: Das Aussehen von Block-Elementen, welche neben Float-Elementen stehen. Der Textfluss wird ja entsprechend angepasst, wenn neben einem Absatz ein gefloatetes Bild steht. Das betrifft aber offensichtlich nicht die Border-Eigenschaft, wie man anhand meiner Blockquote-Formatierung sehen kann.

Das ist ein normales blockquote-Element, erstmal zur Ansicht. Es hat eine andere Schriftfarbe und links einen Balken.

So, und nun noch mal mit einem Float daneben:

Normaler Text umfließt die Box wie gewünscht. Normaler Text umfließt die Box wie gewünscht.

Der Text des Blockquote-Elements umfließt die Box ebenfalls. Das gilt allerdings leider nicht für die Ränder der Blockquote-Box. Diese verschwinden unter dem gefloateten Element. Der Text des Blockquote-Elements umfließt die Box ebenfalls. Das gilt allerdings leider nicht für die Ränder der Blockquote-Box. Diese verschwinden unter dem gefloateten Element. Der Text des Blockquote-Elements umfließt die Box ebenfalls.

Die Erklärung dafür findet sich bei thestyleworks.de:

Wenn ein floatiertes Element durch seine Platzierung eine Block-Box des normalen Elementflusses teilweise abdeckt, dann werden die in der Block-Box liegenden Textzeilen (der Vordergrund) um die Breite des float-positionierten Elementes gekürzt. Eine eventuell gesetzte Hintergrundgrafik wird aber nicht seitlich verschoben. Dadurch verschwindet sie teilweise ‚unter‘ dem floatierten Element. Der Grund dafür ist, dass die tatsächliche Breite des Elementes nicht geändert wird, um die Rechteckform des Blocks beizubehalten. Hintergründe richten sich dann an der tatsächlichen Breite des Elements aus, Vordergründe fließen um das floatierte Element herum.

Neben meinen Rahmen betrifft dieser Effekt also auch Hintergrundfarben und -bilder, welche sich alle an der eigentlichen Box ausrichten.

Eine wirkliche Lösung ist mir für dieses Problem noch nicht eingefallen. Beziehungsweise eine Lösung lautet natürlich, blockquotes nicht mit Rändern auszuzeichnen. Ich finde diese Art der Zitatkennzeichnung aber ehrlich gesagt recht hübsch und übersichtlich (vielleicht, weil man es von E-Mails her gewohnt ist?!). Natürlich kann man die Kante auch auf die rechte Seite machen oder blockquotes mit einer Hintergrundfarbe versehen etc. Die Einrückung, welche die meisten Browser darstellen, wenn sonst keine Formatierung im Stylesheet angegeben ist, wird neben einer Float-Box ebenfalls nicht dargestellt, so wie jede Art von Margin oder Padding (in Bezug auf die Seite neben dem Float).

Das gleiche Problem wirkt sich auch auf Listen neben Floats aus.

• Wie man sieht, steht der Punkt über der Box.
• Das liegt daran, dass die Position der Listenpunkte als „outside“ definiert wurde.
• Mit „inside“ würden sie zwar nicht auf dem Bild stehen, dafür wären die weiteren Textzeilen des Listenpunktes aber auch nicht auf den Anfang der ersten Zeile eingerückt.

Fürs erste heißt es für mich, die Kombination aus blockquotes bzw. Listen und Bildern zu vermeiden. Das ist aber nicht wirklich eine befriedigende Lösung, und auf die Dauer fällt mir hoffentlich noch was besseres ein. 🙂