Background image not applied for hyperlinks on 2012 platform

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

Platform differences in background-image rendering for anchor elements with child table

Contents

In case the background image for a hyperlink or anchor is not applied on 2012 platform only, please verify whether it contains any child table elements. The browser engine differs between 2012 and older platforms, which result in a different element processing.

Webkit 2012

The background-image style is not applied for the <a> element. This happens because it is processed by inline.

Webkit - no background image is displayed

Maple 2010-2011

Background-image is applied and displayed properly.

Maple - the background image for anchor is displayed properly

Solution

In order to make both browsers display the background image properly, please apply the display: block style for the anchor element, so that it would not be processed by inline.

Bad example

function f(obj) {
    obj.style.backgroundImage="url('button_yes.png')";
}

<a onfocus="f(this)">
    <table width="108px" height="35px">
        <tr><td align="center">Yes</td></tr>
    </table>
</a>

Good example

function f(obj) {
    obj.style.backgroundImage="url('button_yes.png')";
}

<a onfocus="f(this)" style="display: block;">
    <table width="108px" height="35px">
        <tr><td align="center">Yes</td></tr>
    </table>
</a>

Note

It is strongly not recommended to build the application layout based on tables, as it may lead to many compatibility issues depending on the platform and rendering mode. If the child table element contains only one row or cell, please use <div> with appropriate style instead.

Note

Refer to files in this package.