rating star images are not being displayed properly

Question

----------start of style---------------

        .ratingStar

    {

        font-size: 0pt;

        width: 40px;

        height: 40px;

        cursor: pointer;

        background-repeat: no-repeat;

        display: block;

    }

    .filledRatingStar

    {

        background-image: url(style/img/5star.png);

    }

    .emptyRatingStar

    {

        background-image: url(style/img/empty-stars.png);

    }

    .savedRatingStar

    {

        /*change this to your image name*/

        background-image: url(style/img/5star.png);

    }

------------------------------end of style---------------------------

-----------------start of aspx page-------------

<asp:Rating ID="Rating1" runat="server" CurrentRating="0" MaxRating="5" StarCssClass="ratingStar"

    WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar"

    RatingAlign="Horizontal" />

            <br />   

        <asp:Button ID="btnSubmit" Text="Submit Rating" runat="server"   

            onclick="btnSubmit_Click" />       

               

        <br /><br />  

               

        Current Rating:          

        <asp:Label ID="lblCurrentRating" runat="server" />