iconAlign: 'top' not centering the icon in ie, works in all other browsers. [Archive]

Mthor

28 Feb 2012, 8:55 AM

below is code from the designer, that has my buttons with iconAlign: 'top' , the icon is aligned to the left and not centered how it should be. In chrome, FF the icon is aligned center and looks perfect!! in ie I get aligned left. below the designer code is the iconCls and cls for the images. any ideas why this is happening in ie?

Ext.define('UserPortal.view.ui.MenuButtonBar', {
extend: 'Ext.toolbar.Toolbar',

height: 80,
id: 'buttonBar',
itemId: 'buttonBar',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
cls: 'logo',
height: 64,
width: 167
},
{
xtype: 'tbspacer',
flex: 1
},
{
xtype: 'button',
cls: 'styledButton',
id: 'corporateDirectoryButton',
iconAlign: 'top',
iconCls: 'directory_32',
scale: 'large',
text: 'Corporate Directory'
},
{
xtype: 'tbspacer',
width: 25
},
{
xtype: 'button',
cls: 'styledButton',
id: 'outlookButton',
iconAlign: 'top',
iconCls: 'outlook_32',
scale: 'large',
text: 'Outlook'
},
{
xtype: 'tbspacer',
width: 25
},
{
xtype: 'button',
cls: 'styledButton',
id: 'administrationButton',
iconAlign: 'top',
iconCls: 'admin_32',
scale: 'large',
text: 'Administration'
},
{
xtype: 'tbspacer',
width: 25
},
{
xtype: 'button',
cls: 'styledButton',
id: 'downloadsButton',
iconAlign: 'top',
iconCls: 'downloads_32',
scale: 'large',
text: 'Downloads'
},
{
xtype: 'tbspacer',
width: 25
},
{
xtype: 'button',
cls: 'styledButton',
id: 'helpTrainingButton',
iconAlign: 'top',
iconCls: 'training_32',
scale: 'large',
text: 'Help - Training'
},
{
xtype: 'tbspacer',
width: 25
},
{
xtype: 'button',
cls: 'styledButton',
id: 'logoutButton',
iconAlign: 'top',
iconCls: 'button_cancel_32',
scale: 'large',
text: 'Logout'
},
{
xtype: 'tbspacer',
width: 25
}
]
});

me.callParent(arguments);
}
});

.styledButton .x-btn-inner {
color: #1a4bbb; !important;
font-size: 12px; !important;
}

.directory_32{
background-image:url('../images/32x32/directory_32.png');
background-position: center top;
}

ie 32212
other browsers 32213

Thanks for the help!

cd.sencha

28 Feb 2012, 9:47 AM

Hey, what version of IE are you using?

Take a look at this link: http://reference.sitepoint.com/css/background-position

Specially from the porcentage values before Compatibility title.

Mthor

28 Feb 2012, 10:07 AM

I have only tested in ie8 and 9 and I get the same results, I tried adding background-position: center; to the cls and iconcls but no luck, I wil take a look at the article you provided. thanks

Mthor

28 Feb 2012, 10:13 AM

i tried background-position: 50% 50%;

and

background-position: center center;

still no luck in ie

cd.sencha

29 Feb 2012, 4:16 AM

Hi, try putting !important at the end of the CSS sentence...

Example: background-position: center !important;

#main {
width:600px !important;
width:800px;
}

In this class, the width will be 600px, even if you declared 800 after it.

You could also try to debug it (with something like Firebug, don't know if it exists for IE), MAYBE your class in IE is being override by another one.

Im newbie to Designer but maybe it will help you.

Bye

Mthor

29 Feb 2012, 12:17 PM

thank you for the suggestions

ie does have a debugger, but still no luck. I tried the ! important, but the icon and ie are not friends :) ,

but now days who is friends with ie

If anyone else has ideas please throw them my way

cuchot

5 Mar 2012, 6:47 AM

Hi,
I had the exact same problem, the icons of my buttons weren't centered in IE (IE 8) but worked just fine in firefox and chrome. I fixed my problem by adding a DOCTYPE to the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I hope it will help you.

Mthor

5 Mar 2012, 7:20 AM

cuchot You the Man!! thank you so much for that!! I am using an xsl page to output html so I added

<xsl:output method="html"
doctype-public="-//W3C//DTD HTML 4.01//EN"
doctype-system="http://www.w3.org/TR/html4/strict.dtd"
/>

All works in all browsers!! thank you!!

cuchot

5 Mar 2012, 10:45 AM

You're welcome.