Double png imgs on RadPanelItem

[P]

I am using a RadPanelItem with an ImageUrl referencing a png image.  My problem is I'm seeing two images (one on top of the other) when the form open.  Why is this?  I don't see double images if I use jpg or gifs, only when I use pngs.  Yes, I could change ALL my images over but then that would be making me do more work for all my images when really the png should be handled just like any other image.

Here's my html definition.

 

<rad:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Outlook" ExpandMode="SingleExpandedItem" OnItemClick="RadPanelBar1_ItemClick" style="vertical-align:bottom; width:auto;" >

 

 

<Items>

 

 

<rad:RadPanelItem Text="Dashboard" ImageUrl="~/images/Suite.gif">

 

 

</rad:RadPanelItem>

 

 

<rad:RadPanelItem runat="server" ImageUrl="~/images/Suite.gif" Text="Case Management">

 

 

</rad:RadPanelItem>

 

 

<rad:RadPanelItem runat="server" ImageUrl="~/images/Redaction_s.png" Text="Redaction" ></rad:RadPanelItem>

 

 

<rad:RadPanelItem runat="server" ImageUrl="~/images/Suite.gif" Text="Reports">

 

 

</rad:RadPanelItem>

 

 

<rad:RadPanelItem runat="server" ImageUrl="~/images/Suite.gif" Text="Admin">

 

 

</rad:RadPanelItem>

 

 

<rad:RadPanelItem runat="server" ImageUrl="~/images/Suite.gif" Text="Record Group">

 

 

</rad:RadPanelItem>

 

 

<rad:RadPanelItem runat="server" ImageUrl="~/images/Suite.gif" Text="Workgroup">

 

 

</rad:RadPanelItem>

 

 

</Items>

 

 

<ExpandAnimation Type="None" Duration="100"></ExpandAnimation>

 

 

</rad:RadPanelBar>

The bolded stuff above gives me the png image followed by the Redaction text, then on the next line (in the same menu item) I see a duplicate image.  WHen I click on that menu item (or any other) the duplicate image goes away.

What could be going on there?  Thanks.

PS  I'm using the up to date Telerick AJAX controls.   THank you.