301949 - non available image in link breaks layout

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Hermann Schwab]

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b4) Gecko/20050723 SeaMonkey/1.0a

http://www.gamefaqs.com/ has a daily poll in the middle of their site.
This poll has a background image, a link with a non-available image, some inputs
and submit buttons. While the page is loading, the inputs are positioned
correctly, the non-available image has a height. After the page is loaded, the
heigth ogf the non-available image shrinks to zero, the inputs move up, and
that's bad because of the background.
Opera doesn`t show this behaviour.
Maybe it's a TE bug, as the non-available image is used only to position the
inputs in relation to the background, and define a click-area for the link.

I'll attach two testcases, first with missing image, second with missing image
replaced by a lizard.

Comment 1

[Hermann Schwab]

Attachment: testcase missing an image

<a
href="http://chkpt.zdnet.com/chkpt/gfaqsfront_castrol_click/http://www.castrol.com/castrol/productdetail.do?categoryId=82915464&contentId=6030785"
target="_blank"><br>
<img src="http://image.com.com/b.gif" width=220 height=55 BORDER=0></a>

http://image.com.com/b.gif gives:

Connection Failure Error
Net Timeout Error
Redirect Loop Error
Unknown Socket Error
Net Reset Error
Offline Error
The connection was refused when attempting to contact image.com.com.

The address (URL) is not a valid format and cannot be read. A typical address
will start with "http://", followed by an address, (e.g. www.netscape.com),
followed by a path to the content (or just "/"). A common cause for the problem
is using backslashes(\) instead of forward slashes (/).

The file specified by the address (URL) cannot be found. Check that the file
exists and that you have sufficient permissions to view it.

The address (URL) does not correspond to a known site and could not be loaded.
This could be due to a misspelling in the address or because the site does not
exist. If the address is known to be valid, or if the problem occurs for many
sites, it may be an issue with your proxy service (if you use one) or the
directory name service lookup. In such cases you should consult your system
documentation, administrator or Internet Service Provider (ISP) as appropriate
for further assistance.

The address (URL) starts with a protocol that is not recognized by the browser.
A protocol is the part at the front of the address, such as http: or ftp: which
tells the browser how to connect to the site. In this instance, the protocol is
unknown so loading cannot continue. Check that the address is correct before
retrying.

The browser was unable to connect to the specified site, even though it exists.
This may be because the site does not accept connections from your computer,
the service may be down, or the site does not support the service or port that
you tried to connect to.


Most of the message above is only seen after pasting here, the place were I
copied was showing:

Connection Failure Error   

The connection was refused when attempting to contact image.com.com.

The browser was unable to connect to the specified site, even though it exists.
This may be because the site does not accept connections from your computer,
the service may be down, or the site does not support the service or port that
you tried to connect to.

Comment 2

[Hermann Schwab]

Attachment: missing image replaced with mozilla banner

<a
href="http://chkpt.zdnet.com/chkpt/gfaqsfront_castrol_click/http://www.castrol.com/castrol/productdetail.do?categoryId=82915464&contentId=6030785"
target="_blank"><br>
<img src="https://bugzilla.mozilla.org/mozilla-banner.gif" width=220 height=55
BORDER=0></a>

In this testcase you see the image has to be transparent, placeholder only.

Comment 3

[Hermann Schwab]

Attachment: screenshot from opera

Comment 4

[Hermann Schwab]

Attachment: transparent image 220x55 used as placeholder

Comment 5

[Hermann Schwab]

Attachment: testcase with transparent image with red border

This testcase uses a transparent image to position the text. The image has red
borders.

Comment 6

[Hermann Schwab]

Attachment: testcase with bad URL for transparent image with red border

The placeholder image is specified by an invalid URL. When the rendering
starts, the border is painted red 220 by 55 px as specified, when the 404
comes, the border shrinks to about 2 by 10 px, look into the P of Poll to see
it.

Comment 7

[Hermann Schwab]

Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.9a1) Gecko/20050903 SeaMonkey/1.1a

confirming bug, 
look at attachment 194835 [details] to see how it should be,
compare attachment 194836 [details] how it actually is if the placeholder image isn't found.

Comment 8

[Hermann Schwab]

DOM Inspector
Object - Box Model, Dimension:
box width:   2
box height: 15

Object - Computed Style:
height:      55px
line-height: 15px
width:      220px

Seems the 404 on the image replaces specified height with line-height and
shrinks specified width to zero so only width of borders remain.

Comment 9

[Boris Zbarsky [:bzbarsky]]

This is the desired behavior in standards mode.