I have a buttons aligned horizontally and I put a spacer between buttons, it runs on firefox and chrome smoothly. But when i run it on IE, there are buttons that overlaps. How should I change it?
Thanks in advance
sensha.jpg
Code:
var homeForm = new Ext.Panel({
renderTo: document.body,
layout: 'form',
frame: true,
bodyStyle: 'position:relative;',
style: {
'margin-top': '5%',
'margin-left': '5%',
'margin-right': '5%'
},
autoWidth: true,
labelWidth: 70,
defaultType: 'button',
buttonAlign: 'center',
height: 300,
items: [
new Ext.Container({
width: 1230,
height: 100,
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
buttonPlatlist,
{
xtype:'spacer',
width:'20px'
},
buttonAP,
{
xtype:'spacer',
width:'20px'
},
buttonMatrix,
{
xtype:'spacer',
width:'20px'
},
buttonOutput,
{
xtype:'spacer',
width:'20px'
},
buttonSectional
]
})
]