Sliding Doors of CSS, Part II

by Douglas Bowman

101 Reader Comments

Back to the Article
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.