186942 - renewnyc.com - Images are cropped strangely inside sized div

Status: RESOLVED DUPLICATE of bug 196870

(Tech Evangelism Graveyard :: English US, defect)

Description

[Bryan Keller]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3a) Gecko/20021212
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3a) Gecko/20021212

This page, of 7 World Trade Center design proposals, has 7 selectable images for
each proposal. Three of the images to the right show up properly, but the 4
leftmost images only show a portion of the image (a thin vertical slice).

The site displays as expected in Internet Explorer.

Reproducible: Always

Steps to Reproduce:
1. Browse to
http://www.renewnyc.com/plan_des_dev/wtc_site/new_design_plans/default.asp

Actual Results:  
The images won't display properly.

Expected Results:  
All 7 images should display properly.

Comment 1

[Frankie]

If a 10px square div (inside a table cell) contains 77px square image with 5px
hspace/vspace, should the result be 10px, 77px, or 87px?

Whatever the answer, Mozilla is displaying this site incorrectly. It is applying
center vertical alignment to the div first, then drawing the image starting in
the top left corner of the div and cropping the image when it reaches the edge
of the cell.

Here's the relevant code snippets:

.thumbdiv { width:10; height:10; filter:Shadow(Color=#CACACA, Direction=120) }

<table border="0" cellspacing="0" cellpadding="4" background="" width="100%">
<tr> 
<td width="130"  align="right" > 
<div class="thumbdiv" ><a href="firm_a/default.asp"
onMouseOver="MM_swapImage('a_up1','','/images/plan_des_images/thumb_a_over.jpg',1)"
 onMouseOut="MM_swapImgRestore()"target="a"><img
src="/images/plan_des_images/thumb_a_up.jpg" width="77" height="77" border="0"
vspace="5" hspace="5" name="a_up1" alt="Foster and Partners "></a></div>
</td>

Comment 2

[Frankie]

Attachment: screenshot with block structure diagram

Illustration of the problem with a user stylesheet drawing colored 1px borders
on each container.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Why is it our problem if WinIE doesn't support 'height' and 'width' correctly?

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

returning to original component

Comment 5

[Frankie]

Attachment: testscase to show incorrect layout

This testcase has been checked by BBEdit, Tidy, and validator.w3.org

DBaron and BZbarsky have both said that MSIE and RenewNYC are the ones at fault
here. I would really appreciate it if one of them, or someone else with a
strong understanding of box models, would EXPLAIN IN DETAIL why Mozilla's
cropping of my testcase (and renewnyc) is in fact the correct thing to do.

Comment 6

[Frankie]

After being pointed to CSS2 overflow, I understand that Mozilla is performing
the correct layout. Mostly.

I was right that the images should not be cropped at the cell edges. They should
be allowed to overflow and display fully.

*** This bug has been marked as a duplicate of 196870 ***