Sums up most, if not all, of the image replacement techniques currently in use
  • sIFR 2 with documentation and sIFR 3 is in development
  • Floated Navigation

    If you've mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. The web-standards-lovin' folk love their unordered lists of navigation and there are a myriad of ways to style them up.


    Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. The first is CSS-based rollovers. More recently, it's been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. This reduces the number of requests your browser has to make, improving the time required to download all files from your server.

    What do you got?

    Of course, there's always more to learn and if you think there's a technique that you think is especially important for the beginner, be sure to add it to the comments.

    Published August 08, 2007
    Categorized as HTML and CSS
    Short URL:


    58 Comments · RSS feed
    Jermayn Parker said on August 09, 2007

    mmm defiantly some links there worth reading and keep bookmarked for later reference, thanks for that.

    Darren said on August 09, 2007

    Lots of resources worth checking out thank you. I hadn't even thought about liquid faux columns so a big thank you for that.

    Miha Hribar said on August 09, 2007

    Great article Jonathan, as usual. The thing that I think causes the most problems to newcomers is cascade. I've seen folks use the most elaborate hacks and load of !important nonsense to circumvent such an easy principle. It's not that they don't get it, its just that they don't know about how cascade works.

    Lee said on August 09, 2007

    You forgot about IE hacks! HTML Comments causing problems in some instances (last character repeat bugs) fixing problems in others (fixing foated images) setting height to 0.001% to stop things disappearing etc.

    Also, the issues related to relatively positioned elements in floated containers, ie unclickable items etc.

    Love the redesign btw, I haven't checked back here in a while!

    Christopher Schmitt said on August 09, 2007

    All good points! But sometimes even the basic parts of CSS can be tricky for Web designers. I agree with Miha Hribar on the cascade including specificity is hard for new CSS users to use well.

    Montoya said on August 09, 2007

    Let's not forget liquid layouts, which are still a bane for most people. I keep a lot of resources at Liquid Designs for anyone who needs help.

    Luke Visinoni said on August 09, 2007

    How about IE conditionals?

    Learning about those saved me from having to apply a million hacks to make IE happy within my base css file. Now I can serve IE its own css file if it needs special attention.

    Jay Luker said on August 09, 2007

    A great set of links, but I agree with Miha that you're missing what I think is the most crucial concept necessary to "get over the hump", and that's cascading/inheritance. (OK, maybe the box model is more important.)

    I mean, it's called Cascading Style Sheets, and yet how many stylesheets have you seen where the author has created an endless number of class specifications, each of which sets the same font-family, font-size, etc., each delegating to it's own small set of elements.

    I think most CSS "dabblers" don't understand the power of the various types of selectors (or they're still afraid of sketchy browser implementation), and they don't understand how to utilize cascading. Those are the things necessary to get over the hump.

    David Brooks said on August 09, 2007

    This is a great reference article, thanks for writing it.

    One thing that comes to mind is the idea of false columns, that's something that continues to come up when I'm teaching new people about CSS.

    George Huff said on August 09, 2007

    I've never seen (nor thought of) anyone doing their rollover images in the way mentioned. A technique I used to address the issue is to put the "hover image" as the background of the containing list item, and then the "off image" on the a. Upon a:hover, background:none.

    Seems like it would be a pain to setup every button like that, especially if they have unique text. Good post.

    Carly said on August 09, 2007

    Great article, and yes alot of great resources in there. This is the great thing about programming, is finding more efficient ways to do things that your currently doing in a less then optimal fashion.

    Sprites, takes me back to the Commodore 64 days and full screen scrollers. :)

    Ruud Welten said on August 09, 2007

    Ah, well, a great article! If only I had found one of these before I was finding all of this out by trial-and-error.

    Still, some of these links did provide me with something new to work with!

    Someones Ex GF said on August 09, 2007

    Article was a bit above my head, but I understood enough of it to learn that I should brush up on my CSS skills!

    Joseph Oster said on August 09, 2007

    bad link? "Listamatic" goes to

    oral seymour said on August 10, 2007

    Thanks. I haven't designed a site in years and now I'm having to relearn all this new css layout. The article provided a lot of help to me....but I still miss tables....

    Ta4ka said on August 10, 2007

    Very cool stuff

    Harry Roberts said on August 10, 2007

    Some good links there! Well worth a read, nice artice.


    Jonathan Snook said on August 10, 2007

    @Joseph Oster: thanks. Fixed the link to Listamatic.

    Shycon said on August 10, 2007

    Some good info here for dealing with CSS. Marked for reference. Thanks!

    Chris Coyier said on August 10, 2007

    Great article. I totally agree there is a "hump" in the learning curve right before it all comes together in peoples minds. I like that you mentioned DOCTYPE as well. People can avoid a lot of confusion and achieve consistent behavior if those are understood.

    Dan said on August 10, 2007

    Wow very nicely written :) Going to share this with my readers on P2L, thanks!

    john said on August 12, 2007

    great resources for css beginners and advanced too. I bookmarked the page ...I know I will need the tips sooner or later. Cheers,

    Chris Pall?? said on August 12, 2007

    I have a tip that's more geared towards effective layout. It's a mash up of Jason Santa Maria's gray boxes wireframe approach and traditional newspaper column layouts, but I basically made a fluid layout with a transparent PNG grid overlay. It knocks out the links when viewing, but during production, it's okay.

    Warning not suitable for IE viewers. :-) Best for FF. (It's just production stuff!)

    Go ahead change the size of the window and watch the scaling of columns and elements:

    Same with wireframes:


    Casper said on August 12, 2007

    One technique I myself employ each and every time, is the global whitespace reset..

    Simply put, start off your stylesheet at the very top, like this;

    * {margin: 0; padding: 0; border: 0;}

    The asterisk (*) is a universal selector, ie. affecting every single element throughout your (x)HTML.
    What it really does is zeroing out differences between browsers, and keeping everything in check.
    Of course, you'll have to apply margin, padding and borders yourself, to elements that'd otherwise have these properties set by default, eg. paragraphs, lists and especially the body tag itself (opera applies padding, IE margin).

    Get used to this method, and you'll quickly become a master of the grid, not a slave ;)


    Graham Wheeler said on August 13, 2007

    <h3>When a (Microsoft) Problem Comes Along, You must ZOOM it!</h3>
    Many, many coded designs ago, I too discovered the virtues of 'overflow: auto' with regard to clearing floats. Of course, setting width or height is often not a very good way to get IE6-and-below to clear the float, especially when the element in question has padding. Luckily, though, Microsoft has given us an out by providing conditional comments. Now, I just have an IE6-and-below style sheet with a few tweaks in it.

    The best part of this scheme is that I can use the MS-proprietary CSS property 'zoom' in the IE style sheet. 'zoom: 100%' bestows 'hasLayout' on any element to which it is applied, which fixes a whole subset of rendering issues in one fell swoop. Parent elements expand to clear floated children; floated anchor elements containing images set to 'display: block' don't get all wonky; list items using background-image bullets don't flake out; dogs and cats, living togeth- well, you get the idea.

    I'm sure there are edge cases where 'overflow: auto' and/or 'zoom: 100%' aren't suitable. I just haven't found one yet, after coding dozens of designs.

    Andrew Gwozdziewycz said on August 13, 2007

    Floats take a little getting used to, but I wouldn't do it any other way now that I've gotten through learning it. I'm also a big fan of the sprites and image replacement techniques. Again, a bit tricky to get used to, but once you do... look out.

    Dan said on August 13, 2007

    Forms are teh sux.

    HTML forms are the bane of my CSS existence.

    ryan leatzaw said on August 13, 2007

    I'd have to agree with most of the people on here about conditional statements, I don't think they're as vital as the six categories mentioned here but with CSS3 getting closer and closer who knows what things will have to be kept away from IE to keep things sane.

    They definitely are a major help already.
    Great article, I've mined it for whatever I can learn.

    Ewan said on August 14, 2007

    Nice article, will certainly come in handy.

    Zeb said on August 19, 2007

    Great read. I've bookmarked this article. Thanks for putting things together.

    Jason Kataropoulos said on August 24, 2007

    All well put Jonathan.

    I could not agree more with the a€?cascadea€? issue. It is the main bottleneck to rookies. I will have to add to that the semantic meaning to markup and CSS. It is hard for beginners to grasp the value of semantic meaning to code. Same applies to server side code and even in SQL statements.

    Carlos Eduardo said on August 27, 2007

    Nice article. This is a great list for beginners and experts!

    H5N1 said on August 27, 2007

    It's a good sensation...
    I mean: this is my (and many other's) normal way to act and think.
    Well, not in all points but most of them.
    For months - no - years! - many people keep on thinking 'bout a different web.
    What once was weired, today is normal!
    Yes, I have a good feelings about that! :D

    Davey Boyd said on September 03, 2007

    Thanks for these pointers. Its good to get an overview of doing things the CSS way.

    Misty said on September 05, 2007

    Great article. Thanks!

    Ben Spencer said on September 09, 2007

    What an amazing article! I was searching the web for an article like this, and a couple of hours later this one cropped up on my RSS feeds. Crazy luck! Thanks very much Jonathan.

    herr_ernst said on September 11, 2007

    good article. but in my opinion it's now obsolete to consider quirks mode (nobody uses ie<6 nowadays)

    sangesh said on September 14, 2007

    Interesting article.

    Great list for novice as well as for professionals too

    goldfries said on September 14, 2007

    I'm glad to see many designers / developers around the world acknowledge the importance of CSS / Web Standards.

    It's just sad that in my part of the world, people don't care! :) Well I do, just bought a SitePoint book on CSS and it's great!

    I look forward to learn more from you.

    btw, are you ever going to STYLIZE the "Add my comment" button? ;) To match it with the site's beauty.

    Alfred Fox said on September 17, 2007

    Great post. Your list was most comprehensive.

    Mike Kider said on September 17, 2007

    Great roundup of CSS goodness. I just got stymied from a custom component I had written for a customer. Turns out that my doctype had been stripped out and replaced with a doctype that rendered my code in quirksmode. Truly evil.

    William said on September 17, 2007


    Bryan said on September 18, 2007

    Clearfix is what I use for handling floats. Its by far the easiest and best cross browser approach to handling the clearing of floats I have seen. I know many people will use various "overflow" properties to pull off the clear, and that is great so additional classes (i.e; class="clearfix") doesn't have to get amended to various containing divs, but I have found using the overflow approach can have its cross browser pitfalls.

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    Eric said on September 19, 2007

    I'm an aspiring web developer (pretty young too - not even in college yet) and its sites like these that I love to read. Keep it up Snooks.

    LA said on November 05, 2007

    I also think the Sitepoint book is great.

    James said on August 29, 2008

    Thanks for sharing this nice reference article. I tried that Liquid Faux Columns technique and it works perfect!

    NewYoka said on September 08, 2008

    Ya the liquid faux columns worked great for me too!

    I dream of a day when there will be solid standards across browsers, I just hope google Chrome doesn't have its own CSS nuances.

    Lenen said on September 11, 2008

    I agree with both James and NewYoka that the liquid faux colomus article is great. I have been looking for this for a while now and finally found it :)

    Gmblrs said on October 27, 2008

    Great reference article, thanks for writing it. I love the fast rollovers article. Bookmarked!

    Exdizajn said on October 31, 2008

    Floated Navigation, there is a bug in ff 2...

    Alex @ Webson Design said on November 06, 2008

    I am using these techniques in almost every project, especially floated list and sprites/image replacements for navigation... nice list :)

    Web Design said on November 12, 2008

    Great list, I bookmarked a few that will be really helpful in my work. Thanks.

    Computer Parts said on November 25, 2008

    Great post! Really informative post. Thanks for sharing with us.

    Prengnant Mama said on December 05, 2008

    These are great techinques I have been using them for a little bit now. The floated list is a great tool as well as the replacements for navigation, thanks so much for your valued work !

    Price V said on December 09, 2008

    css examples -

    Great reference article, thanks

    Michael Swaaley said on December 27, 2008

    Thanks for the helpful information

    fetre deepaak said on February 17, 2009

    Outstanding article sir!Bookmarked cheers.

    D??€D?DoD?D?D????? said on February 18, 2011

    Dˉ D?D?DoD°Do D?Dμ ??D?D?D3D?D° D2????D°D2D????? ?€D?????D?D?Do D2 DoD?D?DμD???D°?€D?D1. D’????D°D2D????? ??????D?Do?? D?D° ?€D?????D?D?Do D° D?D? D?Dμ D?D?DoD°D·??D2D°Dμ?? DμD3D? DoD°Do ?€D?????D?D?Do. D§??D? D?D?Dμ D′DμD?D°??D??
    D¤D???DoD? D±Dμ?€?? D???????D′D° -

    Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.