Open Bug 287774 Opened 19 years ago Updated 2 years ago

Incorrect rendering of CSS styled list

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows 98
Type:
defect

Tracking

()

People

(Reporter: ajwitte, Unassigned)

References

Details

(Keywords: testcase)

Attachments

(2 files)

Testcase from the reporter
565 bytes, text/html
Details
screenshot of problem
27.33 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.6) Gecko/20050317 Firefox/1.0.2
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.6) Gecko/20050317 Firefox/1.0.2

The HTML/CSS attached does not render correctly in Firefox on Windows.
Specifically, there is a 1px wide red line below each of the white borders, and
there should not be. The Linux version of Firefox I tested rendered the page
correctly.

This may be possible to work around, but all workarounds I tried caused the page
to break in Linux versions of Firefox, in KHTML-based browsers, or both.

Reproducible: Always

Steps to Reproduce:
1. Open attached HTML page in Firefox.
2. Observe extraneous 1px red line.
Actual Results:  
A 1-pixel wide red line was rendered where there should be none (below the white
borders applied to the <a> elements).

Expected Results:  
No red line should appear.

Here is the minimal HTML and CSS I used to reproduce the bug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
<style type="text/css" media="screen" title="Standard">
ul {
list-style: none;
padding: 5px 0 5px 0;
background-color: red;
}

li {
display: inline;
margin: -5px 0 0 0;
}

a {
padding: 5px 10px 5px 10px;
border-right: 10px solid #fff;
}
</style>
</head>

<body>
<ul><li><a href="#">Foo</a></li><li><a href="#">Bar</a></li><li><a
href="#">Baz</a></li></ul>
</body>
</html>
-> Style system
Assignee: firefox → dbaron
Component: General → Style System (CSS)
Product: Firefox → Core
QA Contact: general → ian
Version: unspecified → Trunk
Assignee: dbaron → general
Component: Style System (CSS) → GFX
Depends on: 173051
Keywords: testcase
Is this still an issue now that bug 173051 is fixed?  Note that you'd need to
test a trunk build to check...
Testing under Windows XP SP2:

With Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5, there is a 1 px red line below the white borders.

With Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a7pre) Gecko/2007072019 Minefield/3.0a7pre, there is a 1 px red line ABOVE the white borders, not below.

So there's still a rendering issue, although it's slightly different under Gecko 1.9 than 1.8.1.

With IE 6, there is no red line above or below.
With IE 7, there is no red line above or below.
With Safari 3.0.2, there is a red line below.

Both trunk and 1.8.1 under Linux render this properly.
Status: UNCONFIRMED → NEW
Ever confirmed: true
I don't see this on trunk under windows; can someone provide a screenshot of the wrong rendering?  I just see 3 red blocks and then a bigger red block extending to the right, no lines anywhere.
Attached image screenshot of problem — 
Screenshot taken with a nightly build on Windows XP SP2:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a8pre) Gecko/2007082208 Minefield/3.0a8pre
Product: Core → Core Graveyard
Seems to WFM on Linux.
Assignee: general → nobody
Component: GFX → Layout
Product: Core Graveyard → Core
QA Contact: ian → layout
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: