Percentage Height of a Replaced Element in a Table Cell

Hi CSS Test,

Browsers disagree on how to render this snippet:

        <table style="width:20px;height:20px">
            <tr>
                <td style="width:100%;height:100%"><img
src="50x50.png"></td>
            </tr>
        </table>

WebKit, FF: the image is rendered as 50x50
IE, Opera: the image is rendered as 20x20

I believe IE and Opera are correct here: "The percentage is calculated with
respect to the height of the generated box's containing block." Going up
the chain this is 20px.

This is distinct from the following case, where rendering 50x50 would be
the right thing to do:

        <table>
            <tr>
                <td style="width:100%;height:100%"><img
src="50x50.png"></td>
            </tr>
        </table>

"If the height of the containing block is not specified explicitly (i.e.,
it depends on content height), and this element is not absolutely
positioned, the value computes to 'auto'."

Am I right in thinking this?

Thanks,
Robert

Received on Tuesday, 7 August 2012 21:19:57 UTC