I was working on a site tonight after being away from it for over three months. I came across some CSS and it took me a while to remember what it was for. I gleaned this online somewhere ages ago, but kudos and credit to the author whoever they are!

For some time I have been having problems using the ASP.NET TreeView control in Sitemaps; every time I would hover over one of the parent nodes it would jump up and down. Here's some sample markup and the CSS to fix it in Firefox:

        <div id="idTreeView">
            <asp:TreeView ID="TreeView1" runat="server"                     DataSourceID="SiteMapDataSource1"
                    HoverNodeStyle-Height="0" Font-Bold="true" ImageSet="BulletedList">
                <RootNodeStyle Font-Bold="True" />
                <ParentNodeStyle VerticalPadding="0px" Font-Bold="True"                     Font-Underline="false"  />
                <HoverNodeStyle Font-Underline="false" ForeColor="#5555DD" />
                <NodeStyle Font-Bold="False" Font-Size="8pt" CssClass="sitelink"
                    ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px"                     VerticalPadding="0px" />
            </asp:TreeView>
           
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        </div>

        div#idTreeView img
        {
            display: block;
            float: left;
        }

        div#idTreeView div
        {
            display: inline-block;
        }

        div#idTreeView .sitelink a
        {
            text-decoration:none;
        }

Recently, I have been experiencing some difficulty applying CSS correctly to some of the OOTB (out-of-the-box) ASP.NET controls. Earlier today, I was trying to apply a CSS image border using the ASP.NET image control, but couldn't get it to render correctly. In the end, I had to use a regular HTML img tag.

CSS for Image Border

*
{
   margin: 0;
   padding: 0;
}

body
{
   background-color:#827575;
   color: #c6d3d5;
   font: 75%/1.5em Verdana, Helvetica, Geneva, &quot;Helvetica Neue&quot;, sans-serif;
}

.test
{
   margin-left: 300px;
   padding-top:50px;
   width: 156px;
}

.imageStyle
{
   padding: 3px;
   background-color: #525252;
   border: 1px solid #c3cfd3;
}

ASP.NET Image Control

<div class="test">
  ASP.NET Image Control:
  <asp:Image ID="Image1" ImageUrl="~/Images/fender.jpg"    
     CssClass="imageStyle" runat="server" />
  <div style="clear:both;">Incorrectly Rendered</div>
</div>

HTML Image Tag

<div class="test">
  HTML img tag:
  <img src="~/Images/fender.jpg" id="Image2" alt="Correctly Rendered"
     class="imageStyle" runat="server" />
  <div style="clear:both;">Correctly Rendered</div>
</div>

Feedback from anyone experiencing similar issues would be welcome. One of the projects on my to-do list this year is to create a custom CSS framework for use with ASP.NET sites, and this is something I'd like to get a handle on in advance. If I come across any other issues like this one, I will post them here.

I searched for a long time for a simple CSS solution to the eternal "sticky footer" problem, where the footer goes down to the end of the page. Up to now I have resorted to JavaScript to achieve this, which is not really the most elegant solution. It should be simple, right?

The other day, I stumbled upon what looked like a basic HTML/CSS solution. I wanted CSS that would push the footer to the bottom of the page, irrespective of content height, in an ASP.NET Master Page setup. Thanks to Ryan Fait for this.

It was straightforward enough to get it working for IE7. Firefox 3.0 didn't play nice at first until I moved the wrapper and footer divs out to the master page. Feel free to download the sample below and try it out for yourself - VS 2008 solution. Ignore the red wigglies in the master page. It has been tested in IE7, Firefox 3.0 and Chrome 0.2.149.29.

CSS_Sticky_Footer.zip (19.91 kb)