Sliding Doors of CSS

by
Published in CSS, HTML, Interaction Design
A note from the editors: While brilliant for its time, this article no longer reflects modern best practices.

A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2’s current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.

Article Continues Below
Article Continues Below

One of those cases is tabbed navigation. It’s time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. You’re most likely aware that CSS can be used to tame a plain unordered list. Maybe you’ve even seen lists styled as tabs, looking something like this:

[Ordinary example of CSS-based tabs, using flat colors and squared-off corners.]

What if we could take the exact same markup from the tabs above, and turn them into something like this:

[Stylized tabs using rounded corners and subtle three-dimensional shading.]

With simple styling, we can.

Where’s the Innovation?#section2

Many of the CSS-based tabs I’ve seen suffer from the same generic features: blocky rectangles of color, maybe an outline, a border disappears for the current tab, a color changes for the hover state. Is this all CSS can offer us? A bunch of boxes and flat colors?

Prior to a more widespread adoption of CSS, we started seeing a lot of innovation in navigation design. Creative shapes, masterful color blending, and mimicry of physical interfaces from the real world. But these designs often relied heavily on a complex construction of text-embedded images, or were wrapped with multiple nested tables. Editing text or changing tab order involved a cumbersome process. Text resizing was impossible, or caused significant problems with page layout.

Pure text navigation is much easier to maintain and loads more quickly than text-as-image navigation. Also, even though we can add alt attributes to each image, pure text is even more accessible since it can be resized by users with impaired vision. It’s no wonder that pure text-based navigation, styled with CSS, is leaping back into web design. But most CSS-based tab design so far is a step back in appearance from what we used to do — certainly nothing to be included in a design portfolio. A newly adopted technology (like CSS) should allow us to create something better, without losing the design quality of previous table hacks and all-image-based tabs.

The Sliding Doors Technique#section3

Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images. One for the left, one for the right. Think of these two images as Sliding Doors that complete one doorway. The doors slide together and overlap more to fill a narrow space, or slide apart and overlap less to fill a wider space, as the diagram below shows:

[Diagram shows two sets of doors. The first set is pushed together to take up less space. The second set is spaced apart to occupy a wider space.]

With this model, one image covers up a portion of the other. Assuming we have something unique on the outside of each image, like the rounded-corner of a tab, we don’t want the image in front to completely obscure the image behind it. To prevent this from happening, we make the image in front (left-side for this example) as narrow as possible. But we keep it just wide enough to reveal that side’s uniqueness. If the outside corners are rounded, we should make the front image only as wide as the curved portion of the image:

[Diagram shows an isolated narrow left-side image with rounded top-left corner, then repeats that same image placed in front of a right-side image with a rounded right-side corner.]

If the object grows any larger than the width shown above, due to differing text or type size changes, the images will get pulled apart, creating an ugly gap. We need to make an arbitrary judgment about the amount of expansion we’ll accommodate. How large do we think the object might grow as text is resized in the browser? Realistically, we should account for the possibility of our tab text increasing by at least 300%. We need to expand the background images to compensate for that growth. For these examples we’ll make the back image (right-side) 400×150 pixels, and the front image 9×150 pixels.

Keep in mind that background images only show in the available “doorway” of the element to which they’re applied (content area + padding). The two images are anchored to the outside corners of their respective elements. The visible portions of these background images fit together inside the doorway to form a tab-like shape:

[Diagram shows both images with extra height added to the bottom. The right-side image also has extra width added to the left. The only portions which remain visible fit together perfectly to form the illustion of a tab-like shape.]

If the tab is forced to a larger size, the images slide apart, filling a wider doorway, revealing more of each image:

[Diagram shows the two images pulled apart slightly to create a wider tab, as well as a slightly taller vertical height to reveal more of each image. Since both background images have allowances for expansion, the the illusion is that the tab itself expanded naturally with the text contained inside.]

For this example, I used Photoshop to create two smooth, slightly three-dimensional, custom tab images shown at the beginning of this article. For one of the tabs, the fill was lightened and the border darkened — the lighter version will be used to represent the “current” tab. Given this technique’s model for left and right tab images, we need to expand coverage area of the tab image, and cut it into two pieces:

[Left- and right-side images]

The same thing needs to happen with the lighter current tab image. Once we have all four images created (1, 2, 3, 4) we can jump into the markup and CSS for our tabs.

Tab Creation#section4

As you explore the creation of horizontal lists with CSS, you’ll notice at least two methods for arranging a group of items into one row. Each comes with its own benefits and drawbacks. Both require dealing with rather funky aspects of CSS which quickly become confusing. One uses the inline box, the other uses floats.

The First Method — and possibly the more common — is to change the display of each list item to “inline”. The inline method is attractive for its simplicity. However, the inline method causes a few rendering problems in certain browsers for the Sliding Doors technique we’re going to discuss. The Second Method, which is the one we’ll focus on, uses floats to place each list item in a horizontal row. Floats can be equally frustrating. Their seemingly inconsistent behavior circumvents all natural logic. Still, a basic understanding of how to deal with multiple floated elements, and the means to reliably “break out” of floats (or contain them) can achieve wonders.

We’re going to nest several floated elements within another containing floated element. We do this so that the outer parent float completely wraps around the floats inside. This way, we’re able to add a background color and/or image behind our tabs. It’s important to remember that the next element following our tabs needs to reset its own position by using the CSS clear property. This prevents the floated tabs from affecting the position of other page elements.

Let’s begin with the following markup:

<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

In reality, the #header div might also contain a logo and a search box. For our example, we’ll shorten the href value in each anchor. Obviously, these values would normally contain file or directory locations.

We begin styling our list by floating the #header container. This helps ensure the container actually “contains” the list items inside which will also be floated. Since the element is floated, we also need to assign it a width of 100%. A temporary yellow background is added to ensure this parent stretches to fill the entire area behind the tabs. We also set some default text properties, ensuring everything inside will be the same:

#header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
}

For now, we also set all of the default margin/padding values of the unordered list and list items to “0”, and remove the list item marker. Each list item gets floated to the left:

#header ul {
    margin:0;
    padding:0;
    list-style:none;
}
#header li {
    float:left;
    margin:0;
    padding:0;
}

We set the anchors to block-level elements so we can control all aspects without worrying about the inline box:

#header a {
    display:block;
}

Next, we add our right-side background image to the list item (changes/additions are bolded):

#header li {
    float:left;
    background:url("norm_right.gif")
      no-repeat right top;
    margin:0;
    padding:0;
}

Before adding the left-side image, we pause so we can see what we have so far in Example 1. (In the example file, ignore the rule I’ve applied to the body. It only sets up basic values for margin, padding, colors, and text.)

– – –

Now we can place the left-side image in front of the right by applying it to the anchor (our inner element). We add padding at the same time, expanding the tab and pushing the text away from the tab edges:

#header a {
    display:block;
    background:url("norm_left.gif")
    no-repeat left top;
    padding:5px 15px;
}

This gives us Example 2. Note how our tabs have begun to take shape. At this point, a word of acknowledgement to confused IE5/Mac users, who are wondering, “What’s going on here? The tabs are stacked vertically and stretch across the entire screen.” Don’t worry, we’ll get to you soon. For now, do your best to follow along, or temporarily switch to another browser if one is handy, and be assured we’ll fix the IE5/Mac issue shortly.

– – –

Now that we have the background images in place for normal tabs, we need to change the images used for the “current” tab. We do this by targeting the list item which contains id=“current” and the anchor inside it. Since we don’t need to alter any other aspects of the background, other than the image, we use the background-image property:

#header #current {
    background-image:url("norm_right_on.gif");
}
#header #current a {
    background-image:url("norm_left_on.gif");
}

We need some kind of border along the bottom of our tabs. But applying a border property to the parent #header container won’t allow us to “bleed” the current tab through this border. Instead, we create a new image with the border we want included along the bottom of the image. While we’re at it, we also add a subtle gradient so it looks like this:

We apply that image to the background of our #header container (instead of the yellow color we had), push the background image to the bottom of the element, and use a background color matching the top of this new image. At the same time, we remove the padding from the body element I originally inserted for us, and apply 10 pixels of padding to the top, left, and right sides of the ul:

#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;
}

To complete the tab effect, we need to bleed the current tab through the border, as mentioned above. You might think we would apply bottom borders to our tabs matching the border color in the #header background image we just added, then change the border color to white for the current tab. However, doing this would result in a tiny “step” visible to pixel-precision eyes. Instead, if we alter the padding of the anchors, we can create perfectly squared-off corners inside the current tab, as the magnified example below shows:

[Enlargement of two tab versions, the first showing the tiny 1-pixel step from using the bottom border, the second showing a perfect 90-degree angle.]

We do this by decreasing the bottom padding of the normal anchor by 1 pixel (5px – 1px = 4px), then adding that pixel back to the current anchor:

#header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px 4px;
}
#header #current a {
    background-image:url("norm_left_on.gif");
    padding-bottom:5px;
}

The change allows the bottom border to show through for normal tabs, but hides it for the current tab. This brings our code up to Example 3.

Finishing Touches#section5

Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent. If the curves are anti-aliased, we matte the edges to an average of the background color behind them.

Now that the corners are transparent, a piece of the right-side image shows through the corner of the left-side image. To compensate for this, we add a small amount of left padding to the list item equivalent to the width of the left-side image (9px). Since padding was added to the list item, we need to remove that same amount from the anchor to keep the text centered (15px – 9px = 6px):

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

However, we can’t leave it at that either, because our left-side image now gets pushed away from the left tab edge by the 9 pixels of padding we just added. Now that the inner edges of the left and right visible doorways butt up against each other, we no longer need to keep the left image in the front. So we can switch the order of the two background images, applying them to opposite elements. We also need to swap the images used for the current tab:

#header li {
    float:left;
    background:url("left.gif")
      no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
}
#header a, #header strong, #header span {
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
}
#header #current {
    background-image:url("left_on.gif");
}
#header #current a {
    background-image:url("right_on.gif");
    padding-bottom:5px;
}

Once we do this, we arrive at Example 4. Note that the tweaks required to make the corners transparent creates a small dead space on the left side of the tab where it’s not clickable. The dead space is outside the text area, but it is slightly noticeable. Using transparent images for each side of our tabs is not required. If we prefer not to have the small dead space, we need to use a flat color behind the tabs, then use this color in the corner of our tab images instead of making them transparent. We’ll keep the new transparent corners for now.

– – –

For the remaining tweaks, we make a slew of changes all at once: bold all tab text, change normal tab text to a brown color, make current tab text a dark gray color, remove link underlines, and change the text color for the link hover state to the same dark gray. We see all additions and changes so far represented in Example 5.

One Hack for Consistency#section6

After Example 2, we acknowledged a problem with IE5/Mac where each tab stretched across the entire browser width, forcing each one to stack vertically on top of each other. Not quite the effect we were intending.

In most browsers, floating an element will act sort of like shrink-wrapping it — it gets shrunk to the smallest possible size of the contents it contains. If a floated element contains (or is) an image, the float will shrink to the width of the image. If it contains only text, the float will shrink to the width of the longest non-wrapping line of text.

A problem enters the picture for IE5/Mac when an auto-width block-level element is inserted into a floated element. Other browsers still shrink the float as small as possible, regardless of the block-level element it contains. But IE5/Mac doesn’t shrink the float in this circumstance. Instead, it expands the float and block-level element to full available width. To work around this problem, we need to float the anchor also, but only for IE5/Mac, lest we throw off other browsers. First we’ll set the existing rule to float the anchor. Then we’ll use the Commented Backslash Hack to hide a new rule from IE5/Mac which removes the float for all other browsers:

#header a {
    float:left;
    display:block;
    background:url("right.gif")
      no-repeat right top;
    padding:5px 15px 4px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#765;
}
  /* Commented Backslash Hack
     hides rule from IE5-Mac */
  #header a {float:none;}
  /* End IE5-Mac hack */

IE5/Mac browsers should now display the tabs as intended, according to Example 6. Nothing should have changed for non-IE5/Mac browsers. Note that IE5.0/Mac suffers from a lot of rendering bugs that were fixed in the upgrade to IE5.1. Because of this, the Sliding Doors technique suffers in version 5.0 beyond a point I’m willing to hack. Since the upgrade to IE5.1/Mac has been readily available for some time now, the percentage of OS 9 Macs still running IE5.0 should be tapering off to almost nothing.

Variations#section7

We just walked through the Sliding Doors technique for creating tabbed navigation with pure text, marked up with an unordered list of links, altered with a few custom styles. It loads fast, is simple to maintain, and text within can be scaled up or down significantly in size without breaking the design. Need we mention how flexible the technique can be for creating any type of sophisticated-looking navigation?

Use of this technique is only limited by our imagination. Our final example represents just one possibility. But we shouldn’t let an example place boundaries on our ideas.

For instance, tabs aren’t required to be symmetrical. I quickly created Version 2 of these tabs, which avoids the shaded 3-D look in favor of flat colors, angular edges, and a wider and more detailed left-side. We can even switch the order of left/right images, depending on the design, as Version 2 shows. With some careful planning and clever image manipulation, the bottom border could be abandoned in favor of matching the tab images with the background running behind them, as shown in my Deco-inspired Version 3. If your browser supports alternate style sheet switching, you can even view this master file, and switch between the three different versions by alternating between style sheets.

Other effects we don’t cover here could be added on top of this technique. In the example I ran through, I changed the text color for the hover state, but entire images could be swapped out to create interesting rollover effects. Wherever two nested HTML elements already exist in the markup, CSS can be used to layer background images for effects we haven’t even begun to imagine yet. We created a horizontal row of tabs in this example, but Sliding Doors could be used in a many other situations. What can you do with it?

About the Author

Douglas Bowman

Founder and principal of Stopdesign, Douglas Bowman specializes in simple, clean, forward-thinking design. He constantly challenges and pushes the limits of what’s possible using web standards. Douglas was the grand architect behind the well-known redesign of Wired.

131 Reader Comments

  1. EXCELLENT! This is so good I plan to use it both to “sell” standards in our group and as a training exercise. ALA is back with avengence!

    Now for the bugs. The images change names about half way through the article, dropping the “norm_”. Also, not really a bug but it would be nice if you made the transparent versions of the images available the way you did the originals near the top.

  2. …that the paucity of recent CSS innovation as mentioned in the article — Mr Shea‘s CSS Zen Garden being a notable exception — has been due in part to ALA’s absence on the web. Anybody else miss it?

    Great article, and welcome back!

  3. Many thanks, Doug. Does this have anything to do with the Apple project? 😉

    You’ve elegantly solved something that has been driving me nuts lately. Thanks to you and ALA, as always for articles like this, which will surely contribute greatly to the standards community. Keep pushin’.

  4. Doug, you’ve managed to put into well refined code what has been flaoting around in my head for a while — but there was NO WAY I would have been able to churn out such a tidy & refined block of code. I am truely inspired as always.

  6. Every time you think that you are producing decent work and making headway something like this article comes along and humbles you in a most delightful way.

    The code is succinct, well written and forward thinking. Brilliant work.

    The best part of all of this is people like Douglas Bowman willing to share the genius of this work and people like Jeffery Zeldman creating this site as a resource. I know this article will help many is pushing the envelope of what’s possible.

    Thanks much and cheers.

  7. The article shows superb attention to detail, but IMHO, at times takes it too far with the pixel-perfectness, bogging it down a bit.

    One thing it fails to address is hovering states (beyond text formatting). Because the images are split into two elements, to change them you must set the background of li:hover as well as a:hover. And what’s the problem with using li:hover?

  10. This is marvellous stuff. It’s great to see CSS slowly come of age with techniques like this, that can move us away from the flat colours and single pixel borders that were once embraced wholeheartedly but now bore us to death.

    All power to Doug’s generous CSS elbow.

  11. im working on this project using a design that for the time is close to another site the customer likes (it will change) i am using a single page to deliver reports which are accessed using display:block/none to hide the elements and wondered if anyone would give me a hand applying the Alist method into this design?

  12. Well worth the wait for the new ALA. Simply amazing. Great stuff, and you can be rest assured, I will be stealing that CSS. =)

  15. Hooray!

    I am glad ALA is back. Great beginnings and congrats to all.

    Another fine example of some of the hardest working ppl in the community.

    Now… if we could just get the browser(s) (IE!!) vendors to get CSS nailed so the hacks wouldn’t be necessary.

  19. In Apple’s Safari, the new tabs don’t appear. At all–there’s simply a blank space where the tabs are supposed to be. This is too bad, because this seems like a great technique–I wouldn’t have minded a minor cosmetic problem, but having it go totally invisible makes this a no-go for me: that’s not particularly accessible.

  20. Anyone else missing the example image at the top of the article?

    I am, both on Zeldman and on ALA. A right click revealed it so it is there…

    Using Safari on Mac OS 10.2.6

  21. Nice work again Doug!

    As usual – moving the boundaries forward, and thanks for sharing! We use a sort of ‘half’ version for the nav on our site, but you’ve taken this to something really cool (that final example is really nice).

  22. Nice article and technique but in Win IE 6 the tab backgrounds flash while mousing over. Looks nice and works as intended in Mozilla for me though.

  23. This is a great article – well explained in great style by Douglas. :->

    But…
    a more philosophical issue about tabs – are tabs a good User Interface Metaphor?

    Their real use is in A4 ring binders in a paper-based meme and what they say is that they are card section dividers with more paper underneath.

    In the web world they are dividers but there is nothing underneath – the information is on separate pages!

    I just wonder if the recent popularity of tabs as a navigation method isn’t just a metaphor too far?

    BTW this isn’t a rant – I am interested in people’s views

    regards
    Richard

  24. This is summat i myself have been messing with for a while, but how u have explained it will bring it to all the CSS starters which is great!

    The less we rely on javaScript for Image roll overs and stuff like that the better!

    Love the new design by the way and its great to have you all back 😀

  25. I get the flashing in IE 5.5 too.

    Just playing the devil’s advocate here, but if we used the standard method of displaying tabs (i.e. using only images) then won’t screen readers read out the alt tags on the images? How is the sliding doors technique better for accessibility?

    Love the technique and will look to using it but wanted to ask the question for the benefit of others who may be thinking the same.

  26. The possibilities of rich interfaces created with css is becoming much more of a reality due to articles like this one.

    At our company, tabs are feared due to the either horrendous markup required to get something decent (tables, eeek!) or the flat nature of css tabs (until now!).

    I’m not only humbled but truly enlightened that the possibilities of rich css design are still in the very early stages. It just takes people like Doug to figure them out.

  27. Great look; I am grateful it turned out different to the pinkified “coming-soon” teaser. 😉

    Richard Earney > What do you propose the “tabs” should be called? I won’t go so far to say that “tab” is a standard name, but it seems to be used with a good deal of regularity, from preference-pages in desktop-applications to the technique described in this article.

    Semantically speaking I guess a more correct name would be an “unordered-list of anchors,” but it’s a bit of a mouthful. Maby a “list of links?” A “LOL?” 😉

  28. Ray (from the very first comment): the images change names at the point I switch from opaque-corner images to transparent images. In other words, “norm_right.gif” is the opaque version, “right.gif” is the new transparent version. All (8) images are available in the same directory.

    The “flashing” in IE/Win browsers is most likely due to the fact that you’ve turned off caching in preferences. Even without “a:hover” rules, IE has trouble holding a background image steady on anchors if you’ve specified “Every visit to the page” for temporary files.

    The latest versions of Safari, Mozilla, and Firebird *should not* have any problems with rendering any of these examples, according to all the browsers we’ve seen.

    I intentionally don’t cover any philosophical or usability issues related to the use of tabs, so that the article stays focused on a technique for an already widely popular interface metaphor. Whether tabs are appropriate for any site is up to the team or individual responsible for that site.

    There are a few variations of the technique I didn’t cover, for the sake of keeping the article as short as possible. Like using a unique ID for each list item, then another on the body element to pinpoint the current tab, instead of moving around id=”current” from one list item to another. More complex image-changing rollovers would be possible with the same markup by using li:hover and a:hover to affect the background images too. But be wary of the fact that IE/Win currently does not support the :hover pseudo-class on any element other than an anchor.

    Thanks for the feedback so far. Keep it coming.

  29. been looking for a reason to redesign some stuff and this article might well be the daddy.

    fantastic looking site and excellent articles – as usual!

  30. Great article that shows there is no limits to what can be done with CSS. I would say that CSS is just starting to break into main stream.

    I enjoyed the detailed outline of the article.
    One thought is how would you be able to use something like pixy’s rollover effect for tabs like these in the article

  33. This is a great article, I can’t wait to see what can be done based on this article. I am going to start right away on some mods.

  34. I was looking or thinking about stuff on this line – and now you’ve done the work for me! thanks! (huge fan btw)

    Other than the nuisance flicker, the technique works very well. Now if only it could be done with svg….

    Welcome back ALA, missed you. Keep up the good work.

  36. Thanks for this fine article, Doug. It’s refreshing to see such a detail-oriented process outlined so thoroughly. Particularly beneficial was your explanation of the bottom border technique, a style I’ve struggled with on several occasions.

  37. Great article, Doug. Very thorough and detailed. I’m looking to create a similar effect (rounded corners) using header tags for articles. Does anyone know of a thorough guide on such an undertaking? I’ve been unsuccessful so far.

    Great to see ALA back with such relevant content!

  38. Is humblingly a word? It should be. This article had me shaking my head at every step. I’ve been using CSS to design navigation for years, and never once thought of this brilliant idea. Not even close. It’s the perfect answer to those who think pure CSS design always leads to a flat, boxy look. I had run out of demonstratable arguments. Welcome back ALA >>

  39. Douglas – You are correct. Switching IE to not check the page for newer content every time removed the image flicker problem. Thanks for a great article.

  40. People generally try to click anywhere on the tab, not just the text. And without the underline, that makes it less obvious.

  42. This is great! really it is awesome but it doesn’t work in Internet Explorer 6 what is the point of using it? you can’t start designing for Mozilla cause not enough people use it.

    Everytime I put my mouse over the tab the image disappears and leaves only the text. Works fine in Mozilla. Am I missing something because no one else mentioned this? Dang IE!

    Congrats to the new A List apart, awesome stuff!

  43. Kudos and thanks for a great article, and welcome back, ala.

    Look forward to more stretching of CSS to the limits and beyond, such as some of the things that Eric Meyer ( http://www.meyerweb.com/ ) does with negative-value margins.

    I’m sure it’s already in the works.

  44. Doug, once again you not only provide an easy-to-understand tutorial on an advanced design/CSS subject, but your solution is elegant and stylish.

    CSS designs don’t have to look like stacked blocks to work (not that I have anything but positive things to say about the blocky new ALA design 😉

  45. This is great; simpler and more elegant than my current solution.

    The :hover image replacement problem in IE/Win can be solved – thou not too elegant – by nesting a span inside the anchor, and moveing the images in one tag-level.

    Example at: http://www.tjhm.dk/ala_tabs.html

    I don’t see any problems in combining the images and using the pixy rollover methode (I’ll propably try it out soon).

    Oh, and nice to have ALA back!

  46. Great stuff – it’s really nice to follow through the intricacies of the approach – a great way to learn. I have a question/challenge though, and I hope it’s not a stupid question. How can you center the tabs on the page (i.e. like http://www.apple.com).

  47. It’s great to find a site that cares about making standards work.

    Nice contribution by [url=http://www.alistapart.com/discuss/slidingdoors/5/#c5167]Tobias[/url] for the IE fix 😉

  48. I have used a similar method but cheated on the selected tab.
    I nudged the tab down a pixel by using position:relative; top: 1px;.
    Yes it is cheap and I feel unclean — but it worked.

  49. They look really nice, but as I think Berto has already pointed out, not only is the left side of the tab dead in IE6/Win, but also the right side, the top side, and the bottom side too — everything but the text itself, which tangibly (mouse-wise) destroys the visual image of a clickable tab area.

    In NS7/Win only the left side’s dead, so am guessing you may’ve done most of this in Mozilla without testing it in IE6.

    Anyway, whether it’s a usability problem or not may be another issue, but don’t you want to also mention in the article the defects in IE6/Win as well as those for IE5/Mac and NS/Mozilla? Or is it totally *uncool* now to still be developing, testing, and using such a popular browser as IE6/Win??

  50. I just received SitePoint’s
    HTML Utopia – Designing without tables.
    http://www.sitepoint.com/books/css1 ~excellent!!!

    I’m really impressed with the new mentality
    of the web dev community. Semantic Code is something I’ve been trying to accomplish on my own for the past year. These tutorials along with the afore mentioned book have gotten me there in two days.

    My Client is Stoked cause I got stoked, he’s given me a whole WEEK(urgh) to convert over to a pure CSS SEO site.

    Zeldman you Rock!
    Dan Shafer you Rock!
    Douglas Bowman you Rock!
    Me- I’m stoked!

  52. First off I’d like to say what a brilliant article this is.

    Secondly, how would it be possible to adapt this to make scalable content holders. So, you’d have lovely rounded cornered boxes to hold text etc. How would you go about adding a rounded bottom to each tab?

    Keep up the great work,

    Frank.

  53. Simple, elegant and really amazing. This article presents a great solution for good looking graphical tabs only through smart exploring of HTML and CSS features. Congratulations, Doug!

  54. Having ‘every visit to the page’ selected in IE really is a showstopper.. i’m wondering if the default setting is ‘never’?

  55. This is exactly what I have spent all of today trying to get to work. Until reading this article, I couldn’t tie it all together. I should’ve just played with iPod more and read this article.

    I missed you ALA.

  56. Dear Doug,
    did you notice what a strange behaviour IE6 produces when you “hover” the tabs?

    Sort of border “flickering”?

    Other browsers are OK, but IE6 seems to render not properly… any suggestion?

    And BTW, welcome back guys 😉

  57. Welcome back ALA. With an article like this that so well explains it’s topic reflects on the competency of the author and the high standard of A List Apart. Well done Doug and ALA.

  58. Thanks, I have been working on the exact same thing but this is much cleaner.

    The only problem is the cursed IE bug that forces a reload of background images every time you mouseOver it!!???

    There are several ‘hacks’ out there that claim to fix it but nothing works. Whoever figures this one out is the smartest kid on the block!

  59. Hi,

    I´ ve been playing around with this “sliding doors” – technique a few weeks ago. I stopped it because it doesn`t really work on Mac IE 5 – thanks for your solution.

    But in Mac IE 5.0 there’s still a bug left – here’s a screenshot:

    <http://www.webdebug.de/test/SlidingDoors_MacIE50.png>

    Does anybody have a solution for this problem?

    greets,
    E.

    * Maybe my english is horrible. I’m sorry for that.

  60. Hi,

    I´ ve been playing around with this “sliding doors” – technique a few weeks ago. I stopped it because it doesn`t really work on Mac IE 5 – thanks for your solution.

    But in Mac IE 5.0 there’s still a bug left – here’s a screenshot:

    <http://www.webdebug.de/test/SlidingDoors_MacIE50.png>

    Does anybody have a solution for this problem?

    greets,
    E.

    * Maybe my english is horrible. I’m sorry for that.

  61. I get a flicker that occurs, where the background of the right side of the tab flickers as I enter the link, once I am hovered it works fine.

    This occurs in IE 6.0 on Win2k, and in examples 3 and on. In example 3, the left portion of the tab flickers, and in example 4 the right portion flickers. Obviously which one flickers is according to the layering.

    Very good article!

    Anyone else get this?

    p.s. of course it works fine in mozilla

  62. Truly a great article! I knew that background images could be used for e.g. rounded corners this way, and I suspected that more advanced things could be done with proper backgrounds, but I never dared hope it could look as great as examples 2+3 and still scale so perfectly.

    Paul Nattress ( http://www.alistapart.com/discuss/slidingdoors/3/#c5117 ) wrote:

    “Just playing the devil’s advocate here, but if we used the standard method of displaying tabs (i.e. using only images) then won’t screen readers read out the alt tags on the images? How is the sliding doors technique better for accessibility?”

    The text can be scaled. (A minor point is also that it downloads faster.) Accessibility isn’t just about screen readers.

    Another benefit is that tabs can be added and changed with a few keystrokes in a text editor; no need for e.g. Photoshop to be used, or even installed on the machine you’re updating from.

  63. The image flikering in IE6 only happens if you have the ‘check for newer versions of stored pages’ (Internet Properties/General/Tempoary Internet files/Settings) set to ‘Every visit to the page’. This is not the default (the default is ‘Auto’). But as web designers want to always see the newest version with out the cashed version getting in the way we all usually set it to this. (to reduce the likelyhood of seeing the cashed page just reduce the ‘Tempoary Internet files folder to a tiny size (I have mine at 1MB).

  65. Thanks so much for making this available. It’s tres’ cool.

    The version 2 style sheet will validate if you add an “s” to “San-Serif” to make “Sans-serif”. Sorry, I don’t mean to detract from a great article.

    Thank you again!

  66. Excellent article. I think the display problem with IE5/Mac (the one fixed in the article, not the one in Eckhard’s comment) comes about because you’re trying to do something that isn’t intended to be possible in CSS2.

    Section 9.5 of the CSS2 spec says that a non-replaced floating element (ie one that isn’t an image or object or something else with an intrinsic width) must have an explicit width. Section 10.3.5 says that if a non-replaced floating element has auto width specified, its computed width should be zero. So interpreting the spec strictly I think this means the tabs should disappear completely.

    However most browsers have decided on a ‘shrink to fit’ approach instead, which seems more useful. This has made it into the CSS 2.1 working draft, where section 10.3.5 describes how the shrink to fit width is calculated.

    Does this mean you should feel slightly impure and non-standards-compliant for using this technique? I guess it depends if you’re willing to be a bit pragmatic about it and accept that the behaviour you’re relying on is widespread enough to have made it into CSS 2.1. But if you want to be ultra-standards-compliant you should probably specify a width, maybe in ems if you want it to resize nicely.

  67. Thank you for this excellent and insightful article (and what a comeback of ALA. The Eagles are nothing compared to it 😉 ).

    All the way through the article I was not thinking of tabs, but of all the other sliding doors that can be used for the flexible width content, and for that I think the “Bowman Sliding Doors” is going to be a significant one.

  68. I’ve been working on this for some time now, in an efford to replace my standard grey tabs with some eye-candy tabs.

    Thanks for sharing and congrats on the new issue of ALA.

  69. In the interest of throwing out other “innovations”: I implemented a similar, though not as glorious, method in adding a vertical slant to the left of the links “contact | directions | site map | home” at http://www.bigaustin.org. Demonstrates the variety of outcomes from this method, not just tabs. As I was reading, I asked myself “what about IE5/Mac?” and lo-and-behold, you encountered the same issue as I did =). Good work, much cleaner and truly more innovative than my humble slanted line.

  70. Andy Smith: First, let’s make sure we’re clear… there is no problem with this technique in IE5/Mac in general. 5.1 and 5.2 render it flawlessly. It’s IE5.0/Mac which can’t handle multiple nested floats very well. As I stated in the article, the upgrade to 5.1 fixes the many float bugs that existed in 5.0. The amount of people still using IE5.0/Mac is being pinched off to almost nothing as the 5.1 upgrade has been around forever, more people switch from OS9 to OSX, and Safari shifts into dominance on the Mac.

    Since the CSS 2.1 Working Draft makes corrections and clarifications to the many errors and vague statements from the original CSS2 Specification, no, I don’t think there is a problem with omitting explicit widths for floated list items. In fact, specifying a width would defeat the purpose of allowing the tabs to expand dynamically with the text inside, no matter what it is, or how often it’s changed or resized.

    Even if widths were specified in “ems”, since most designs don’t deal with monospaced fonts, widths of the tabs and the text inside them might not match up well, especially once the text is resized. Not to mention, every time you changed the text or added a new tab, you’d need to go back to the CSS repeatedly to modify specified widths.

  71. i don’t think you need to worry douglas — because you can use:

    width: auto;

    for things without intrinsic width (like floats). that should size things appropriately (i think).

    i’m rather more concerned about what this (wonderful) css tabs technique does to the semantics of a stylesheet — since it’s making them harder to read/decipher. i suppose we’ll all be in for a serious tidyup come css3 borders:

    http://www.w3.org/TR/css3-border/

    – p

  72. I found it easier to understand the markup than all that wordy stuff that led up to it. I also think the illustrations in the first quarter of the article would have benefitted from the use of an additional color to denote which layer is doing the overlapping.

    Regardless, it’s nice to see ALA again.

  74. Arse!

    There was me getting ready to show off a similar trick on a site in about a month’s time.

    The design’s been held up in committee for about 6 weeks, but an id stripped demo is at

    http://homepage.mac.com/sboyle/demo/rollovers.html

    It suffers from an excessive

  75. and flickers on Safari at the overlap point where both links are in a hover state, and hasn’t been tested on IE 5 Windows yet.

    Nicely done.

  76. I’d been following all sorts of nice tabs based on unordered lists on the listomatic site recently, but this totally takes the cake. Doug, you’ve created some excellent tabs here. Congratulations. And welcome back ALA!

  77. In the article the display:block is set on the anchor element and not on the list element.

    If display:block is set on the list element and not on the anchor element IE5/Mac (the latest free version at least) does not stack the tabs vertically, but horizontally and in all other browsers it works as well. The IE5/Mac hack is not necessary then (I use the sams approach of floating list items for my website, so I experimented a little).

    Is there any objection to this approach?

  78. You can highlight the active tab without using the seperate .active class. There is a way to keep your markup the same on every indiv. page.

    [plug]See my website for information[/plug]

  79. That was BEEEEUUUUTIFUL…I am going to use it on a project I am working on…my previous solution was clunky but this is clean….thank you!!!

    BK

  81. Amazing tutorial. Only one problem… is there a way to re-work this technique to allow for a centered tab system? The float:left really makes it hard to center this if you like having your menu at 100% width and centered.

    Any thoughts on a solution? Thanks!

  82. Very nice article, explains very well the possibilities of using mutiple background images, in a “layered” kind of way. Well done!

  83. Interesting article, without a doubt, but it seems to ignore IE6 — why’s that?

    And there’s no mention that only the text is clickable in IE6 (not rest of the tab). Is there a fix for this? Most of the tabs I see people using, both image-based and CSS ones make the whole image area interactive.

  84. i’m happy to let IE6 users go through the ever so slightly steep learning curve required to click on the link rather than the tab.

    this is fine because the site i am using this on is a personal one, but in a business environment this may be a factor that would have to be seriously thought over.

    other than that, an excellent piece of coding.

    welcome back ala!

    oh btw nice hack from Tobias for rollovers. i’ve used it 🙂

  85. This has achived an effect that i was trying to achive myself and got wrong in oh so many small ways.
    Its a lovely pice of work

    My own attempts sucumbed to horrible nasty hacks and gettarounds.

    This if very nice and much more tidy than my own implementation.

    Thank you its great to find such helpfull articles.

  86. I’m a 19 italian student and I love CSS design. This article is really cool ’cause now I’ve got new tools for my design.

    Bye bye from Piero, Italy.

  87. <>

    After getting two new computers in the same week, I can report that the default setting for IE6 in WinXP is “Automatically” — which produces no flicker.

    Only Web developers, motivated by the lust to view their latest changes, would think to change this setting to break the cached behavior.

  89. I’m so happy to have A List A Part back. Articles like this make many of us wish we could “:hover” over your shoulders for a day — gleaming as much as we could. Thanks for all you offer.

  90. I also had that problem. For me it works fine when using a title-tag for the links. Problem fixed. 🙂

  92. Have tried in IE6, Firebird 0.7 and Opera 7 and I could not get images for the tabs, except for version 1 in Opera 7, which gives me the inactive tabs fine, but the active tab is not complete. Confused since everyone else says this rocks, and it sounds great….update – just refreshed my firebird and now it gives a working version 1, but still with broken active tab. You must be working on it…will check back. Cheers.

  93. I’m with everyone else in heaping praise on this article and technique, I just want to ask a question though about the behaviour of the tabs when the window width is less than the total width of all five tabs.

    Using both IE6 and Firebird 0.61, examples 1 and 2 in the article make the tabs line up to the left, so if the window is only wide enough to fit in the Home, News and Products tab then the About and Contact tabs are aligned to the left on the next line. With examples 3 onwards the About tab displays directly below the Products tab and the Contact tab displays on a third line.

    This isn’t so much a criticism as just an enquiry as to why this happens. I don’t know enough about CSS to work it out for myself unfortunately.

  95. dear people, tabs are so last millenium. CSS is a silly hack. Don’t use tables because they are obsolete (as if the browser will EVER stop recognizing tables. wake up!), yet use an UGLY hack to make this stuff work. Extraordinary.

  96. to sandro:

    If tabs are the right interface that is a great discussion. I don’t know if they are soooo last millenium, but I’m not convinced I like them either.

    But saying CSS is nothing but an ugly hack and tables the best layout medium means either you are trolling around here (in which case your post better be deleted) or you show an extraordinary ignorance that is exemplarary of too many webguys who know one little trick and think that’s the ultimate way of working. Read http://www.macromedia.com/newsletters/edge/october2003/index.html?sectionIndex=1&trackingid=OMN_AAJT to start with.

  97. to martijn:

    css is often hacked. the css in this example has a very prominent hack. other examples have other hacks. if you want to call that a troll, well…

    tables are the best layout medium. they are easy and known and automatically reflow. they will never disappear, you can quote me on that. they should be part of the standard, and any body that seeks to destroy something that is known and useful simply to conform to an abstraction like ‘standards’ is someone not to be trusted. which is most likely to happen? css hacks suddenly fail one day on a new browser release? tables stop being supported, thereby neutering, guessing, 10 billion websites or so? i wonder why amazon continues to use tables for their tabs. must be one trick ponies.

    You can go to uspto.gov and do a search for sandro pasquali. read through my patents. You will see in my work a commitment to advanced dynamism in websites.

    It is amazing that you send be to a 300 k flash file so i can read a 3 column layout (hint: everyone knows that’s the wrong way to present text on the web) that celebrates css. there’s so much humor there i’ll just leave it for posterity.

    look, knock yourself out. use css if you like. i often use it for setting fonts and so on. but i offer that there is more power is learning javascript and manipulating the dom directly, via attributes, and even more power if you have the knowledge and desire to build XUL-ish layout manifests and have those parsed by a javascript-driven xml/http loader and local parser. you see, this lets you write functions that determine style attributes based on modal concerns, instead of dumb css templates that, let’s hope!, get attached to the right documents. if you never want to progress beyond being a blog styler, stay with css. it’s easy and fun.

  99. To those people who earlier inquired about centering the tabs: I can’t think of a way to do it without putting a wrapper

    around the entire block of Doug Bowman’s HTML code, and without specifying an exact width for at least one of the

    ‘s involved. If I’m wrong, someone please correct me; I’d really like there to be a simpler way to do this using CSS.

    The HTML would look something like

    And the CSS would be something like

    #header-outerwrap {
    text-align:center;
    }

    #header-innerwrap {
    margin:0 auto 0 auto;
    text-align:left;
    text-align:center;
    width:XXXpx;
    }

    #header {
    /*Bowman’s styles */
    }

    Two wrapper

    ‘s are needed because
    1. The original header

    has been
    left-floated, and therefore needs at least
    one containing

    to which centering can
    be applied.
    2. IE/Win 5.X has a bug that causes elements
    with left and right margins of “auto” to
    not display as centered. To work around
    this, an extra div is needed…this
    centering hack is explained elsewhere
    online; do a google search if you don’t
    know it already.

    I have only tested the above code in IE6/Win2K and FB0.7/Win2K; it works fine on both.

  100. Note that this technique doesn’t center the actual tabs; instead, it centers the div that the tabs are in. I haven’t figured out how to center the tabs themselves; since they are left-floated, center-alignment is problematic.

  102. I have read the number of great responses to this article, but for some reason I am not having the same luck. for some reason the CCS code below does not render so that the current tab is diplayed with both rounded edges.
    #header #current {
    background-image:url(‘images/norm_right_on.gif’);
    }
    #header #current a {
    background-image:url(‘images/norm_left_on.gif’);
    }

    If I change it so that the CSS is:
    #header #current {
    background:url(‘images/norm_right_on.gif’) no-repeat right top;
    }
    #header #current a {
    background:url(‘images/norm_left_on.gif’) no-repeat left top;
    the right side is rounded but not the left. Anything to help out!
    }

  103. > Clicking the whole tab… | martin:

    > It would be fine to click the whole tab not
    > just the text link.

    2nd that.

    Unfortunately, there still seems to be this strong trend among Web Standards Evangelists and Devs to ignore popular browsers — to focus their efforts on browsers with cooler names and OSes like Zeldzilla, Macintush, Firequeror, Funix, Surfari, Limex, etc. Browsers with old-school, pedestrian names like Internet Explorer and Netscape Navigator (sheesh, how could they come up with anything more lame than those???) are pretty much ignored when they’re running on something as sad as Windows 2000 (three years out of date, to be sure!) or XP (NT clone? outta here! 😛 ).

    Screen readers are cool though. Just ask your 95% lame-o user base that’s still doggedly using IE5/6 for Win to go poke their eyes out and learn Braille. That’s the way to do it. Chix fer free! You might even get on MTV…

  104. Thank you so much Mr. Bowman (and ALA) for shedding some light onto an issue that I have worked on (without much success) for some years now. I have always loved the power of CSS and its’ ability to separate design from content, but there were definitely some roadblocks when using it to try something of this nature.

    Thank you again for sharing your discovery. I was so proud of myself when I discovered how to use CSS to display a list inline. Now, I am truly humbled… 🙂

    p.s. It is good to see you back in action ALA! I have sorely missed you all this time.

  105. I tried using these tabs with (my first!) dw mx database driven site: the tab texts and page contents are all pulled from a flat database. Looks great, works too. (got php to drive the span tag too.)

    Now trying second level menu: this is where the ‘tab’ metaphor really breaks down of course.

    So for the second level menu: how to get the top level menu to stay in the selected state? A little database-puzzle.

  106. The unclickable part on the left of the tab can become clickable an alternate way.
    Leave everything the way it was just before the “Finishing Touches” section.

    Now add a “margin-right: 3px;” to the “#header li” style and a counter “margin-left: -3px;” to the “#header a” style.

    i.e.

    #header li {
    float: left;
    background: url(“right.gif”) no-repeat top right;
    margin-right: 3px;
    padding: 0;
    }

    #header a {
    display: block;
    background: url(“left.gif”) no-repeat top left;
    padding: 5px 15px 4px;
    margin-left: -3px;
    }

    Unfortunately works only in Opera (at least v7).
    Don’t know if it works with IE/Mac

  107. See Sliding Doors of CSS II, published 30 October in Issue 161, for IE-oriented workarounds, rollovers, and more:

    http://www.alistapart.com/articles/slidingdoors2/

    These Sliding Doors extensions, exceptions, and workarounds were omitted from the initial article to keep the focus on the concept and execution of this new CSS design method. The initial article was complex enough! Additional complexities, we felt, belonged in a follow-up article, and we are happy to now publish that follow-up.

  108. Call me an idiot, but I can’t seem to get the “right.gif” image. I suppose I could make my own, but was trying to get your example to work first, before I tried anything else. Can you send or provide a location?

  110. Last night I was lying in bed thinking, “I wish CSS gave me a way to put one image in the upper right corner of a link and a different one in the upper left corner…”

    Today I discover that it does! Thanks for a brilliant demo.

  111. I get the flickering behavior on IE6 on win2k regardless of my browsers cache setting (ie “Check for new version of page” on Auto).

    In fact, that setting doesn’t seem to have any effect at all on this computer (e.g. there seems to be no cache-ing). It seems like rollovers, etc always reload when moused over, etc. This results in slightly less responsive rollovers and is annoying.

    Anyone else notice this lack of cacheing on IE6 on win2k?

  113. Great technique, but I have experienced some problems positioning the tabs. When using absolute positioning, this can work in Mozilla/IE , but Opera 6(win) has problems. Relative positioning works in Opera, but this dies a sad death in IE.

    If anyone has perfected positioning the 2 floats , I would be very grateful for a few pointers!!

  114. For some reason, when I open my page in netscape, it doesn’t break between the final and the procedding code.

    That tabs are there and working fine, but then my stuff is to the right of them, as opposed to under them.

  115. I am having a problem with a site, http://www.wfmuziek.nl, which seems to be caused by the same thing as the IE/Mac CSS rendering problem.

    I don’t have a Mac to test on, but a Mac sent me a screenshot… there’s a huge gap where the content div should be, and you have to scroll all the way to the right to see the content.

    Is there a Mac user who wants to take a look at the site’s CSS and suggest what might be causing this?

  117. For those of you looking for more positioning control (i.e. centering your tabs, etc), don’t forget that this technique can be easily adapted to a table-based layout. Simply style the

    tag instead of the

  118. .

    I know it’s not perfect, but if your business/design requirements make a CSS-based layout impractical, it’s a nice compromise.

  119. I implemented tabs similar to these, but the background images kept flickering in IE6. After much head-scratching, I copied your example verbatim up to my web server, and the problem still occured. It turns out that IE6 won’t cache images when the web server sends them gzipped (which Apache often does). Since your sliding doors are hosted on IIS which doesn’t use gzip content-encoding, there is no problem for you.

  120. In my previous post I mentioned the IE6 content-type:gzip bug. If you’re on a Linux/Apache system that uses mod_gzip, you’ll need to disable it to avoid constant image reloads in IE6. My host is crediblehost.com, and I created this .htaccess file at my public_html root:


    mod_gzip_on no

    Which did the trick.

  123. Hi,
    The article is wonderful and I implemented this in my current project. One of my screens has lot of tabs and they wrap around to the next line. I am using this inside one of the frames. The frame doesn’t have the scrolling=”no” , so how to make the tabs without wrapping to the next line.

    thanks in advance,
    Krishna

  124. Excellent article, and it gave me an idea.

    What if you have one DIV container that is transparent (DIV1), and inside that DIV is another DIV (DIV2) that is colored, and has the link text in it. DIV2 is centered horizontally and vertically in DIV1.

    Now, use your sliding doors technique, but instead of a regular graphic, you create a graphic that has the rounded-edge look that fades to transparency. The region between the inside edge of DIV2 and the outside edge of DIV1 would be filled with the graphic, which would fade to transparency at the junction between DIV1 and DIV2.

    What does this accomplish? Well, you have the rounded ‘graphic’ look, but you can change the color of DIV2. Hence, you can use CSS to change the color of the ‘button’ (DIV2) at will, and since DIV1 is transparent, you won’t see the little corners of color at the outside corners of DIV1, where the graphic is transparent.

  125. This is really awesome! Didn’t know this was all possible with ‘simple’ CSS.
    You really showed me the power of CSS. I’m convinced more than ever about the capabilities of CSS.

    Thanks for this great example!

    Rgds,

    Geert

  126. Yesterday, I reported Japanese character wrapping within a tab.
    After that I noticed that the same symptom happens for alphabetic words.
    For verification, I changed tab wording from single word to two words, such as New York, New Jersy, and so on.
    If you make browser’s width narrower ‘New’ and ‘York’ are formatted in two lines.

    I prefer to have a fix for this issue.

  128. This was a wonderful article and I love the technique used here. It has made my work so much easier. I have tried using the same technique with a vertical menu but without much success. Has anyone out there accomplished this?

  130. Please excuse my total ignorance.

    I’m redesigning an old table-based page with a lot of tabs along the top (ie “news | gallery | store | contact” etc). Since this navbar is a repeating element that gets reused in plenty of pages, what’s the best strategy for structuring the site? My current options seem to be:

    1) paste in the tab markup by hand into each page

    2) use a SSI to reference a “nav.shtml” file
    (pro: if i use this method I can script nav.shtml so the current page’s tab is highlighted or “greyed out”
    con: the scripted “nav.shtml” is pretty hefty)

    3) use the tag to reference “nav.html”
    (do other designers use this tag a lot?)

    I just want to have tabs that I can easily update 6 months from now without editing a million html pages.

  131. Hi,
    great css…I had one problem though..I couldn’t get the little white corners to disappear….: ( I followed along everything was going great..I added the css to my file ..to remove them….but they remained ….I use IE 6 I dunno if that matters ….other than that it worked Great …Im sure it’s probably something I’ve overlooked….but I tried 3 times & I’m stumped…any help would be great…Thanks

  132. Thank you Doug for sharing this great idea with us. These tabs are fantastic and so useful!

    One minor note: Netscape 6 on the Mac has a problem with the #header containing div collapsing rather than containing the floats. The result is the background image does not appear behind the floated links. I think it may be because unlike most browsers, NN6mac doesn’t follow the CSS 2.1 specs on expanding to contain child floats. (It still follows the older CSS2.0 specs). And so, the only solution I could think of would be to put a clearing div in the html as the last element in the #header div. This of course adds clutter to the html code and is therefore probably not worth it, given the few percentage of people using Netscape 6 on the Mac.

    Has anyone else noticed this too?

    I noticed this issue in Netscape 6.2.3 on a Mac running OS9.

    Nice work Doug!

  133. This is really a cool feature and I was about to use it on the redesign of our new corporate site until I tested it in NS 4.7. Unfortunately our web stats show people still hitting our site with this dinosaur so we have to build for it. It’s completely broken, totally unusable in NS. Bummer 🙁

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA