283767 - List elements align incorrectly when margin-left CSS is used.

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[Steve Cygan]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.6) Gecko/20050223 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.6) Gecko/20050223 Firefox/1.0.1

Firefox seems to display lists with a left margin set further to the right than
other elements with the same margin.  

Reproducible: Always

Steps to Reproduce:
1. View the following HTML:

<div style="margin-left:10%;">|</div>
<ul style="margin-left:10%;">
<li>|</li>
</ul>
<ol style="margin-left:10%;">
<li>|</li>
</ol>
Actual Results:  
The text of the div element isn't aligned with either of the list elements.

Expected Results:  
The div's margin should either line up with the bullet or the actual text of the
list elements.

Comment 1

[Bill Gianopoulos [:WG9s]]

Confirming behavior on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2)
Gecko/20050221 Firefox/1.0+.

moving to correct component.

Comment 2

[Hermann Schwab]

Using DOM inspector I found: OL and UL have a padding-left: 40px 
caused by:  resource://gre/res/html.css padding-start-value 40px

Comment 3

[Hermann Schwab]

Attachment: Reporter's testcase

used with DOM inspector to check the paddings in BoxModel, CSS Style Rules and
Computed Style

Comment 4

[Mats Palmgren (inactive)]

Mozilla/Firefox is using padding to indent the list items.
The rendering is correct for the given markup/styles.

-> INVALID

Comment 5

[Bill Gianopoulos [:WG9s]]

So to ensure the <div> and <ul> items align, the html should really specify
margin size and padding.  Makes sense to me.

Comment 6

[Steve Cygan]

I still don't get it, I thought structure and style were supposed to be seperated.

From the HTML 4.01 specification: "We discourage authors from using lists purely
as a means of indenting text. This is a stylistic issue and is properly handled
by style sheets."