5851 - Mozilla includes 6 extra pixels of table spacing over other browsers

Status: VERIFIED DUPLICATE of bug 5821

(Core :: Layout: Tables, defect, P3)

Description

[Andrew Niese]

Go to http://www.arez.com/fs using Netscape 4.51 or IE4 / IE5 and look at the
top navigation bar, which consists of a table and a cell for each GIF file.
notice that there is no spacing between the images in the cells and the bottom
of the table.

Now go to the same URL using Mozilla 5.0 (I used the 4/30 build). Notice that
Mozilla 5.0 puts in 6 extra pixels of spacing from the cell graphics to the
bottom of the table compared to other browsers.

Please also check the image located at http://www.wctc.net/~drtree/mozbug.gif
for a side-by-side comparison.

Who is right? The code for the table is:


<table border="0" cellpadding="0" cellspacing="0" width="100%"
bgcolor="#000000">
    <tr>
        <td colspan="2"><a href="index.html"><img
        src="freshleft1.gif" alt="Fresh Software home" border="0"
        width="94" height="38"></a><a href="snoop"><img
        src="navbar2/snoop.gif" alt="SuperSnoop" border="0"
        width="32" height="38"></a><a href="xns"><img
        src="navbar2/xns.gif" alt="X-NetStat" border="0"
        width="30" height="38"></a><a href="sentry"><font
        color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/sentry.gif" alt="Sentry" border="0"
        width="36" height="38"></strong></font></a><a
        href="topten"><font color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/topten.gif" alt="TopTen list maker"
        border="0" width="34" height="38"></strong></font></a><a
        href="antigen"><font color="#000000" size="5"
        face="Arial"><strong><img src="navbar2/antigen.gif"
        alt="AntiGën - Back Orifice cleaner" border="0"
        width="33" height="38"></strong></font></a><a
        href="busjack"><font color="#000000" size="5"
        face="Arial"><strong><img src="navbar2/busjack.gif"
        alt="BusJack - NetBus remover" border="0" width="35"
        height="38"></strong></font></a><a href="pmagic"><font
        color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/pmagic.gif" alt="Port Magic" border="0"
        width="36" height="38"></strong></font></a><font
        color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/space1.gif" width="40" height="38"></strong></font><a
        href="prod"><font color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/prod.gif" alt="Complete list of products"
        border="0" width="75" height="38"></strong></font></a><a
        href="dev"><font color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/dev.gif" alt="Projects in development"
        border="0" width="51" height="38"></strong></font></a><font
        color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/fade1.gif" width="64" height="38"></strong></font><a
        href="links"><font color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/links.gif" alt="Links to worthy websites"
        border="0" width="43" height="38"></strong></font></a><a
        href="music"><font color="#000000" size="5" face="Arial"><strong><img
        src="navbar2/music.gif" alt="Music reviews" border="0"
        width="26" height="38"></strong></font></a><a
        href="contact.html"><font color="#000000" size="5"
        face="Arial"><strong><img src="navbar2/contact.gif"
        alt="Contact Us" border="0" width="24"
height="38"></strong></font></a></td>
    </tr>
</table>

Comment 1

[karnaze (gone)]

Moving to M7.

Comment 2

[karnaze (gone)]

Moving to M9.

Comment 3

[John Morrison]

This '6 extra pixels' is a result of bug #5821 "{compat} Nav4 vs CSS2 line box
model" -- it's not a table bug; it's the calculation of line-height and the
vertical alignment of the contents of the TD.

That is unless ChrisK sees some other problem for this table (so I won't mark
it duplicate).

Comment 4

[John Morrison]

By the way, add this CSS to the test table above and watch the gap disappear:

   <style>
    img {vertical-align: text-bottom;}
   </style>

Although I can't actually load the IMG from the original site right now (not
responding). And to completely eliminate the gap use this CSS:
<style>
img {vertical-align: text-bottom;}
font {vertical-align: text-bottom;}
a {vertical-align: text-bottom;}
strong {vertical-align: text-bottom;}
</style>

Comment 5

[Andrew Niese]

I still think it's a matter of Mozilla not rendering it correctly - it displays
properly / in uniform on ALL other browsers.

So what I'm saying it don't close this bug on "you have bad html code in there".

Comment 6

[John Morrison]

Sorry. I wasn't implying that it should be closed because "you have bad html
code in there". In fact, there is nothing syntactically wrong with the HTML
in the test case. I agree that non-CSS pages shouldn't _require_ the addition
of CSS in order to make them work.

I merely presented the CSS as a way to demonstrate/verify that this is the
same bug as bug #5821 --- which is well on its way to achieving all-time
'most reported' bug status ;)

Comment 7

[Hixie (not reading bugmail)]

3jrgm: What about bug 991? That has at least as many dups as bug 5821!

Anyway. This is definitely a duplicate of bug 5821. Marking as such.


*** This bug has been marked as a duplicate of 5821 ***

Comment 8

[John Morrison]

Yes: bug #991 and bug #5821 are neck and neck. But, bug #5821 has such an "I
don't even have to have had my first three cups of coffee in the morning, and
I can still see it" manifestation that it's threatening to pull away from the
pack ;-)

Comment 9

[Jay Patel [:jay]]

Verified Dup