2009 Results

CSS – A Sticky Subject

Friday, October 9th, 2009

CSS is a sticky subject in the best of times and to make it more sticky I thought I’d run down the techniques needed to make a sticky footer that works in all modern browsers. This is unlike most examples on the web that break in either Opera, IE8, IE7 or indeed in all three.

Try any of those footers from the Google search above in IE8 or Opera (some don’t work in IE7 either). Load the page then grab the bottom of the window (not the side or corner of the window) and drag it up or down and you will see that the footer usually sticks in the wrong place, messing up the display.

Now try it on my old original sticky footer version (circa 2003 which pre-dates all those above) and you will see that my version is working in all browsers including IE8.

Before we get into details I should first explain what a sticky footer is.

What is a Sticky Footer

A sticky footer is one that sits at the bottom of the viewport when there is not enough content in the page to push the footer down. If there is a lot of content then the footer sits at the bottom of the document and will be below the fold as usual. Why this is desirable is because on short content pages you won’t have a footer right at the top of the screen looking very strange indeed as shown from Figure 1 below.

Figure 1 – normal footer close to content.
Normal footer

Figure 2 – Sticky footer at bottom of viewport.

Note that a “fixed positioned” footer is not the same thing as a sticky footer as a fixed positioned footer is one that sits at the bottom of the viewport at all times and never moves. Don’t get confused between the two.


Before we get into the nitty gritty detail I will briefly explain the concept in getting a sticky footer to work.

The first thing we need to do is create a 100% high container which is achieved by setting the html and body elements to 100% height and then creating a container that is a minimum of 100% high. The footer is then placed after this container which means it will be invisible as it will be below the fold of the page but by the magic of negative margins we can bring it back into view at the bottom of the viewport.

Of course this means that the sticky footer must be a fixed height (pixels or ems will do) so that we know how to accommodate it with the exact negative margins that bring it into view. This also means that our footer is now overlapping content on the page so we will also need to protect this content with either padding on an inner element, or some other similar approach as you will see when we get into specifics later.

That’s basically all there is to it except that we have to squash a few bugs on the way to make it work everywhere.


Is Technology Making a Difference?

Friday, September 4th, 2009

Is technology really making a difference?

Of course we all love our iPods and Blu-Ray players and doing research before Google came along was slow, often times requiring you to get in your car and go to a library. Anybody remember using library tools such as card catalogs and Microfiche to perform research? Now we can do it from our beds, simply by entering a few words into our mobile device and get instantaneous results; fantastic, no doubt.

Today’s cell phones look like something out of Star Trek. Actually, they look better and have more options.

We truly live in marvelous times. But, what does it all add up to? Technology is supposed to make our lives easier, more productive and in some areas eliminate work altogether. And for the most part I think we can say it’s worked. So how come I, like you, still work forty plus hour work weeks? In fact, since World War 2 the number of hours worked per week has grown. In her recent book, “Willing Slaves – How the Overwork Culture is Ruling our Lives“, Madeleine Bunting states that from 1977 to 1997 Americans working full time have increased their average working hours from 43.6 hours to 47.1 hours each week. (This does not include time required to travel to and from their places of business).[1] How can this be? In addition to working longer hours, many families have both family members working. The United States Bureau of Labor Statistics states that between 1950 and 2000 the number of individuals in the active labor force grew 227 percent from 62 million to 141 million.[2]

The whole goal of a software developer is to make someone’s life easier. If we’re successful our software or device will allow a user to be more proficient, saving them time and allowing them to get more work done. But does it really matter if the user is now able to get their work done faster if the end result is still working forty hours? What does it matter if you can get twice the amount of work done? Forty hours is forty hours. I’m sure that by increasing the amount of work we are able to get done each day that someone benefits, someone higher up, but it isn’t you and it isn’t me.

It seems like life just keeps moving at an ever accelerated pace. Like a merry-go-round that started off slow and built up speed. Perhaps it’s moving so fast now that we can’t jump off? Or maybe we still don’t feel we need to jump off?

Author Daniel Quinn in his book Ishmael gives us a parable that may explain what has happened. It’s certainly interesting.


Using jQuery with ASP.NET Controls

Thursday, August 6th, 2009

jQuery, a lightweight (only 19kb in size) JavaScript library has become my new best friend. It’s like mushrooms to Mario. Obviously I’m not alone since Microsoft is now distributing jQuery with Visual Studio (including jQuery intellisense). If you are using the new MVC framework from Microsoft then you will no doubt become familiar with the intricate workings of jQuery.

jQuery is not all that difficult to learn. The biggest thing you have to understand is all the different “selectors” that are available to you. Using selectors developers can query, in a CSS like way, for HTML elements, and then apply “commands” to them.

For example, the below JavaScript uses jQuery to find a <div> element within a page that has a CSS id of “rightSide”, and shows it and “leftSide” and hides it.


  1. $('div#rightSide').show();
  2. $('div#leftSide').hide();

As another example, the JavaScript below uses jQuery to find a specific <table> on the page with an id of “datagrid1”, then retrieves every other <tr> row within the datagrid, and sets those <tr> elements to have a CSS class of “even” – which could be used to alternate the background color of each row:


  1. $('#datagrid1 tr:nth-child(even)').addClass('even');

This next example gets all links <a> in a specific <div> and attaches an onclick event to them:


  1. $('#navBtns a').bind('click', function(event){
  2.      event.preventDefault(); //stop the link from going to href
  3.      //do something
  4. });

Being able to traverse the DOM and locate HTML elements to attach events, behaviors, animations and CSS is priceless. But what about ASP.NET controls like the RadioButtonList, GridView, ListView, Repeater, and many others that we as developers like to bind to? How do we traverse them when they all get their ids auto-generated? That’s what we will look at now! And with jQuery it’s not that hard!


Stop And Smell The Roses

Wednesday, July 1st, 2009

“He emerged from the metro at the L’Enfant plaza station and positioned himself against a wall beside a trash basket. By most measures, he was nondescript: a youngish white man in jeans, a long-sleeved T-shirt and a Washington Nationals baseball cap. From a small case, he removed a violin. Placing the open case at his feet, he shrewdly threw in a few dollars and pocket change as seed money, swiveled it to face pedestrian traffic, and began to play.”

This scene is all too familiar for those of us that work in an urban downtown area. Do we stop and listen or just hurry on about our business?

But wait, this was not your typical panhandler. No one knew it, but the fiddler standing against a bare wall was one of the finest classical musicians in the world. In fact, the musician was Joshua Bell. Whom just three days before he appeared at the Metro station, had filled the house at Boston’s stately Symphony Hall, where merely pretty good seats went for $100. The very violin that he played was worth more than most of the passer byes would make in their lifetime. The violin was handcrafted in 1713 by Antonio Stradivari and the price tag was reported to be about $3.5 million.

Joshua Bell, one of the worlds top classical musicians, equipped with his million dollar Stradivari violin played one of the most difficult violin pieces ever. AND THE WORLD WAS TOO BUSY TO NOTICE…

This experiment arranged by The Washington Post struck a cord in me. Probably because I fear that I would be one of the many that was too busy with life to see or hear the beauty that was right there in front of me.

This is one of the reasons for the less frequency of blog post these days. The other reason is the birth of my second child. In the words of Ferris Bueller, “Life moves pretty fast. If you don’t stop and look around once in a while, you could miss it.”

The life of a software developer is fast paced for sure, maybe that’s why they call them sprints in the Agile dev methodology. Make sure you are stopping from time to time to smell the roses or hear the music. Work to live. Don’t live to work…

Be sure to read the entire Washington Post experiment here. It’s well worth your time.

jQuery Dropdown Menu

Tuesday, March 17th, 2009

In this short article we will use jQuery to produce this dropdown menu. Over the past six months I have been using a lot of jQuery and have fallen in love with it. For those not familiar with jQuery it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. All this and for only 19KB! How nice is that? They claim that, “jQuery will change the way that you write JavaScript.” And they are right. Companies such as Google, Dell, Bank of America, Major League Baseball, Digg, NBC, CBS, Netflix, Technorati, WordPress, Drupal, Mozilla and many others use jQuery too. Ok, that’s enough of a plug, let’s look at the code:


ASP.NET – Sending Email Both in HTML and Plain Text

Thursday, February 5th, 2009

In this article you will learn how to send email using ASP.NET. Yes, there are plenty of other articles that cover sending email via .NET, but after spending a day doing research, I was amazed at how many articles failed to provide either a correct solution or a real world example. I found that many articles suggest you create your HTML email by using a string with the HTML markup in it. That’s crazy and not at all a real world solution, at least not for most situations. In this article we will look at a more realistic solution. One in which we use a regular HTML file as our template for the email. The template file will be a standard HTML file with the exception of some placeholders that we will use to populate our content and images right before we send the email. Think mail-merge in Microsoft Word. Finally, we will also learn how to send the email in such a way that if the email recipient’s mail-client can’t render HTML they will get an alternate plain text version.

Let’s start by looking at the code in its entirety; the people that just want to grab the code and use it can do so. I will then explain the code.


Oh, The Irony…

Monday, January 26th, 2009

So this morning I thought I would take a look at some of the videos that showcase Windows 7. Maybe get excited about some of the new features, get my hopes up, why not? I went to their website but CAN’T view the videos!

First I get the, “Additional plugins are required to display all the media on this page.” bar, which is not a problem in and of itself. I realize I need to get the Silverlight plugin. So I try to do so and get this error message.


[ Click to enlarge ]

I’m not going to switch browsers in order to view videos people…

Oh Microsoft, why do you do this to yourself? I can’t keep defending you forever…

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators

Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading