130838 - dynamically centered image displays incorrectly

Status: RESOLVED WORKSFORME

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

Description

[vva]

An image that should be dynamically positioned to the center of a designated
area depending on the size of the window is displayed incorrectly. The image's
styled border is centered correctly on the horizontal plane only, but even then
only the part of the actual image that at any given overlaps with and equivalent
area in the top left corner of the window is actually displayed.

The purpose is to display an image in the center and middle of a div the size of
which is adjusted according to the size of the window at wondow.onload and on
resize. If the image is larger than the available area, the div becomes
scrollable (overflow:scroll).

Works correctly on IE 6.0.

Comment 1

[vva]

Attachment: Sample HTML of the bug

There's a image that should appear at the center of the browse window. If you
see nothing at all, resize the window smaller unlit the image begins to appear.
You'll notice that the area where the image is visible seems to correspond to
the image's actual size, but remains in the top left corner.

vva

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: image for testcase

Comment 3

[Boris Zbarsky [:bzbarsky]]

Attachment: testcase

Comment 4

[Thomas R. (TRauMa)]

On WindowsXP (in "Classic" Win2k look) with Mozilla 0.9.9:

I'm not quite sure if this is related, but if you visit
http://www-ti.informatik.uni-tuebingen.de/~roesner/ and move any window over the
browser window, the rendering becomes quite randomized. There isn't much you can
strip from the page, it just contains one centered image, so you can use it as a
testcase.

Comment 5

[Boris Zbarsky [:bzbarsky]]

The testcase is pretty minimal (except for the borders).  Setting the outer div
width onresize _is_ required.  This for some reason causes the table to reflow
incorrectly (it's too narrow), and hence clip the content.

Oh, and setting overflow:visible on the inner div helps for some reason (though
the _table_ is being overflown, not the div).  Setting overflow on the table
does _not_ help.

To HTML tables.

Comment 6

[Mats Palmgren (inactive)]

Testcase renders pretty much the same as IE6. There is a horizontal scrollbar
in Mozilla but I think this is expected since the author haven't accounted
for the default margin of BODY.

WFM, 2002-08-24-04 trunk Linux
WFM, 2002-08-24-04 trunk Windows 2000

Comment 7

[Bernd]

yeah this looks much better than before