Closed Bug 258198 Opened 20 years ago Closed 20 years ago

Extra space below images in XHTML mode

Categories

(Core :: Layout: Images, Video, and HTML Frames, defect)

Product:
Core
Component:
Layout: Images, Video, and HTML Frames
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED DUPLICATE of bug 22274

People

(Reporter: henrik.pauli, Assigned: jdunn)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7) Gecko/20040707 Firefox/0.9.2

I have encountered this a couple times with most Geckos I had, so, though I use
Firefox, I'll file it under general browser.

The site validates in both CSS and XHTML 1.1

If I take away this part:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

and put just <html> instead, the images won't have the spaces around them.

In certain situations, such as out-of-fashion table-based designs, the
workaround is to avoid newlines (\n and \r\n) after the <img> the </a> or the
</td>.  But here, I don't know what to do.  I tried to eliminate all kinds of
whitespaces, but the extra spacing is still there (Select All to see it properly).

Is this a bug or something intentional due to som obscure rule set by W3C?

Reproducible: Didn't try
Steps to Reproduce:
PS: Boog does not depend on MIME type.  application/xhtml+xml breaks just as
nicely as text/html.  I'll revert to text/html for now.

Also, IE 6 does not show the boog (when I feed it text/html of course).
This is a dupe of an invalid bug IIRC.
Whiteboard: DUPEME
Found it.

*** This bug has been marked as a duplicate of 22274 ***
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
Whiteboard: DUPEME
Verified

To learn how to work around the problem, read
http://devedge.netscape.com/viewsource/2002/img-table/
Status: RESOLVED → VERIFIED
Actually, yes, I learnt that much in the other bug.

Thing is, that if I vertical-align so that the extra space goes up, it will be
even bigger, and if anything, line-heighting and font-size'ing the block where
these images are, does not really help.  That vertical-align trick just didn't
do it, regardless how much bigger the images were than the text (it was more
annoying to see the a:hover's background colour get painted than the buttons
being 2px apart from each other).

I found that some suggestions both there and on the site went in the direction
that "you are probably doing pixel magic with spacer images".  In fact, I'm not,
all I want is a line of images close to each other, on the same line and I want
to avoid position: absolute'ing them all (which is modern pixel magic and
perhaps just as disgusting as spacers of old time).

I went with the block solution and floating where needed.  Feels stupidly
hackish, but works sort of.

Thanks anyway, maybe some others can learn from it too.  Now to find a boog
about overflowed divs being bloody hard to scroll...
Product: Core → Core Graveyard
Product: Core Graveyard → Core
You need to log in before you can comment on or make changes to this bug.