misaligned quotation mark for cited content (Technics)
Hello
Meanwhile I worked on my theme, I encountered a misbehaviour, that was a few times reported before. The quotes of earlier entries are included in elements <blockquote>
and the CSS-rule says, that a blockquote get's an background image with a quotation mark (see the commented rule from my CSS file).
article blockquote { color: #777; font-style: italic; border-left: 5px solid hsl(0, 0%, 75%); /*background: url("images/quote.png") no-repeat left top;*/ padding: 0 0 0 1.25em; padding: 0 0 0 1.25rem; }
It was reported, that the quotation mark sits above the quote, when there are nested quotes. As you can see in my ruleset, I replaced the image by a left border to reduce the misplacement of the quote optically.
At that point I became aware, that the replacement of quoted content with HTML elements is a bit shady. This is the raw content of my test entry.
Hallo
[quote][quote]- Messer schleifen/schärfen
- Zwiebeln schneiden
- u.s.w. u.s.f.[/quote][/quote]
[quote]
Außerdem ist das Rumgeheule echt nervig.[/quote]
Stimmt, das brennt wie verrückt. Das kann man sich gar nicht ausdenken, sowas.
Tschö, Auge
I would expect the nesting to follow this rule:
<div class="body"> <p>Hallo</p> <blockquote> <blockquote> <p>- Messer schleifen/schärfen<br /> - Zwiebeln schneiden<br /> - u.s.w. u.s.f. </p> </blockquote> <p> Außerdem ist das Rumgeheule echt nervig. </p> </blockquote> <p>Stimmt, das brennt wie verrückt. Das kann man sich gar nicht ausdenken, sowas.</p> <p>Tschö, Auge</p> </div>
But in fact the double nested blockquote elements got closed and a new blockquote will be opened. That and the leading <br />
in the second blockquote-block causes the misalignment of the quotation mark and also the left border.
<div class="body"> <p>Hallo</p> <blockquote> <blockquote> <p>- Messer schleifen/schärfen<br /> - Zwiebeln schneiden<br /> - u.s.w. u.s.f. </p> </blockquote> </blockquote> <blockquote> <p><br /> Außerdem ist das Rumgeheule echt nervig. </p> </blockquote> <p>Stimmt, das brennt wie verrückt. Das kann man sich gar nicht ausdenken, sowas.</p> <p>Tschö, Auge</p> </div>
I've no idea how to solve this. This posting is only for documentation of my findings.
Tschö, Auge
--
Trenne niemals Müll, denn er hat nur eine Silbe!