Re: Percentage Height of a Replaced Element in a Table Cell

My snippets were incorrect. :(

So let me try that again:

Browsers disagree on how to render this snippet:

        <table style="width:20px;height:20px">
            <tr>

<td style="width:100%;height:100%"><img style="height:100%"
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><img style="height:100%" 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:58:18 UTC