JQuery Bounce effect resizing element

I have a "notification box" like in CSS;

.NotificationsBox
{
 text-align:center;
 position:absolute;
 height:17px;
 width:17px;
 border: 1px solid #FFFFFF;   
 Background-Color: #0099FF;
 border-color: #FFFFFF;
 top:65px;
 left:500px;
}

      

        
        
        
      

    

driven by jQuery bounce effect;

<script>
$(window).load(function () {
    $(".NotificationsBox").effect("bounce", { times: 3 }, "slow");
});
</script>

      

        
        
        
      

    

Html

<asp:FormView ID="FormView1" runat="server" DataSourceID="NotifyMe">
<ItemTemplate>
<asp:Label ID="NotificationLabel2" runat="server"  
Text='<%# Bind("[Notifications]") %>'
CssClass="NotificationsBox"  />
</ItemTemplate>
</asp:FormView>

      

        
        
        
      

    

The bounce effect works great, except that the width of the window changes during the bounce effect - it's set in CSS to be a small box at 17px x 17px. The box is currently "1" and the animation appears to shrink the width to match "1" and then return to normal size after the effect ends. I've tried using a padding in CSS to pad the 1 sides in a box, but that had no effect - no ideas?