57123 - binarix.com - Images have gaps in XHTML

Status: VERIFIED FIXED

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

Description

[Bojan Smojver]

From Bugzilla Helper:
User-Agent: Mozilla/4.75 [en] (X11; U; Linux 2.2.17 i586)
BuildID:    2000092909

The menu on the left hand side of the page has images which are supposed to be
layed without gaps. This is true if document type is HTML transitional but not
if it's XHTML transitional.

Reproducible: Always
Steps to Reproduce:
1. Load the page.
2.
3.

Actual Results:  Gaps are showing where there should be none.

Expected Results:  Should render with no gaps like with HTML DTD.

Comment 1

[Henri Sivonen (:hsivonen)]

This is not a bug.

The XHTML doctype declaration triggers the standards layout mode and the CSS box
model is applied. (Mozilla has two layout modes: quirks and standard. To use the
quirks layout mode, remove the doctype declaration.)

The <a> element is a non-replaced inline element. As per spec its height is
given by the line-height property--not the height of the content.
http://www.w3.org/TR/REC-CSS2/visudet.html#q15

Also, by default images are aligned with the baseline of the <a> element--not
with the bottom of the <a> element box.
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align

These aspects of the layout can be changed by explicitly overriding the default
values via CSS.

Comment 2

[Henri Sivonen (:hsivonen)]

Forgot to reassign...

Comment 3

[Blake Ross]

-> [e-mail] for my evangelism bugs.

removing the now-depreciated evangelism-related keywords.

setting platform to All.

Comment 4

[Blake Ross]

Reassigning evangelism bugs to [e-mail].

Comment 5

[Guille (bisho)]

I have some pixel images to control the height & width of tables.When I put an image inside a <td> with XHTML and the DOCTYPE, Mozilla renders more space than the desired.I have also been testing with the line-height property, as Henri Sivonen comments, and I have better results, but still there is a gap.I have a:<td class="lineheight1pixel"><img src=".." height="1"...></td>The class is defined as { line-height: 1px; } and its rendered as 3 pixels (I suppose that is 1 pixel before the image, 1 pixel the image an 1 pixel after the image.I have search in the CSS reference, and its correct, whem you put line-height to one value, it should be rendered with 1 pixel above and 1 pixel at the bottom, but this means that there isn't a suitable way of maintaining the DOCTYPE and have a good render on Mozilla.Its planned to solve it or not???

Comment 6

[Nick Lewycky]

There are gaps around images that I cannot control with CSS.

I've put a testcase up on http://mxc.ca/mozbug/ . Removing the DOCTYPE makes the
page render properly. I have tried loading up my stylesheet with all the
no-padding no-border commands I could find and was unable to remove the
whitespace beneath my image.

Of course, I'd be happy if someone could show me how this can be done...

Comment 7

[Christophe Saout]

img { vertical-align: bottom; }
td { line-height: 1px; }

The first helps a lot (removes the gap)
But the second is a big hack (works in windows, but not in linux, since it
doesn't find a find as small as 1px height).

The first one (default vertical-align: baseline; is documented in w3c css) but I
can't find where the second one (<td><img ... height="1"></td>) is described. It
seems that the image is rendered as text but there is not a single letter. How
can you turn this off? Remember: Specifing the use of a font of height 1px is a
hack!

Comment 8

[Nick Lewycky]

Actually, using "vertical-align: bottom;" removes all the gap for me running
Linux with moz092, while using baseline instead of bottom only helps a little.

Thank you chtephan!

Comment 9

[Bob Clary [:bc] (inactive)]

Arun, I'm giving you all the Linux bugs. If these bugs can be confirmed for
other OS's please (someone) change the Platform/OS to All/All and reassign to
the default Evangelism Component Owner.

Comment 10

[Bob Clary [:bc] (inactive)]

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

Comment 11

[Bob Clary [:bc] (inactive)]

Arun, I am taking your Linux bugs minus banks. Hope you don't mind.

Comment 12

[Bob Clary [:bc] (inactive)]

It appears to me that this page has been redesigned and no longer displays the
reported gaps. I would like to mark this bug as fixed. Any objections?

Comment 13

[Bojan Smojver]

Yes, the page has been redesigned and there are ways to drop the gaps. The main
thing is to make sure the style for both the <a> and <img> contained within it
are OK.

Usually this helps a lot in the CSS stylesheet:

line-height: inherit;

for both <a> and <img>. There are a few other tricks, like keeping your table
cells the correct height, but the bottom line is: it can be done.

So, yep, close it.

Comment 14

[Kai Lahmann (is there, where MNG is)]

v