Log in / Register

Forum › Bugs

List item uses "text-align" from first child

mikkelricky
When using "text-align" on a block element that is first child of a list item, the list marker is aligned according to "text-align" from the child.

Example: The input
<ol>
<li><div style="text-align: right">right</div></li>
</ol>

will produce a list with both list marker ("1.") and the content ("right") aligned to the right.

Expected result: List markers should be left aligned even when first child uses "text-align" to align content.

Best regards,
Mikkel


I'm having problems uploading attachments so here is an example html document showing the bug
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
		<title>bug-text-align-inside-lists</title>
	</head>
	<body>
		<h1><code>text-align</code> inside lists</h1>

		<p>
			Apparently, the list item uses <code>text-align</code> from
			first child. This is inconsistent with browser rendering.
		</p>

		<ol>
			<li>
				<div>left</div>
			</li>
		</ol>

		<ol>
			<li>
				<div style="text-align: left">left</div>
			</li>
			<li>
				<div style="text-align: center">center</div>
			</li>
			<li>
				<div style="text-align: right">right</div>
			</li>
		</ol>

		<ul>
			<li>
				<div style="text-align: left">left</div>
			</li>
			<li>
				<div style="text-align: center">center</div>
			</li>
			<li>
				<div style="text-align: right">right</div>
			</li>
		</ul>

		<p>
			If content is added before element with <code>text-align</code> it works as expected.
		</p>

		<!-- this works -->
		<ol>
			<li>
				<div></div>
				<div style="text-align: left">left</div>
			</li>
			<li>
				<div></div>
				<div style="text-align: center">center</div>
			</li>
			<li>
				<div></div>
				<div style="text-align: right">right</div>
			</li>
		</ol>

		<ul>
			<li>
				<div></div>
				<div style="text-align: left">left</div>
			</li>
			<li>
				<div></div>
				<div style="text-align: center">center</div>
			</li>
			<li>
				<div></div>
				<div style="text-align: right">right</div>
			</li>
		</ul>

		<!-- this works -->
		<ol>
			<li>
				<span>&#160;</span>
				<div style="text-align: left">left</div>
			</li>
			<li>
				<span>&#160;</span>
				<div style="text-align: center">center</div>
			</li>
			<li>
				<span>&#160;</span>
				<div style="text-align: right">right</div>
			</li>
		</ol>

		<ul>
			<li>
				<span>&#160;</span>
				<div style="text-align: left">left</div>
			</li>
			<li>
				<span>&#160;</span>
				<div style="text-align: center">center</div>
			</li>
			<li>
				<span>&#160;</span>
				<div style="text-align: right">right</div>
			</li>
		</ul>

	</body>
</html>
mikeday
It seems that Prince layout for this case is compatible with Internet Explorer 8, which also aligns list item markers relative to the position of the first line box in the list item. Firefox behaves slightly differently for historical reasons, and the CSS specification does not mandate any particular positioning of list item markers for this reason.