Avatar

misaligned quotation mark for cited content (Technics)

by Auge ⌂, Tuesday, October 10, 2017, 21:00 (2362 days ago)

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.

[image]

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!

RSS Feed of thread