Treehouse: Grow your CSS skills. Land your dream job.

Article Archives


From The Forums

Yesterday I "upgraded" the forums from phpBB 3.0.0 to 3.0.2. It was a bit of a debacle, probably mostly my fault, and it was down for a lot of the day. It's back up and running now though! Apparently it fixed an issue one user was having with IE 7, so that's cool. I did lose the some of the "search" data from the database, so searches in the forums might be kinda limited for a while (if anyone knows …


Messing With Firefox’s View Source CSS File

Firefox has a number of core CSS files that it uses to render web pages. Most of them are filled with sensible default values for all those pages out there which don't provide their own styling. For example, Firefox has its own CSS file just for forms called forms.css which gives form elements their special Firefox form look. This file differs from defaults in other browsers, hence the common need for CSS resets to yield cross browser consistency. But I …


Links of Interest

Tutorial Search

When I was doing that video on Google Search I thought to myself wouldn't it be cool to make a search engine that only searched through design/development sites? I talked myself out of it, because I started to think you'd be better off searching regular Google instead of limiting yourself to certain sites. Reader Art Webb clearly had the same idea, and built I almost wish I hadn't talked myself out of it, because in …


How To Deal With An No-Longer-Semantic ID or Class Name

Errol writes in:

What's your thoughts on a situation where you've started
naming classes and then halfway through you realize that
you need the same class but the naming isn't semantic.

Do you create a duplicate class, rename the existing one
to something more general, or something else?

For example:

I'll have a #modules_list_footer but now I need the same thing
for articles, so I could just use modules but it
should be "#articles_list_footer".…


Improving the Default Directory View

You've all seen a page like this:

That's when you are viewing a directory on a server (or locally), that doesn't have an "index" page to show you, but does have permissions set to allow you to see the directories contents. Different browsers have different takes on it. Here is Fx3:

None of them are exactly shining examples of user-friendliness, but they'll do. After all, chances are all you need to do is quickly scan the contents and click on …


Links of Interest

Fade Out Bottom (revisited)

The first post that was ever popular on CSS-Tricks was my tutorial on fading out the bottom of a website. Reader Pascal Moret wrote in with some suggestions for fixing it up for IE 6. I figured what the heck, might as well get it fixed up for those folks who might want to use it but are worried about that. The live demo is updated as well as the download.


Override Inline…

IE 6 Blocker Script

Fed up with supporting IE 6? Ready to just cut it off? I don't blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers.

Many times it just comes down to how best to spend your time. If you have to choose between designing and coding a neat new …


Weird File Requests and Easing Server Stress with .htaccess

I got an email from Media Temple (my hosting provider for CSS-Tricks) telling me that I was going to exceed my "GPU" limit for the month. Wha? Turns out a GPU is a "Grid Performance Unit" and is a Media Temple specific way to calculate how much server resources you are using. I think everything but database stuff is included in this. They provide a "GPU Tool" as part of their interface to show you what parts of your website …


Launch: Status

Today is the unveiling day of a new web application I've been working on the past few months. I am pleased to announce: Status. I worked on it with my friend Richard of Shiftedfrequency.

What is Status?

Status is a communication tool that is all about private groups. You can either start a group, or get invited to an already existing group. Within your groups, there is but one single function, and that is to "Check in". When …


Links of Interest

Automatically back up your entire web server files and databases to Amazon S3

Christina Warren has a comprehensive and excellent tutorial on creating a Ruby script to back up your entire web server, including databases, and upload them directly to an Amazon S3 bucket. The tutorial is geared toward Media Temple, but I imagine could be adapted to other hosts. She also did a screencast demo demonstrating it all. This is high on my list of to-do's, and handy for …


Date Badges and Comment Bubbles for Your Blog

One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.

As you can see, this "shield" shows the day, the month, and the number of …


Screencast Archives Updated!

It was a long and grueling process, but I finally finished updating the entire video archive. Here are the improvements:

  • Videos play on the web in Flash. From time to time I would get a note from someone either saying the had trouble watching the videos online or downright yelling at me for embedding video in Quicktime. I like Quicktime as with the way I shoot it easier to deal with, has smaller file sizes, and higher quality. Well, I

New Poll: How Do You Back Up Your Websites?

What if you hosting provider calls you one day and tells you they had a catastrophic fire at their facility and every bit of data on their (your!) servers is gone!

It's highly unlikely, of course, and it's more likely that your host does a better job of backing up data than you do. But... it's certainly possible and ultimately, you are responsible for your sites. If you do client work, the duty of backing up is even more important!…


Links of Interest

Google Docs: Forms

This isn't exactly breaking news, but I only just heard about it so I thought I'd share. The free service Google Docs allows you to build web forms from within it. It has a pretty limited feature set. Basically you just provide the question, answer type, help text, and whether it's required or not. Add as many questions as you'd like and save it and you get the ability to embed the form as an iFrame. The …


Creating a Slick Auto-Playing Featured Content Slider

I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much "out of the box". Sure …


Script & Style Exclusive: Automatically Generate a Photo Gallery from a Directory of Images

UPDATE: Script & Style is closed, but an updated version of this article is now on David Walsh's site.

Just a quick note that I wrote up a tutorial (with demo and download) on how to Automatically Generate a Photo Gallery from a Directory of Images as an exclusive for Script & Style.

There will be exclusive articles posted from time to time on Script & Style as well as, of course, the regular stream of links aimed at helping …


Poll Results: What is your favorite CMS?

WordPress was the clear winner in the most recent poll asking What is Your Favorite CMS?

I'm a bit surprised there weren't more people commenting that WordPress isn't really a CMS (which I disagree with). WordPress had more than twice the votes than its nearest competitor, the more "traditional" CMS, Drupal. Actually, Drupal and Joomla were neck and neck at the finish line which makes sense to me as the share much of the same functionality as I understand …


Links of Interest

Want More Sales? Become an Authority

This latest article from Search-This, Thinking Outside the SEO Box, is about small-guy eCommerce stores and what they really need to do to compete in the ever-saturated online store space. The main advice? Become an authority in your niche. Are you trying to sell cost-efficient agility training equipment to high schools? Then you should be blogging about training. If you establish yourself as an authority on training, you will gain traffic, gain links, …


Building a Better Blogroll / WordPress Podcast

I wrote an article for NETTUTS that was published today. It's called Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery. In it, I make up a "widget" for pulling in recent headlines from the Envato family of blogs which you can switch between using the Coda Slider plugin for jQuery.

I was interviewed by Charles Stricklin of the WordPress Podcast on Episode 44. It starts about 58 minutes in. We talk about that series I did …


Links of Interest

Finding Information: Factors that improve online experiences

As this site grows, my concerns about the findability of information grows. I feel like the navigation is fairly clear (although sub navigation is lacking). I have browseable archives and search, yet still, am I doing all I can do make the information on this site easy to find? I wish WordPress offered more advanced search for one thing, I might look into adding this via plugin somehow. Another idea I have is …


Launch of ThemeForest + Exclusive Beta Invites!

You guys are probably already aware of the Eden and their family of kick ass tutorial sites (e.g. NETTUTS, PSDTUTS, etc.). They also run the site FlashDen, which is a marketplace for Flash components. With your FlashDen account, not only can you browse and buy their giant collection of Flash components (think photo galleries, audio players, animations, even full website templates), but you can also be an author and sell Flash stuff that you make. The top …


Label Placement on Forms

When creating a web form, one of the many choices you must make is how you are going to align your labels with your inputs. This is not a trivial decision, as this placement affects the readability/usability of your form, completion rates, speed of completion, and ultimately the satisfaction level of the users trying to get through your form. But is there one ultimate answer for how you should be aligning labels? Not really, it depends on the specific needs …


Launch: Script & Style

I always liked the idea of having a community links section on websites. Lots of sites in this genre have that and I think it's great. The driving purpose behind a tutorial site like this is helping people learn and sharing inspiration. I do my weekly "Links of Interest" posts (which I will probably keep doing), but I wanted a better way to have a "stream" of links going to other good reading in the community. Hence the birth of …


Links of Interest

Favorite Design-Related Sites of 21 Designers

Steven Snell of Vandelay Design launched a brand new site called which is "articles and resources for designers". I participated in a group interview post where a bunch of designers list some of their favorites sites.


Pattern Tap

Pattern Tap is a very cool new way to browse design inspiration. Instead of just browsing full designs, you browse by particular parts of websites. For example, you can browse just different breadcrumb navigations …


Removing The Dotted Outline

Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they …


Easily Password Protect a Website or Subdirectory

Working on a website that you need others to see, but not the whole world? Password protecting a website (or a sub directory within a website) is actually a pretty easy thing to do.


Links of Interest

URL shortners have been around for a while, so it's nice to see there is still innovation being done. offers all the standard features of a URL shortner, but includes compelling new features like click/referral tracking, automatic page mirroring, an API, and thumbnails (full list here).


Clever Andy

The concept behind Clever Andy is that you upload your "unused" designs, and he will "actively pursue" finding a client for that design. Once a client is …


Designing for WordPress: Complete Series & Downloads

Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.

Part One: Download, Install, "Reset" Theme

Video Page
Direct Video Download (.mov)

Part Two: Structure

Video Page
Direct Video Download (.mov)

Part 3: Finishing Touches, Extra Stuff

Video Page
Direct Video Download (.mov)


Download - "Personal Homepage Theme"

I figured …


Why People Still Use IE 6

Internet Explorer 6 is always a hot subject of debate. We've talked about it here many many times. The forums are full of folks trying to troubleshoot it. The CSS support is problematic and the JavaScript support is proprietary nonsense.

The conversation is heating up a little hotter than usual lately, as major companies are starting to pull support for it. Apple's new MobileMe service doesn't support it. 37 signals is phasing out support for it. Matt Mullenweg says …


Links of Interest

Shirts for Coders

A collection of HTML/CSS T-Shirts. Some are funnier than others... I do like the XHTML one =) I did a roundup of CSS shirts a while ago too.



As far as these "generators" go, this BgPatterns is pretty top-notch. Customize colors, textures, patterns, sizing, rotation... Preview it live on the page, save it, or download it.



There is a slew of free WordPress themes out there, which is awesome, but I am …


How To Create a Horizontally Scrolling Site

If web pages were made out of wood, the grain would be running up and down. Vertical is the natural flow of web layout. When page elements reach the right edge of the browser window and go over, the flow defaults to "wrapping" that element down onto the next line. The more content on the page, the taller it gets, not the wider. Why is this? Because it just makes sense. Our eyes are used to reading fairly short lines …


Image Map with Prototype Tooltips

The areas inside of regular ol' HTML image maps support the title attribute which makes regular tooltips possible. Sometimes the default browser tooltips just don't cut it, especially with their built in delays.

My favorite package for doing fancy tooltips is Prototip for the Prototype javascript framework. Prototip is free to download but requires a small licensing fee to use it on your domains. We will be using only a tiny fraction of what Prototip is capable of here, but …


The Difference Between ID and Class

ID's and Classes are "hooks"

We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p>, and <ul> will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and Classes. For example <ul id="nav">, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other …


Links of Interest

Best of June 2008

Noupe with another very nice monthly roundup of good design-y stuff around the web last month. I like these giant monthly roundup posts. Gives a good monthly goal of trying to write things that are worthy of being on it. Didn't Smashing Magazine used to do monthly roundups and then just randomly stopped?


Google now indexes Flash content

From the horse's mouth:

All of the text that users can see as they interact with …


New Poll: What is your favorite CMS?

There is a new poll in the sidebar folks. This one is about Content Management Systems (CMS). There was a pretty good comment thread going a little while ago which sparked the idea for this poll.

I've always been a WordPress guy, and now with the ability to easily create different page templates for different page styles, I feel like it really has evolved into a "real" CMS instead of just a blogging platform. However, I am extremely curious and …


Featured Review: Markup Factory

It would be fair to call Markup Factory a CMS (Content Management System), but that would be cutting it short. Markup Factory is much more that, but be scared or think for a moment that it's "over your head". It's not. Markup Factory is one of the most full-featured, powerful, and easy to use web services I have ever seen for creating and maintaining your own websites.

For starters, Markup Factory provides the hosting for your site. So yes, this …


4th of July, Happy Birthday CSS-Tricks!

Today is the 232nd birthday of the United States and the 1st birthday of CSS-Tricks!

Been a great year! This blog and this community have helped me grow tremendously. I'm sure the next year will be even better and bring lots of good stuff to all.…


Cutting Edge Browsers and Their Development Tools

This is a hot time in the world of browsers. Despite a rocky morning, Firefox 3 got over 8 million downloads when it was released. It's up to over 24 million now. I bet many of you are amongst these downloaders, I know I was =)

I bet many of you do your web design and development in Firefox. Things just seem to behave as you expect them to in Firefox. Plus, it has a wealth of invaluable development tools …


Links of Interest

Students: Are you going to be employable?

Andy Rutledge's article The Employable Web Designer is about how schools may not be properly preparing students with actually employable web skills:

These students are worried that they’ll emerge from school without marketable skills, unprepared for what agencies and clients will expect or demand of them. Unfortunately, I think most of them are right to be worried.

I think Andy is dead-on with most of this, but perhaps a bit extreme. He puts …


Poll Results: Which Next Gen Web Language?

Surprising results again, at least for me. "Don't Care - As long as there isn't a standards war" was actually in the lead for a little while, but was ultimately beat out by "XHMTL 2".

I cast my vote for No Standards War. I can adapt to anything and both the new formats have cool stuff. I assume XHTML 2 is winning because it sounds cooler more modern and how dominant XHTML 1 is right now. …


Interesting Reader Questions

Why a CMS?

I was recently criticized that my sites weren't dynamic, and that no one would hire me because everyone wants a dynamic site. Well, the people I'd be targeting will know nothing about computers, thats why they need me to do the updates. I've become alot more versed in HTML\CSS now, and in design in general. Should I worry about learning something like Joomla? It seems frustrating, because I just can't use my normal web design software that …


Links of Interest

Faux Absolute Positioning

Always interesting to see new techniques for layout.

With faux absolute positioning, we can align every item to a predefined position on the grid (as with absolute positioning) but items still affect the normal flow and—thanks to clear—have many of the same advantages as normal-flow elements. Every row in the grid will always have height dependent on the content...

Another advantage of the technique is that it mitigates much of the fragility of floats. When the …


Build Your Own Social Home!

Many of us have many "homes" on the interwebs. Personally I use Twitter, Flickr, ScrnShots, and Facebook. These web services are cool enough to offer ways to interact with them and pull data out of them without even necessarily visiting the site itself. This is called an API (or Application Programming Interface).

View Demo   Download Files

Update November 2011 - ScrnShots is shutting down. I simplified this demo, brought jQuery up to date, and replaced ScrnShots with Dribbble. I…

Forums Now Have RSS Feed

It blows my mind that phpBB doesn't come with RSS feeds for forums. The new v3 is incredibly nice in so many other ways, it seems like it would have been a trivial addition for such a talented dev team. But what do I know.

Fortunately, a kind forum reader dug up a link for me for a mod that did the trick!

There are all kinds of options that can be set, but I thought the most useful (and …


Elastic Calendar Styling with CSS

This post was co-authored by Chris Coyier and Tim Wright of CSSKarma

A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn't fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks …


MaxSide: jQuery Plugin (and How-To)

Abstraction is an important concept in any language. You can think of CSS as a way of abstracting the design away from the content of a site. This makes the code for both much easier to read, understand and maintain. Javascript is a way of abstracting away the functionality of a site, and jQuery a further abstraction making common tasks much much easier. Writing plugins for jQuery is yet another deeper abstraction which makes your jQuery easier to write and …


Links of Interest


Worried about putting your email address right out in the open for all the world's spam bots to see? Enkoder will obscure it through javascript, yet be a perfectly useable link for everyone else. I tried to include mine here but WordPress wasn't digging the javascript inside the post. Alternatively, you just use GMail and never worry about spam again.


Videos from An Event Apart

CSS expert Eric Meyer explains why the W3C’s recommendation to allow browsers to …


Yahoo’s Secret Text-Sprite Generator

Well I'm not sure if it's a SECRET, but it's certainly neat and I don't think they publicize it.

Basically it's a URL you can hit which will create a perfect sprite-ready PNG graphic of the text you include in the URL. Check it out for yourself:

You can replace the "CSS-Tricks" part of that domain to any text you want. To utilize it, just setup a sprite rollover as normal:

<a href="" id="sprite"> CSS-Tricks </a>

In your CSS, …


Absolute Positioning Inside Relative Positioning

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

To some, this is obvious. To others, this may be one of those CSS "Ah-ha!" Moments. I remember it being a big deal for me when I first "got it".

Here is a visual: