Sliding Doors of CSS, Part II

by Douglas Bowman

101 Reader Comments

Back to the Article
  1. Thanks Doug! It’s superb, especially with the niceties added in part II.

    What do you recommend as a technique for centering the set of tabs in the viewport?  A quick stab at putting text-align:center on the ul didn’t do it.

    Copy & paste the code below to embed this comment.
  2. Well, there are two different methods for centering a block in CSS. Since i’m not the expert that came up with them, here are the original sites:
    http://bluerobot.com/web/css/center1.html
    http://bluerobot.com/web/css/center2.html
    Of course the second one only works if you set a width, but still check it out anyway :).

    Copy & paste the code below to embed this comment.
  3. First of all, my compliments: both articles are clearly written, have great examples, demonstrate (highly!) impressive CSS acumen and the resulting tabs look great.

    That said (and I know I’m going to get flamed for this, but so be it…), I have to take strong exception to the section of (Part II) entitled “No Current Tab”. You just CAN’T have a set of tabs without one of them being selected. Period. Full stop. No exceptions—don’t do it! (And yes, I have seen countless examples (for example, the old Yahoo) where people have attempted to do this anyway.)

    To clarify, what I mean by “CAN’T” is not that it is technically impossible (of course it is possible, as Example 7 in the article demonstrates), it is just really, really unwise. So, I’m saying “can’t” in the sense that you “can’t” let your two year old play with a lighter or matches.

    Look, these CSS-generated ‘tabs’ (and the similar GUI widgets that they are modeled on) are actually just visual metaphores for a real (physical) set of tabs . . . like you’d see on manila folders and on file cabinet hanging folders. Now with the physical folders, one (and only one) folder has to be in front. You can’t have two (or more) of them simultaneously be front-most.

    Right about now some may be thinking: hey, we’re in the virtual (not physical) world here; why don’t we break free of the restraints? Well, not only does having “no current tab” break the metaphore, it causes serious usability problems.

    If you don’t have one of the tabs selected (current), then the user does not know where they are in reference to the (implied or apparent) navigation that the set of tabs supports. And if they are unsure as to where they are now, they will also have a (much) more difficult time deciding where to go next. Now if your navigation is simple and the navigation paths are clearly labeled (again, think of Yahoo), then the latter difficulty is lessened (but is still there); for unfamiliar site/applications; poorly labeled paths; or branching navigation flows the difficulty will be worse.

    For completness’ sake, I should also mention that using tab sets for open-ended navigation (like Yahoo does) or for “a registration process” (as the article mentions) or any other process for that matter, is just a bad idea in the first place. If their usage is confined to just using them as they were originally intended (i.e. to space-multiplex a lot of GUI elements in an overall fixed-size area—for example: for property sheets) then these problems can be avoided.

    Thanks for listening;
    let the flames begin…    ;-)

    Copy & paste the code below to embed this comment.
  4. I ran through this excellent tutorial and am excited to try out the techniques discussed.
    I thought I’d mention that IE will never cease to amaze. Throughout the article, I noticed the clickable region problems (using IE 5.5). Throughout Part 1 and including Example 7 in Part 2, my clickable region was faulty. Then in Example 8 my clickable region was fixed to include the entire tab. However in the final version (Example 9), my clickable region returned to the smaller region: the entire tab, but missing the left image area of the tab.

    Figured I’d point this out since lots of people are still using IE 5.x.

    Thanks for the great two-part article!

    Copy & paste the code below to embed this comment.
  5. This design seems to assume that the tab content will come after all the menu items. Changing tabs involves a server round trip to update the tab content.

    Is it possible to combine some of the techniques used in the suckerfish article with this article, plus a little javascript magic, to avoid this round-trip?

    My markup might look like

    <ul>
      <li>Tab 1 title
        <div>
          …. content of tab 1
        </div>
      </li>
      <li>Tab 2 title
        <div>
          …. content of tab 2
        </div>
      </li>
    </ul>

    I can see how I can use display:none to hide the content of the inactive tabs, but how do I get the div content under the active tab to appear below ALL the tabs? I’d like the content to somehow “float” beneath all the tabs.

    Thanks

    Copy & paste the code below to embed this comment.
  6. What about using the ‘behavior’ property in IE and creating an HTC file to access the background position of the parentNode instead of adding extra span tags to accomplish the same thing? And then in doing so, you could remove the box model hack and reset the height and width in the HTC. This certainly keeps your HTML simple, although, at the cost of a more complicated implementation of having to create an HTC file.

    Copy & paste the code below to embed this comment.
  7. Just use a single image of both complete tabs.The way the background images are positioned and overlapped, there’s no need to use seperate images for the left and right.  This saves an image request and any worry that the two slices optimized my end up with slightly unmatched palettes.

    Copy & paste the code below to embed this comment.
  8. Yes! I’ve figured out the source of the IE6/XP bug! When I was scouring the settings of the XP machine that worked, I noticed that the cache size was set to a small amount (20MB). My cache on my home machine (which displayed the bug) had a cache size of 895MB (by default). When I changed it to 20MB, everything started working. It seems that with a larger cache size the browser does not check for newer versions of files at the right time. Well, at least we know it isn’t a code error!

    Copy & paste the code below to embed this comment.
  9. Hey guys,,

    I also moved to tableless layouts as most of you did. but there’s still one situation where I use tables. when I need to keep certain graphic or text element at the bottom of the page (something like here http://www.mldgroup.com). How should I resolve this with div’s?

    thanks,,

    Copy & paste the code below to embed this comment.
  10. You could actually use the same image for both the item (e.g. the LI element) and for the link. They will combine just fine.

    Copy & paste the code below to embed this comment.
  11. I also had the flicker problem with IE6/W2K. Reducing the cache size to 20MB eliminated the flickering of the tabs.

    I’m not sure this resolves anything, since the flicker problem remains unpredictable.

    Does anyone know what is the default cache size setting for IE6? Thanks.

    Copy & paste the code below to embed this comment.
  12. This works flawlessly!  However we have a need to place an image of a line (not a line that can be mocked up by a border) at the bottom of the tabs and hence in the BG

    Challenging, even when you adjust the padding to the depth of the imaged line, because the sliding left door wants very badly to be in front (the whole point, right!) and gets in front of the bg image no matter how you pad it.

    So … we need to either bring the BG forward or slide the left door behind the bg but still in front of the right door.

    Ideas?  z-axis?

    R.

    Copy & paste the code below to embed this comment.
  13. Here’s an odd one

    http://www.chaosmint.com/testcss/test.html

    This flickers for mr in Windows IE 6

    http://www.alistapart.com/d/slidingdoors2/v1/ex10.html

    this does not.  Exact same code.  thoughts?

    arn

    Copy & paste the code below to embed this comment.
  14. Okay.  I’m not intelligent enough to add Step 8a’s IE fix to Step 10a.  Everytime I try weird stuff happens.  I spent an hour on it last night and just couldn’t work it out.  Sad, I know.  Could someone please help me or post the answer outright?

    Copy & paste the code below to embed this comment.
  15. I got rid of the flicker by clearing my cache. Works fine now. The ability of the tabs to resize is awesome.

    But, given this flicker problem (caused by the browser, not the code), would any professional web designers implement this technique on a highly visible site? I’m especially interested if Doug would feel secure using it on a site such as www.adaptivepath.com.

    I don’t think I could =/

    Copy & paste the code below to embed this comment.
  16. If anyone has the full code (up to step 10a) with the IE rollover fix included, I would be grateful if you could post it here.

    Copy & paste the code below to embed this comment.
  17. I am going to take a new approach for my Japanese web site.
    The sliding door is a great article and definitely I want to use on my pages.

    I tested all the examples (example 1-10) and I found a problem with Japanese character environment. If I reduce browser’s width, it start character wrap within a tab, further reducing window width a tab itself wraps.
    This does not occur in alphabet characters.
    Is there any fix for this?

    Copy & paste the code below to embed this comment.
  18. I forgot to tell one more point.
    Tab words of example 10 is complete vertical writing regardless width of windows.

    I can send html pages which show the problems if anyone challenges fixing this issue.

    Copy & paste the code below to embed this comment.
  19. Does anyone have an example of turning the tabs sideways?

    _CJ

    Copy & paste the code below to embed this comment.
  20. Did anyone correct problem with MSN for MAC OS X ? In this browser tabs looks like in Safari (100% width) without hack…

    Copy & paste the code below to embed this comment.
  21. Did anyone correct problem with MSN for MAC OS X ? In this browser tabs looks like in Safari (100% width) without hack…

    Copy & paste the code below to embed this comment.
  22. I think that many people had problems incorporating the IE rollover fix into example 10. This is what I came up with:

      body {
        background: #fff;
        margin: 0;
        padding: 0;
        color: #000;
        font: x-small/1.5em Georgia,Serif;
        voice-family: “\”}\”“; voice-family:inherit;
        font-size: small;
        }

      html>body { font-size: small; }
     
      #header {
        float: left;
        width: 100%;
        background: #dae0d2 url(bg.gif) repeat-x bottom;
        font-size: 93%;
        line-height: normal;
        }
      #header ul {
        margin: 0;
        padding: 10px 10px 0;
        list-style: none;
        }

      #header li {
        margin: 0;
        padding: 0;
        display: inline;
        }

      #header a {
        float: left;
        background: url(left_both.gif) no-repeat left top;
        width: .1em;
        margin: 0;
        padding: 0 0 0 9px;
        border-bottom: 1px solid #765;
        font-weight: bold;
        color: #765;
        text-decoration: none;
        }

      #header a span {
        float: left;
        display: block;
        background: url(right_both.gif) no-repeat right top;
        margin: 0;
        padding: 5px 15px 4px 6px;
        }

      #header>ul a { width: auto; }

      /* Commented Backslash Hack hides rule from IE5-Mac \*/
      #header a span { float: none; }
      /* End IE5-Mac hack */

      #header a:hover span {
        color: #333;
        }

      #home #nav-home a, #news #nav-news a,
      #products #nav-products a, #about #nav-about a,
      #contact #nav-contact a {
        background-position: 0 -150px;
        border-width: 0;
        }

      #home #nav-home a span, #news #nav-news a span,
      #products #nav-products a span, #about #nav-about a span,
      #contact #nav-contact a span {
        background-position: 100% -150px;
        padding-bottom: 5px;
        color: #333;
        }

      #header a:hover {
        background-position: 0% -150px;
        color: #333;
        }
      #header a:hover span {
        background-position: 100% -150px;
        }

    It works fine for these browsers:
    – Internet Explorer 5.01 SP2
    – Internet Explorer 5.5 SP2
    – Internet Explorer 6.0 SP2
    MSN Explorer 6.0
    – Mozilla 1.5
    – Mozilla Firebird 0.7
    – Netscape Navigator 7.1
    – Opera 7.11

    If you find any bugs, please post here.

    Copy & paste the code below to embed this comment.
  23. i’ve taken liberally from doug’s techniques to add drop downs to a very similar menu layout. i’ve got a working solution in the latest gecko browsers, ie 5+, opera 7.11 (windows). on the mac side it works in safari and gecko browsers, but goes absolutely wacko in ie 5.2. view it here – http://rzand.homedns.org:8080/main/home

    btw, this layout seems to be more browser friendly than the brainjar example, another demo i have borrowed heavily from. anyone seen this before and have any ideas?

    btw, i’m sniffing the browser on the server side with php and including local styles that override those in the stylesheet rather than using css hacks.

    Copy & paste the code below to embed this comment.
  24. Rz, do you think it will help win Netscape 4 users over to your viewpoint to lecture them about what browser they are using?

    Actually, your site seems to work fine in Netscape 4 with JavaScript off.  I just don’t see your interface work.

    And that’s actually the great thing about the technique in this article.  If you have a modern browser, you see the cool stuff.  If you have Netscape 4, the site still works.

    (Well, except for any links to a mid-page id, but aside from that.)

    Can’t upgrade to Netscape 6 until I buy a new Mac (requires OS X, which doesn’t run on an 8600), iCab crashes too much on my unit, and I’d rather not use IE, even if it’s IE/Mac.

    Call me stubborn, but it’s my attention you’re trying to get, and I’m darned if I’m going to buy a new computer just to visit your site.

    Copy & paste the code below to embed this comment.
  25. First off – yes, this is a great technique, and a very easy-to understand tute.

    I’ve been using these tabs to allow navigation through a one-way process (specifically an online ordering process) – the user can see where they are in the process, and click back to see or change previous steps/tabs. However, the user shouldn’t be able to click forward more than one tab at a time (if you’re one step one, you can’t jump straight to step 4)

    So – how can we create a tab which is disabled, or greyed out? If we remove the anchor element, we no longer have a second ‘sliding door’ to apply the style to…

    anyone got any ideas? preferably without introducing extra spans…fanks!

    Copy & paste the code below to embed this comment.
  26. Actually, it isn’t a broken or unusable interface. There are other homologous tab examples: cookbooks, reference books, VW Owner’s Manuals. In these examples, often you’ll see tabs for the referential content; but they are all still have preceding material before the first tab: cover, title page, contents, introductions.

    No flame. Just rebuttal. ;)

    Copy & paste the code below to embed this comment.
  27. Excellent stuff but this does not work in IE 5/Mac whereas it works perfectly in IE5.x+ for PC and also NS7 for both PC and Mac. Is there any hack to make it work for IE/Mac?

    Thnx

    Copy & paste the code below to embed this comment.
  28. In your first article about sliding navs you mentioned the abilility to put a logo in the header# – how do you ad this?
    Thanks – great CSS!

    Copy & paste the code below to embed this comment.
  29. Okay, not so mind-boggling, but certainly opens the lid on what CSS can do. Who would have thought compliance could be so ‘cool’ ;-)

    Copy & paste the code below to embed this comment.
  30. Hi, I would like to ask if there is any posiblity to center <li> “tabs” to the header div. I don’t want to center the header div but only ul and li. The reason is because I will dynamicly change amount of tabs and I can’t center it to the page right now without changing header width.  :-(
    For beter understandig you can look at
    http://www.daend.cz/FTP/WEB-templates/01/
    Right now it looks like tabs are + – centered. But if I remove one from the list it is not centered in the header div with black border.
    Thanks for your help.

    Copy & paste the code below to embed this comment.
  31. Hello everyone and many thanks for the article !

    Is there a way to make the tabs to evenly distribute themselfs when resizing the window ?
    Either by reduce/enlarge the gaps or by changing the tabs’ width.

    Thanks a lot in advance,
    Chris

    Copy & paste the code below to embed this comment.