Issue 253: Block Element within LI Gets Incorrect Spacing

Reported by Richard Stonehouse, Jul 2, 2011

Steps to reproduce the problem:
1. Open the atttached example 'P-within-LI.html' in Vespucci.


Expected result: The first item (list item containing text only) 
should display on the same line as its bullet point and slightly 
inset.

The second item (paragraph within list item) should start on the 
same line as its bullet point - the top margins of the P and LI 
elements should, I think, be 'collapsed', even in a non-CSS browser. 
(This is what Opera, Firefox and Dillo do). It should also be 
slightly inset from the bullet point - the LI element should act as 
a 'container' for the block elements within it.

The second paragraph following within the same list item should be 
inset by the same amount as the first paragraph so that their LH 
edges line up - again due to teh 'container' effect.

The third item (DIV element within list item) should start on the 
same line as its bullet point and slightly inset.

The fourth item (list item containing text only) should display as 
the first.


Actual result:

The first and fourth list items display as expected, except that the 
bullets should ideally be inset a bit from the LH margin and the 
text should be closer to the bullet.

In the second item (paragraph within list item) the text of the 
paragraph starts below the bullet, with vertical space in between 
bullet and text, and is not inset from the LH margin. This applies 
also to the continuation paragraph.

In the third item (DIV within list item)  the text of the DIV again 
starts below the bullet, but without vertical space between bullet 
and text this time, and is not inset from the LH margin.

P-within-LI.tar.gz - 432 bytes

Comment 1 by Nikolaus Schaller, Jul 6, 2011

This is related to Issues 110 and 111

Comment 2 by Nikolaus Schaller, Oct 29, 2013

The key problem appears to be in the HTML -> DOM Tree translator 
that tries to handle <p> elements lazily (i.e. nested 
<p> elements are linearized because in HTML1 they were never 
closed and did work like a paragraph end instead of XML paragraph 
start).
This logic appears to wrongly move the explicit <p> up one 
level so that it is not a child of <li> but a sibling.

I.e. <li><p>something</li> becomes 
<li></li><p>something</p>

Therefore you don't see the indentation applied to <li> 
elements.

<div> is not handled lazily, i.e. it is correctly a child.

Comment 3 by William Kisner, Sep 28, 2019

The projects are awesome and the efforts made by you are easily 
visible in this https://awriter.org/extraessay-com-review/ 
magnificent project. you really have done a very good job. Thank's 
for letting us check upon your talent.

Small WebKit