Applying CSS styles to Asp.Net DataPager Next/Previous Buttons

Question

If I have the folling data pager

<asp:DataPager ID="DataPager1" runat="server" PagedControlID="lstBlogPosts"
    PageSize="1" onprerender="DataPager1_PreRender" >                       
    <Fields>
        <asp:NextPreviousPagerField ButtonType="Image"
            NextPageImageUrl="~/_Content/images/blog/btn-next.jpg"
            PreviousPageImageUrl="~/_Content/images/blog/btn-previous.jpg" />
    </Fields>
</asp:DataPager>

How can I go about styling the Next/Previous buttons with CSS (Essentially one has to be floated left and one floated right)

Thanks

Answer 1

Your DataPager will look like this:

    <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lstBlogPosts" PageSize="1" onprerender="DataPager1_PreRender">
                <Fields>
                      <asp:NextPreviousPagerField ButtonType="Image" PreviousPageImageUrl="~/_Content/images/blog/btn-previous.jpg" ButtonCssClass="prew-item"  ShowNextPageButton="false"/>
                      <asp:NextPreviousPagerField ButtonType="Image" NextPageImageUrl="~/_Content/images/blog/btn-next.jpg" ButtonCssClass="next-item" ShowPreviousPageButton="false" />
                </Fields>
            </asp:DataPager>

So you have to declare the next and previous button in your markup.