CSS Consistency Issue between IE7 and IE8

While I was creating a short menu out of a bullet list, I observed an inconsistency in padding that surface between websites being viewing Internet Explorer 6 or 7 and Internet Exporer 8.

With IE 8, when I set the margins of my <ul> tags and my <li> tags to 0px, the bulleted list is still indented.


However, with IE 7 and 6, when I set the margins to 0px, the list lines up with the text above it.


From my research and testing, it would appear there is no way to correct for this.
It especially becomes a problem when developing in IE 8 and correcting the margin-left to -30px.
While IE 8 will show the text of the list left aligned with the rest of the text on the page, previous versions of the browser will bleed the list far left beyond the placement of the control's container.


To avoid this problem, the best practice going forward for the next couple years is either to account space for the list to be indented or avoid using lists.

How To Sort With a Custom GridView ItemTemplate

I've been playing around a lot today with the GridView control and wanted to try to use it as a listing tool to show results from a search.

I would prefer to display the results in a stylized panel rather than the usual spreadsheet format. To accomplish this, I can use the <asp:TemplateField> column object and build any kind of HTML my heart desires:

<asp:TemplateField>
    <ItemTemplate>
        <div style="background-color: #e4e4e4; color: #303030; padding: 10px;">
            <div>
                <%#Eval("row_image")%>
            </div>
            <div>
                <%#Eval("row_name")%>
            </div>
            <div>
                <%#Eval("row_description")%>
            </div>
            <div>
                <%#Eval("row_priceRange")%>
            </div>
        </div>
    </ItemTemplate>
</asp:TemplateField>

Now, I want to use the GridView control's Sorting feature that is usually handled by the HeaderText. I want to allow users to sort by Name, Description and Price Range. I can create a a column for each of these fields that will also create HeaderText that I can then use for the SortExpression value:

<asp:TemplateField HeaderText="Name" SortExpression="row_name" />
<asp:TemplateField HeaderText="Description" SortExpression="row_description" />
<asp:TemplateField HeaderText="Price Range" SortExpression="row_priceRange" />

I used the TemplateField control rather than the BoundField so that I wouldn't actually populate any data into the field. It's just a header and a blank cell with the width of the HeaderText. This will create a lot of empty space to the right of my GridView which I don't want, plus the clickable Headers are way to the right of the GridView itself.

A little bit of CSS easily fixed the issue. I'll set my CssClass of the GridView to CssClass="gv_list" and add the following css structure:

.gv_list th {
    float: left;
}

Now, I've got three links at the top of my GridView that I can use for sorting the content either Ascendingly or Descendingly. Just to make sure all my site visitors understand what the links are for, I'll add some HeaderText to my first column (with all the divs) HeaderText="Sort By" and we are golden.

Getting rid of the top and bottom border on the GridView in FireFox

You'll soon find that I'm not one of those developers who praises FireFox and bashes Internet Explorer. I've always developed for IE since it has long been the most used browser; but within recent history, the red fox has snuck up and become the most used browser on the market.

By default, FireFox adds a border at the top and bottom of GridView cells.


Try all the CSS you want, but you won't be able to get rid of these cursed little lines. It is actually a setting in the GridView control itself. All you need to do is set GridLines="None" and the lines disappear.

Just that easy!