Jon's Blog

If you are like me then you may have a CSS table style for your GridView with a specific border.  When you use the the EmptyDataTemplate you may then have a border around your message.  I create a CSS class and then use the EmptyDataRowStyle and set its CssClass.  Note, in the GridView I am also setting the default border to 0.  Example:

CSS

table.myGridClass .empty td
{
    border-style: none;
    border-width: 0px;
    background-color: #ffffdd;
}

ASPX

<asp:GridView ID="myGridView" runat="server" CssClass="myGridClass" BorderWidth="0">
<HeaderStyle CssClass="myHeaderStyle" />
<RowStyle CssClass="myRowStyle" />
<EmptyDataRowStyle CssClass="empty" />
<EmptyDataTemplate>Your message here.</EmptyDataTemplate>

I found a strange IE8 bug dealing with images and the CSS max-width property.  I had an image inside of a table cell.  The image had a max-width set using CSS.  In IE8, if the actual image width was larger than the max-width value then the image was resized properly, but the table cell was not.  It was strange because it worked fine in IE7 and Firefox.  The way I fixed this issue was to wrap the image inside of a div and then set the width of the div to the same value as the max-width of the image.  Oh well, easy enough.

HTML:

<table class="myTable">
    <tr>
        <td class="col1">
            <div class="imageWrapper">
                <img src="images/blah.jpg" class="myImage" />
            </div>
        </td>
        <td class="col2">
            <p>Content here</p>
        </td>
    </tr>
</table>

CSS:

table.myTable .col1 { vertical-align: top; width: 122px; }
table.myTable .col2 { vertical-align: top; width: 353px; padding-left: 5px; }

img.myImage { max-width: 122px; max-height: 172px; }
div.imageWrapper { width: 122px;  }