319724 - CSS line-height is inconsistent between each line.

Status: RESOLVED DUPLICATE of bug 442139

(Core :: CSS Parsing and Computation, defect)

Description

[Mike Headley]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

When setting the line-height, I have noticed that the spacing between each line is not the same.  For instance, if I set the line-height to 32px, I will have space between the first two lines as 32px but between the 2nd and 3rd lines, the gap is 31px.  I had a list of numbers with each number ending with a line-break.  So it was one long column of number.  I created a tiling background image that would create alternating background colors behind each number like a spreadsheet.  I had noticed even though my calculations were correct, the numbers and background were not aligning correctly.  I looked at the same page in Safari and it was correct.

Reproducible: Always

Steps to Reproduce:
1. Create a column of information.  For instance, type 1 through 30 and end each number with a line-break tag.  You will have one long column of numbers.
2. Create the background image.  Create an image that is 1 pixel wide by 30 pixels high.  Make the top 15 pixels light grey and the bottom half white.  So when it tiles as a background, it will look like proportionate stripes horizontally across the page.  Essentially creating a rule.
3. Using CSS, adjust your line-height so the numbers align with the stripes.  I was not able to accomplish this correctly.
4. As another method of proof, take a screenshot and import it into Photoshop or another image editor.  Zoom in close and count the pixels between each line.  They were inconsistent in my case.

Actual Results:  
I had inconsistent true line-height.  I had set the line height to 32px but the actual figure I had was for each line - 32, 32, 31, 32, 31, 32, 31, 32, 31.  I was using Arial.

Expected Results:  
It should have made the space between each line the same for every line.  32 pixels between each line.

I had considered font problems or using odd number of pixels.  It didn't matter.  I also ran the same page in Safari (2.0.2) and it rendered exactly as expected.

Comment 1

[Stefan [:stefanh]]

Can you please attach a testcase?

Comment 2

[Mike Headley]

Attachment: Screenshot from Firefox

This is a screenshot from Firefox 1.5 running on OS X 10.4.3.  This shows the text not lining up correctly with the background graphic.

Comment 3

[Mike Headley]

Attachment: Safari screenshot

This is a screenshot from Safari 2.0.2 running on OS X 10.4.3.  The text lines up correctly with the background image and follows CSS rules.

Comment 4

[Mike Headley]

Attachment: Sample HTML

Here is the sample page used to create the screenshots I attached.

Comment 5

[Mike Headley]

Attachment: Background image

This image is the background image to be used with test.html.