PDA

View Full Version : [OPEN-1486] button icon vs iconCls vertical positions not consistent



devtig
5 Jan 2011, 11:43 PM
In ExtJS 3.3.1 Ext.Button the same icon in a toolbar through icon and iconCls do not have the same vertical position in the toolbar. Also vertical positioning varies over browsers. I checked it with this code with FF3.6, Chrome, IE8, IE7, IE6 (see attachment).


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<style>
.img16x16 { background: url('http://img213.imageshack.us/img213/7449/16x16.gif') no-repeat !important; width: 16px; height: 16px;}
.img15x15 { background: url('http://img46.imageshack.us/img46/9256/15x15.gif') no-repeat !important; width: 15px; height: 15px;}
.img14x14 { background: url('http://img821.imageshack.us/img821/2/14x14.gif') no-repeat !important; width: 14px; height: 14px;}
.img13x13 { background: url('http://img211.imageshack.us/img211/7344/13x13.gif') no-repeat !important; width: 13px; height: 13px;}
.img12x12 { background: url('http://img714.imageshack.us/img714/2939/12x12.gif') no-repeat !important; width: 12px; height: 12px;}
</style>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.3.1/resources/images/default/s.gif';
var vp=new Ext.Viewport({
layout: 'hbox',
renderTo: Ext.getBody(),
layoutConfig: {align: 'stretch'},
defaults: {xtype: 'panel', flex: 1},
items:[
{
tbar: {
xtype: 'toolbar', defaults: {xtype: 'button'},
items: [
{
icon: 'http://img714.imageshack.us/img714/2939/12x12.gif'
},
{
iconCls: 'img12x12'
}
]
}
},
{
tbar: {
xtype: 'toolbar', defaults: {xtype: 'button'},
items: [
{
icon: 'http://img211.imageshack.us/img211/7344/13x13.gif'
},
{
iconCls: 'img13x13'
}
]
}
},
{
tbar: {
xtype: 'toolbar', defaults: {xtype: 'button'},
items: [
{
icon: 'http://img821.imageshack.us/img821/2/14x14.gif'
},
{
iconCls: 'img14x14'
}
]
}
},
{
tbar: {
xtype: 'toolbar', defaults: {xtype: 'button'},
items: [
{
icon: 'http://img46.imageshack.us/img46/9256/15x15.gif'
},
{
iconCls: 'img15x15'
}
]
}
},
{
tbar: {
xtype: 'toolbar', defaults: {xtype: 'button'},
items: [
{
icon: 'http://img213.imageshack.us/img213/7449/16x16.gif'
},
{
iconCls: 'img16x16'
}
]
}
}
]

});
});
</script>
</head>
</html>



This table show difference in vertical position between icon and iconCls over the various browser. The lower the total score the better:



size FF Chrome IE8 IE7 IE6 Score
12x12 2 2 2 3 3 12
13x13 2 2 1 2 2 9
14x14 1 1 1 2 2 7
15x15 1 1 0 1 1 4
16x16 0 0 0 1 1 2
Score 6 6 4 9 9


I expect the same icon to have the same vertical position through icon and iconCls.

I did some investigation on the matter. The HTML button seems to be handled differently through browsers:
http://justaddwater.dk/2008/11/05/ie-css-bug-background-image-gap-to-border/
http://www.google.co.uk/search?hl=en&q=ie7+html+button+padding&meta=#sclient=psy&hl=en&q=ie7+html+button+background+image+padding&aq=f&aqi=&aql=&oq=&gs_rfai=&pbx=1&fp=167088abf43949e

devtig
6 Jan 2011, 12:16 AM
I put !important with width and height in the styles. Now the differences in vertical positions are:


size FF Chrome IE8 IE7 IE6 Score
12x12 0 0 2 3 3 8
13x13 0 1 2 2 2 7
14x14 0 0 1 2 2 5
15x15 0 1 1 1 1 4
16x16 0 0 0 1 1 2
Score 0 2 6 9 9


Changed styles to:

<style>
.img16x16 { background: url('http://img213.imageshack.us/img213/7449/16x16.gif') no-repeat !important; width: 16px !important; height: 16px !important;}
.img15x15 { background: url('http://img46.imageshack.us/img46/9256/15x15.gif') no-repeat !important; width: 15px !important; height: 15px !important;}
.img14x14 { background: url('http://img821.imageshack.us/img821/2/14x14.gif') no-repeat !important; width: 14px !important; height: 14px !important;}
.img13x13 { background: url('http://img211.imageshack.us/img211/7344/13x13.gif') no-repeat !important; width: 13px !important; height: 13px !important;}
.img12x12 { background: url('http://img714.imageshack.us/img714/2939/12x12.gif') no-repeat !important; width: 12px !important; height: 12px !important;}
</style>