One problem I've run into many times now when setting up templates via css is the seemingly simple "sticky footer". Put simply, a sticky footer is designed to "stick" at the bottom of the browser even if your site does not fill the browser lengthwise. This required almost no thought with old school tables using height="100%" but with CSS we obviously try to avoid tables at all cost. And even if you still insist on peppering your markup with those dreaded tables, the table height attribute is no longer supported by newer browsers so you, my friend, are also out of luck.  Enter The Man in Blue, Cameron Adams. Using his sticky footer solution you can set up the web page to span the entire height of the browser by setting the html, body and site container's (excluding the footer) height to 100%. Then using relative positioning and negative margins the footer container is positioned to show at the bottom of the browser. You can view code examples in the original post. Hat's off to Cameron for a great solution!

With the ringing in of 2007, one of my work-related resolutions is to be more involved in the CSS community. Still being relatively new to the CSS world, there is a lot of information floating around out there that I have yet to discover, as well as information I have found which I now consider common knowledge, but had to figure out the hard way due to lack of documentation. Of course W3C has documentation for CSS properties but where do you go to learn about browser inconsistencies and hacks (I am a big proponent of CSS hacks and have found them necessary to make real world web sites display properly across all browsers)? I have attempted to release some of the things I have learned back to the community via Digital Positions' blog , but have always struggled trying to find a great place to gain information from the community whenever I need some help. This is why I was happy to discover that Adobe just released the CSS Advisor Beta. Whether you're in search of information or want to release your newest discovery back to world, this is the place to go. I have already learned some new things and there have only been a few weeks of collaboration (over the holidays, no less). I am looking forward to learning more from the community and hopefully giving something back using this tool. With the new year I also challenge you to become more involved in the community. In addition to contributing to Adobe's CSS Advisor Beta, feel free to comment on this blog and post your favorite CSS resource.

Even with all the 'warm fuzzies' that designers and developers alike get by keeping our markup separate from design, conforming to web standards, and getting cross-browser compatible CSS driven layouts out the door, there are still some days when we want to curse the CSS gods and go back to the comfort and predictability of tables. And of course it's always raining on those days. Just like yesterday. Even so, I found two viable solutions to the vertical alignment problem that has been plaguing us CSS geeks from the beginning.

Print stylesheets can be an important tool to modify the existing layout for print without having to create an entirely new template.  I recently utilized the power of print stylesheets to solve an Internet Explorer print rendering issue for one of our clients.

Have you ever wondered what the <!DOCTYPE> tag is used for? Have you even given it any thought or just simply used whatever version of the tag is included in your usual html template? Although in the past this tag has been something which could be easily overlooked with little to no adverse side affects, with W3C standards compliance on the rise, the DOCTYPE tag is no longer something to be ignored.