Numbering is off centred even with li and p the same

[oceanclub]

I have an issue in my stylesheets when if a <p> tag is nested within a <li>, the numbering in PDF output is offcentre as above, even though the styles are the same. (If the text is directly within the <li> tag its fine but this is not always possible.

An excerpt from my stylesheet is as follows. As you can see, the p and li styles have the same light height and padding. I even tried a li > p combinator style to see if that worked with no luck. Any help appreciated,

Paul

Code: Select all

p
{
	font-size: 1em;
	/* 12pt */
	line-height: 1.5;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

li
{
	font-size: 1em;
	/* 12pt */
	line-height: 1.5;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

li > p
{
	font-size: 1em;
	/* 12pt */
	line-height: 1.5;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

[SteveS]

From memory this is an issue with the way browsers display lists and cannot be overcome.

I recall the solution is to use autonumbering to create the list. This also overcomes some of the other difficulties with HTML lists.

[oceanclub]

From memory this is an issue with the way browsers display lists and cannot be overcome.

I recall the solution is to use autonumbering to create the list. This also overcomes some of the other difficulties with HTML lists.

HI Steve,

Just to note this is in a PDF?

P.

[Psider]

I feel like I've seen this for web output where some style has been set to inline-block, and the margins and padding then cascade through. How css gets translated to pdf is something of a black box, but maybe it's a hint.

Another thing to try would be to generate to a web output using your pdf stylesheet, then use the developer tools to inspect the code. I find the Computed tab is useful as it shows what various values calculate to, and the dropdown shows all the spots that contribute

[oceanclub]

When I checked HTML5 output against the stylesheet it looks fine. What I did then was go back to a default Flare stylesheet and see if that worked. That did, so I checked the difference between it and mine and it was the use of padding-top and padding-bottom in the li and p styles. I removed those, just using margin-top and margin-bottom. I also then set a "li p" combinator as the same. Numbered lists now look fine in PDF output.

P.