PDA

View Full Version : sprite images dont show properly with iconCls



Ash2009
10 Aug 2009, 3:19 PM
I am using Ext 2.2.1 , recently i started using CSS sprite images.I created a sprite image and applied to the tree nodes in my treepanel it works fine as expected. I am using some of the icons in the same sprite image as button icon,but they r not displayed properly.
the button shows not only its own icon but also the next 3 icons placed in the sprite image

heres the code to create a button.

buttons:[{
text: 'Save Changes',
iconCls:'saveDDChangesCls',
handler : saveProperties
}]
heres the CSS

.saveDDChangesCls {
background:transparent url('../images/icons/sprite-treeicons.png') -36px 0px no-repeat !important;
/*background-image:url(../images/icons/disk.png) ! important;*/
}
The property commented out was the earlier code when i had individual images.this was working fine,now with sprites its giving problems.
i saw from some earlier thread to prefix the css class with 'button' but that didnt work either,what am i doing wrong here ? please help.
I have attached the way it looks using the above code.

Ash2009
11 Aug 2009, 9:12 AM
has anyone come across this before ? please help
do i need to give any more properties in CSS ?

Ash2009
11 Aug 2009, 3:58 PM
I found the solution myself and am writing it down for any one who come across this issue.
My sprite image had horizontal positioned images with 2px gaps.
I just made them vertical with a distance of 20 px.so now the button looks ok with the icon.