Dynamic Page Tabs in IE6

While working to ensure that the Onehub experience was of the best possible quality for our Internet Explorer 6 users, I ran in to a unique challenge: we have page tabs that need to be completely flexible. I had no guarantee that they would be a certain width, height, or even how many tabs there would be.

Anyone who has worked with IE6 for long enough will know what a headache scenario that can be, but I needed to make sure that these tabs were as usable in IE6 as they were in any other browser. After doing no small amount of research, I realized that very few people have written about how they have solved this problem; in fact, I found very few examples of tabs that were as complex as ours were. So, I had to solve the problem for myself, and this is what I did.

Note: You can see this code in action on the demo page.

Laying the Foundation

The HTML

To build the tabs that we use in our Hubs, we use an unordered list, with each list item containing a link

<li>
  <h2>
    <a class="page" href="#">
      <span>Files</span>
    </a>
  </h2>
</li>

To make designing new themes easier, and to add some flexibility to the tabs, the links are wrapped in an H2 (though any block level element would work), and each link’s text is wrapped in a span. While this does add a bit of bloat to the code, it also makes the tab a much more extensible object.

Standards-based CSS

The approach that we used to get our tabs to display properly was to float the list items, removing all default margins/padding. We set up the list and list items to be wrappers for the links. The design of the tab is applied to the anchor (a) and span tags that live within the list item.

It actually doesn’t take a lot of code to get this to work properly, but a little bit of planning ahead can save some trouble in the long run.

.pages ul {
  list-style-type: none;
  overflow: hidden; /* Float clearing for good browsers */
}

.pages ul li {
  float: left;
  position: relative;
}

.pages ul li a.page {
  display: block;
}

Now, to make it all work in IE6

There are multiple hurdles that need to be overcome in order to make this work properly. Not only are there the normal issues with floated elements, but there’s the added issue of the tabs being both floated and dynamic.

Standard IE6 Tab Hacks

To start off, I applied a few common IE hacks to the tabs. Before anything else, I set to the width of my containing div (.pages) to 100%. I didn’t do this in my main stylesheet because the only browser that needs this is IE6, since all that does is clear our floats.

Then I apply the Holly Hack (setting the height of an object to 1% in order to get a background color/image to display across the entirety of that object). This gets applied to the containing ul, while the li elements have both a width and height of 1% applied to them. Although this serves to help ensure that IE won’t do anything weird to our floats, I’m actually not using the width to make sure that the floats occur like we would expect.

My goals here are simple: first off, I want to make sure that any background that gets applied to the tabs wraps all the way around the contained elements. More importantly though, this prevents blow outs. Later on I’m going to apply some rules to the anchor and span tags that will cause all sorts of problems if we don’t prevent it beforehand.

Keeping My Ducks in a Row

To make sure that my text doesn’t wrap, I apply white-space: nowrap to the li. Rarely do you want your text to wrap when laying out tabs, since that will force the height of the tab to become inconsistent.

However, by setting a width of 1% on the li, you can expect to see your text wrap. By telling the browser not to wrap that text, you can maintain the integrity of your design.

.pages {
  width: 100%;
}

.pages ul {
  height: 1%;
}

.pages ul li {
  height: 1%;
  width: 1%;
  white-space:nowrap;
}

So now that our wrappers are behaving properly, and will prevent unsightly blow outs, let’s move on to the final piece: the links.

Highly Interactive Anchor Tabs

One of the things that I needed to do in this situation was to set height and width of the anchor to 100% in addition to declaring the anchor tag as a block element (remember that blow out that I was talking about? This is the first place that will happen). This tells IE6 that any padding that is applied to the link (so, the background of the tab) is to be a link, not just the text.

.pages ul li a.page {
  width: 100%;
  height: 100%;
}

Adding in some Fine Grained Control

Our tabs also have a secondary state when the Hub is put in to Design Mode, where the user can fully customize their Hub. This mode affects the tabs in that some of the design changes, but also there are two more anchor tags added in, as well as a background image (and some javascript) to make the tabs fully editable.

Finally, we can focus on the span tag. This tag has two declarations added to it in the Hacks sheet; a width of 100% to make sure that it occupies the full tab area, and a display setting of “block”. The latter is crucial if you are planning on using any icons for your tabs. In our example, the icon that gets used is a cross to indicate that the tab can be moved.

.design .pages ul li.moveable a.page span {
  display: block;
  width: 100%;
}

In Conclusion

By leveraging IE6’s quirks through tricks like the Holly Hack, and using some smart CSS, I made sure that our tabs worked smoothly in IE6. I can’t emphasize enough how starting with code that is both valid and semantic made this whole process easier, since that allowed me to focus only on the issues that were being raised by Internet Explorer 6.