81698 - nike.com - Table images are rendered with extra gaps and spaces (HTML 4.0.1 doctype)

Status: VERIFIED FIXED

(Tech Evangelism Graveyard :: English US, defect, P1)

Description

[Chris Petersen]

Build: 2001051708
Platform: All
Expected results: The table images shouldn't have gaps and be flush.
What I got: Gaps are between various images in the table.


Steps to reproduce:

1) http://www.nike.com/usa

2) Notice the gaps between the large main image on page.

3) This page is using a HTML 4.0.1 with url so it's rendered in standards mode

4) If you replace the Doctype with 4.0, the page is rendered in quirks mode. No 
gaps are present.

Comment 1

[Chris Petersen]

Attachment: nike page with 4.0 doctype- renders in quirks mode

Comment 2

[Hixie (not reading bugmail)]

this should go to evang, what we're doing is actually correct (it's the whole
inline box model issue).

Comment 3

[Emmanuel Bourg]

Attachment: Gap bellow image HTML4.0

Comment 4

[Emmanuel Bourg]

Attachment: Gap bellow image HTML4.01

Comment 5

[Emmanuel Bourg]

Actually the image doesn't need to be in a table to generate this gap, see my 2
previous attachements (sorry for the typo in 'below' ;) ). In HTML 4 (quirks
mode) it looks "correct", but a few pixel gap appears in HTML 4.01 (standard mode). 

Quote from the html 4.01 spec :

13.7.2 White space around images and objects

Attribute definitions

hspace = pixels [CN]
Deprecated. 
This attribute specifies the amount of white space to be inserted to the left
and right of an IMG, APPLET, or OBJECT. The default value is not specified, but
is generally a small, non-zero length.

vspace = pixels [CN]
Deprecated. 
This attribute specifies the amount of white space to be inserted above and
below an IMG, APPLET, or OBJECT. The default value is not specified, but is
generally a small, non-zero length.



If there is a non zero default value a simple style like "img { margin: 0;
padding: 0}" should override it, shouldn't it ? This doesn't work though.

Comment 6

[Bob Clary [:bc] (inactive)]

I thought hspace and vspace related to the margin. I would have thought your img
{ margin: 0px; } would have worked. Can you attach your test page to this bug so
we can look at your CSS and HTML?

Comment 7

[Emmanuel Bourg]

Attachment: Effect of line-height on images (standard mode)

Comment 8

[Emmanuel Bourg]

Attachment: Effect of line-height on images (quirks mode)

Comment 9

[Emmanuel Bourg]

Attachment: Effect of line-height on images (quirks mode)

Comment 10

[Emmanuel Bourg]

After some investigations it seems the way to solve this issue is to set the
line-height to 0. I added 2 attachements to demonstrate the effet of line-height
on images, in standard mode (attachment 37790 [details]) and quirks mode (attachment 37792 [details]).

In standard mode the cell inherits from the line-height, and thus the image
doesn't stick to the border. Ian is right this is not a bug, web designers are
just not used to this rule.

Comment 11

[Bob Clary [:bc] (inactive)]

All Evangelism Bugs are now in the Product Tech Evangelism. See bug 86997 for
details.

Comment 12

[R.K.Aa.]

Since this is a duplicate of bug 22274:
Is the any intention of reopening the somewhere between 50-80
duplicates/indirect duplicates there, and assigning to evangelism?

Comment 13

[Bob Clary [:bc] (inactive)]

There are 47 such bugs...

http://bugzilla.mozilla.org/buglist.cgi?resolution=DUPLICATE&long_desc=***+This+bug+has+been+marked+as+a+duplicate+of+22274+***&long_desc_type=casesubstring

I don't think spamming the universe by reopening and reassinging these bugs is
necessarily the best approach. What would you say to us just creating new
evangelism bugs for each of the dupes including bug 22274 and starting fresh?

Comment 14

[R.K.Aa.]

Personally I think evangelizing every error made by random web-authors is
overkill. I think this should be made a dup as well. (I also think that if MSIE6
manages the matter without the same gaps Moz displays, status of bug 22274
should be reconsidered.. again.)

For how to solve the technical matter, this seems to be the most frequently
adviced approach; quoting from bug 103108:

------- Additional Comments From Jason Johnston 2001-10-04 08:13 -------

That page uses a strict-mode-invoking doctype, causing images to be properly
rendered according to the CSS inline box model. (see bug 22274 for details.)

Setting style="display:block;" on the images will remove them from the inline
box model and you'll get the expected cell height.

Comment 15

[Erich 'Ricky' Iseli]

I don't know if I missed something, but up to now I thought that the
Transitional doctype invokes quirks mode while the strict doctype invokes the
normal one. In quirks, this problem should not happen.

All this seemed to apply in Mozilla 0.9.4, but now in Moz 0.9.5 a page with HTML
4.01 Transitional is displayed in the standard mode.

Comment 16

[Doron Rosenberg (IBM)]

seems to be fixed, they also take us in consideration deeper inside their layout
for js

Comment 17

[Bob Clary [:bc] (inactive)]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
verified