Not sure why I haven't run into this before, but I ran into a problem with paging in a GridView where the pager isn't properly showing up on the right right side of the grid view. Well, correction:All browsers but IE handle the paging incorrectly even when you set the alignment on the page row. For example:

<asp:GridView runat="server" ID="grdCustomers" cssclass="blackborder" 
        CellPadding="3" 
        style="width:800px;" 
        AutoGenerateColumns="false" onrowcommand="grdCustomers_RowCommand"  
        PageSize="4" AllowPaging="true" onpageindexchanging="grdCustomers_PageIndexChanging"
        PagerSettings-Mode="NumericFirstLast" 
        PagerSettings-PageButtonCount="10"                                         
    >
    <AlternatingRowStyle CssClass="gridalternate" />
    <HeaderStyle CssClass="gridheader" />
    <PagerStyle cssClass="gridpager" HorizontalAlign="Right" />  
    <SelectedRowStyle BackColor="teal" />
    <Columns>
        <asp:HyperLinkField DataTextField="Company" HeaderText="Company" DataNavigateUrlFields="Pk" 
                            DataNavigateUrlFormatString="ShowCustomer.aspx?id={0}" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="LastOrder" HeaderText="Last Order" />
        <asp:TemplateField HeaderText="Action" ItemStyle-HorizontalAlign="center" ItemStyle-Width="70px" >
            <ItemTemplate>
                <asp:LinkButton runat="server" CommandName="DeleteCustomer" 
                                CommandArgument='<%# Eval("pk") %>'
                                Text="Delete" ></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>                    
    </Columns>                      
</asp:GridView>

I use a pager style which is defined something like this in a CSS stylesheet:

.gridpager, .gridpager td
{    
    text-align: right;
    color: cornsilk;    
    font-weight: bold;
    text-decoration: none;
}
.gridpager a

{
    color: White;
    font-weight: normal;
}

The right align is supposed to handle shifting over the pager text to the right. Note that both the style and the HorizontalAlign="right" on the PagerStyle are meant to do.

The above works fine in IE, but doesn't product the right results in FireFox.

IE (and also in the Orcas Designer):

FireFox:

So the GridView renders text-alignment: right; into the style for the row, but the pager is actually rendered as a table inside the table column that makes up the pager row:

<tr class="gridpager" align="right">
    <td colspan="4"><table border="0">
        <tr>
            <td><span>1</span></td>
            <td><a href="javascript:__doPostBack('ctl00$Content$grdCustomers','Page$2')">2</a></td>
        </tr>
    </table></td>
</tr>

The problem here is that alignment shouldn't be set on the row but on the inner column and this is what causes FireFox to refuse to render the pager right aligned. Actually I'm not quite sure why this isn't working because the .gridpager td should apply to the column as well and it has right alignment for text. I think the issue is that text-align doesn't apply to layout elements like the embedded table - in fact FireBug seems to indicate that the text-align is in fact set to right.

I don't think there's a way to get around this declaratively, which is pretty sucky, since it's probably the most common scenario to have the pager render right. But it's possible to do programmatically:

protected override void OnPreRender(EventArgs e)

{

    base.OnPreRender(e);            

    GridViewRow pagerRow = grdCustomers.BottomPagerRow;

    pagerRow.Cells[0].Attributes.Add("align", "right");

}

which produces:

<tr class="gridpager" align="right">
    <td align="right" colspan="4">
    <table border="0">
        <tr>
            <td><span>1</span></td>
            <td><a href="javascript:__doPostBack('ctl00$Content$grdCustomers','Page$2')">2</a></td>
        </tr>
    </table>
    </td>
</tr>

The align="right" makes this work.

Ugly, ugly, but it works.

See a way to make this work declaratively and better yet with CSS only? Maybe I'm missing a CSS tag that allows compositional right alignment for child content. text-align seems to be applied to the column, but because the content isn't text it has no effect at least in Mozilla style browsers. Fun stuff happens when you play around with float:right and position:absolute/right <g>.