Could it be that Chrome is evolving into the new IE in terms of CSS issues?
Here is the code I have for creating ExtJS buttons within an accordion:
var button = Ext.create('Ext.Button', {
text: '<img src="'+resp.sellers.external[key].catalogs[0].logo+'">',
handler: function() {
openOciCall(resp.sellers.external[key].catalogs[0].catId, me.queryFilterManager.getValue())
},
margin: '3 3 0 3',
});
In Firefox and IE, everything looks fine like this:
But in Chrome, without the height property, it doesn't look good:
And when I add the height property, it ends up looking like this:
var button = Ext.create('Ext.Button', {
text: '<img src="'+resp.sellers.external[key].catalogs[0].logo+'">',
handler: function() {
openOciCall(resp.sellers.external[key].catalogs[0].catId, me.queryFilterManager.getValue())
},
height: 55,
margin: '3 3 0 3',
});
Resulting in this:
The issue seems to be that ExtJS generates a padding value in Chrome, which distorts the image...
<span id="button-1128-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on" style="line-height: normal; padding-top: 27px;"><img src="logos/logo_mercateo.png"></span>
Now my question is, is there a better approach to display the image correctly in Chrome as in Firefox?
EDIT:
When I try to use the icon element instead, I encounter this issue: