Lines of text written in Lucida Console have a strange gap between lines that cannot be removed with any stylesheet changes when rendered on Firefox. In IE, this gap does not exist.

RESOLVED INVALID

Status

()

Core
Layout
--
trivial
RESOLVED INVALID
12 years ago
12 years ago

People

(Reporter: mef, Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

This bug occurs with plain lines of text with line breaks, with multiple rows in a table, and with divs and spans on top of one another.

Reproducible: Always

Steps to Reproduce:
render the following HTML in Firefox:

<html><head>
    <title>Bug Demo</title>
    <style type="text/css">
        body {
          margin: 0;
          padding: 0;
          background: black;
        }
        
        p {
          color: white;
          background: black;
        }

        td, div, span {
          margin: 0;
          padding: 0;
          font-family: "lucida console", monospaced;
          color: white;
          background: black;
        }
        
        .highlight {
          background: white;
          color: black;
        }
    </style>
</head>
<body>
<p>
Lines of text written in Lucida Console have a strange gap between lines that cannot be removed when rendered on Firefox. In IE, this gap does not exist.
</p>
<p>
Demo #1 (tables):<br /><br />
<table style="margin: 0px;" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
</tr>
<tr>
    <td>blah</td>
    <td><span class="highlight">blah</span></td>
    <td><span class="highlight">blah</span></td>
    <td>blah</td>
</tr>    
<tr>
    <td>blah</td>
    <td><span class="highlight">blah</span></td>
    <td><span class="highlight">blah</span></td>
    <td>blah</td>
</tr>    
<tr>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
    <td>blah</td>
</tr>    
</table>
</p>
<p>
Demo #2 (divs + spans):
<div>
    <span>blah</span><span>blah</span><span>blah</span><span>blah</span>
</div>
<div>
    <span>blah</span><span class="highlight">blah</span><span class="highlight">blah</span><span>blah</span>
</div>
<div>
    <span>blah</span><span class="highlight">blah</span><span class="highlight">blah</span><span>blah</span>
</div>
<div>
    <span>blah</span><span>blah</span><span>blah</span><span>blah</span>
</div>
</p>
</body></html>

Actual Results:  
small gaps between rows

Expected Results:  
no gaps, like Internet Explorer
(Reporter)

Comment 1

12 years ago
Created attachment 236973 [details]
Demonstration of bug 351573

Comment 2

12 years ago
This has nothing to do with a specific font. 
I see the same behaviour with any font.

You can "remove" the gaps by adding "line-height: 100%".
I think that Firefox does the right thing although I'm not sure.

CC'ing Uri who might be able to help.

Updated

12 years ago
Component: General → Layout
Product: Firefox → Core
Version: unspecified → Trunk
(Reporter)

Comment 3

12 years ago
(In reply to comment #2)
> This has nothing to do with a specific font. 
> I see the same behaviour with any font.
> 
> You can "remove" the gaps by adding "line-height: 100%".
> I think that Firefox does the right thing although I'm not sure.
> 
> CC'ing Uri who might be able to help.
> 

Change the font to Courier New and there are no gaps.
(Reporter)

Comment 4

12 years ago
(In reply to comment #3)
> (In reply to comment #2)
> > This has nothing to do with a specific font. 
> > I see the same behaviour with any font.
> > 
> > You can "remove" the gaps by adding "line-height: 100%".
> > I think that Firefox does the right thing although I'm not sure.
> > 
> > CC'ing Uri who might be able to help.
> > 
> 
> Change the font to Courier New and there are no gaps.
> 

line-height: 100% seems to fix this. 
(Reporter)

Updated

12 years ago

Comment 5

12 years ago
When the user doesn't define value for line-height, it should be "normal".
According to article on W3C website "Normal" can be number value between 1.0 to 1.2.

quotation:
{
"Normal" - Tells user agents to set the computed value to a "reasonable" value                                                   based on the font size of the element. The value has the same meaning as   <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.
}

So I think that both IE and Firefox does the right thing.
I guess that on IE "normal" is 1.0 and on Firefox "normal" is something like 1.2.

more information can be found on:
http://www.w3.org/TR/css3-linebox/#line-height

Comment 6

12 years ago
Marking this Invalid due to comment #5.
I think that similar isuue was discussed on bug 22274.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 12 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.