Displaying Image in grid

I'm using a RadGrid and in this grid there are buttons with a ImageUrl . and in IE8 I have some problems displaying them correctly (horizontally) and not like this

enter image description here

So I thought i should change the width of the button but then something happen that i really dont know why this happening ... I have just change the width from 20px to 30px

enter image description here

Can someone please help me how to change this that it is normal like in every other browser (horizontally the both images ...

My code

 <telerik:RadGrid ID="rgGrid" runat="server" DataSourceID="SqlDataSource1" 
          AllowSorting="True" AllowPaging="True" PageSize="20" 
          AllowFilteringByColumn="True" ShowStatusBar="True" Width="100%" 
          CellSpacing="0" GridLines="None" OnItemCommand="rgGrid_ItemCommand">
     <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrganisationId">
         <NoRecordsTemplate>
             Can't find Organisations to display
         </NoRecordsTemplate>
       <Columns>
           <telerik:GridBoundColumn DataField="OrganisationId" DataType="System.Int32" 
               FilterControlAltText="Filter OrganisationId column"
               HeaderText="OrganisationId" ReadOnly="True" SortExpression="OrganisationId" 
               UniqueName="OrganisationId" Visible="false">
           </telerik:GridBoundColumn>
           <telerik:GridBoundColumn DataField="OrganisationName" FilterControlAltText="Filter 
                    OrganisationName column" HeaderText="Name" ItemStyle-Width="60px" 
                    SortExpression="OrganisationName" UniqueName="OrganisationName">
               <ItemStyle Width="60px" />
           </telerik:GridBoundColumn>
           <telerik:GridBoundColumn DataField="CountryName" FilterControlAltText="Filter 
                    CountryName column" HeaderText="Country" ItemStyle-Width="60px" 
                    SortExpression="CountryName" UniqueName="CountryName">
                <ItemStyle Width="60px" />
           </telerik:GridBoundColumn>
           <telerik:GridTemplateColumn UniqueName="DeleteColumn" ItemStyle-Width="20px" 
                    AllowFiltering="false"ItemStyle-HorizontalAlign="Right"  >
              <ItemTemplate>
                 <telerik:RadButton ID="btnEdit" CommandName="Edit" runat="server" 
                      Width="30px" ToolTip="View Details" Height="20px" 
                      CommandArgument='<%# DataBinder.Eval(Container.DataItem, "OrganisationId")%>'>
                      <Image ImageUrl="~/Resources/Images/Grid/edit-app.png" 
                          IsBackgroundImage="true" />
                 </telerik:RadButton>
                 <telerik:RadButton ID="btnDelete" CommandName="Delete" runat="server" 
                      Width="20px" ToolTip="Delete Vacation"
                      Height="20px" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "OrganisationId")%>'>
                 <Image ImageUrl="~/Resources/Images/Grid/delete-app.png" 
                        IsBackgroundImage="true" />
               </telerik:RadButton>
           </ItemTemplate>
       </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
  </telerik:RadGrid>

Thanks for help ans fast answer !!

Solution

Give a class to image first:

<Image ImageUrl="~/Resources/Images/Grid/edit-app.png" 
IsBackgroundImage="true" CssClass="someclass" />

Add css

.someclass {
   background-repeat: no-repeat;
}

as it is rendered as background image.