Image margin below the baseline on 2012 platform

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Browser processing of images located inside a table - differences between SmartTV platforms.

Contents

Webkit 2012
Maple 2010-2011
Solution
Bad example
Good example

This issue is related to processing images located inside tables. If no doctype is declared and the browsers work in Quirks Mode (you can find out more about different render modes in Doctype configuration), the layout looks exactly the same on all platforms. However, in the Standard Mode the result is different between Maple and Webkit based platforms.

Webkit 2012

There is a margin left at the bottom of images inside table, for fitting the space between baseline and bottom.

Maple 2010-2011

No margin is created.

Solution

The image style should contain display: block, so that it cannot be processed by inline.

Bad example

<table>
    <tr>
        <td>
            <img src="images/pic1.jpg" style="width: 54px; height: 54px;" />
        </td>
    </tr>
</table>

Good example

<table>
    <tr>
        <td>
            <img src="images/pic1.jpg" style="display: block; width: 54px; height: 54px;" />
        </td>
    </tr>
</table>