307505 - Gecko display errors on small em size

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[dingoth]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.7.10) Gecko/20050725 Firefox/1.0.6 (Ubuntu package 1.0.6)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.7.10) Gecko/20050725 Firefox/1.0.6 (Ubuntu package 1.0.6)

Good afternoon,

I'm not very good in writing english, I'll try to make my best to describe the bug.

I use the standard Firefox distribution for ubuntu, and the bug does not appear
on other browsers, such as Opera 8 (on ubuntu linux) and Safari (on Mac OS X,
latest version)

I try to have a <ul> element with a border of 0.05em. Inside the <ul>, I have
some <li> elements and right into each of them, I placed only one <a> element. I
gave that element a block display (it's a menu, so that trick lets the final
user clic anywhere in the <li> element to access the target page). I get no
error with this. But, when I add a :hover selector for the <a> element in the
CSS tag, to give it a different background color, the background color (when
hovering) overlaps the <ul> top border and the right border. The bug happens or
not in function of the initial font-size. I saw it when I used the standard
font-size of Firefox.

The bug is similar to this one, but I don't think it's the same :
https://bugzilla.mozilla.org/show_bug.cgi?id=224753

Reproducible: Always

Steps to Reproduce:
1. Use this HTML code :

    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>

2. Apply this Stylesheet :

    a {
      text-decoration: underline;
      font-weight: bold;
    }

    a:hover {
      background-color: #EEEEEE;
      color: inherit;
    }

    ul {
      border: 0.05em solid black;
    }

    ul > li {
      list-style-type: none;
    }
    
    ul > li > a {
      display: block;
      text-decoration: none;
      font-weight: normal;
      padding-left: 0.5em;
      padding-right: 0.5em;
    }
Actual Results:  
The <ul> top and right borders were overlapped by the <a> background-color when
hovering.

Expected Results:  
The software shouldn't overlap the borders assigned to the <ul> element.

I use no relevant extension, I

Comment 1

[dingoth]

Ooops ! I was mistaking. The bug did not appear using the standard size : the
body element uses this rule : "font-size: 0.9em;"

Comment 2

[dingoth]

Attachment: The testcase to show the bug ... Strict minimal HTML and CSS code.

Comment 3

[Adam Guthrie]

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20050907 Firefox/1.6a1
ID:2005090711

Works for me if I'm understanding you right. Could you please test this in the
latest builds? So many layout bugs have been fixed since 1.0.6...
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla1.8/

Comment 4

[dingoth]

I just tested with the version you gave me. The bug still happens.

Perhaps would you get some screenshots to see what is wrong (and what should be
good, as with other browsers) ?

Comment 5

[Adam Guthrie]

Attachment: comparison of testcase in Firefox and Opera

Comment 6

[Robert O'Callahan (:roc) (email my personal email if necessary)]

In my build, the UL doesn't have a border at all --- probably because it's
somewhat less than 1 pixel wide.