Light Weight Low Tech CSS Tabs

Published in CSS on Wednesday, October 13th, 2004

An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

For the curious and impatient, Example A, B.

The requirements

A project we've been working on required a different colored set of tabs for navigation depending on the section that the users were using. We needed three color variations and we wanted to be able to easily change the colors used by the tabs without too much markup or image hassle.

The options

I'm a huge fan of the sliding doors method, and the navigation matrix, but trying to come up with something compact and efficient that could run different color combinations required something a little different.

Before we get into the code and details, it is recommended that you read Sliding Doors of CSS I and II and the Mountaintop Corners articles at Alistapart.

The idea

For awhile now I've been wanting to try and use Dan Cederholm's mountaintop corners together with the sliding doors method, and this seemed like the right time.

The idea would be to cap the tabs with mountaintop corners, and fill the tabs with the desired background-color rather than an image. The tabs themselves would be build using a slightly modified sliding doors method.

Making it happen

We build from example 8a of Sliding Doors of CSS 2, as it is a complete cross browser version of the tabs. This method uses extra spans that allow for Internet Explorers lack of handling pseudo-classes on anything other than anchors (otherwise we'd need a little javascript help).

Starting with this example, making a mountaintop version is quite simple. The following documents contain examples of the method. Where the CSS deviates from the original sliding doors method, comments have been made.

  1. Example A that is inspired by the simple yet functional tabs used over at Digital Web.
  2. Example B showing three different versions of the tabs, and the switches needed to do so (invalid becauase of the multiple id's).

The Results

Some observations

There are a couple of things worth noting here:

  1. An image does have to be created, following the methods outlined in the mountaintop corners article.
  2. The CSS is simplified compared to the sliding doors method, however the tabs do look a little lower tech.
  3. By using an extra 1px pad on the 'current' tab, the background color of the ul bleeds under the list and acts as an underline (as it is on Digital Web). If preferred, on can add an underline to the image (the single image) and build the underline as in the original sliding doors example.

Why bother?

Quite simply, we needed a soluton that wasn't going to result in loads of CSS from the three different versions. However, even as a standalone version, the CSS is a little lighter, and compared to the Digital Web tabs (which are quite attractive), the appearance isn't too far off (and we could get ours much closer to DW's tabs if we tried).

Some final thoughts

If you were to build the tab image with enough height and the right width, you could use the image for building some nice mountaintop cornered boxes on your site, effectively recycling your background images.

Taking it one step further, you could export different width boxes (for mountaintop cornered boxes) on the same image that you use in your navigation image, with little cost in file size as there are very few colors being used here.

An example

Here's a little example, scooped from the mountaintops article. Dan's original and something based on what is outlined above (narrowed for simplicity and please excuse my poor graphic skills at creating shadows...).

Big thanks to Philippe for keeping it honest in IE mac...

Comments and Feedback

Interesting. I need to look more into the mountain top thing, plus the tabs used in these examples

Thanks for the posting

Hey Bryan. The mountaintop thing isn't a bulletproof solution to rounded corners (ie done the way it is here it doesn't scale horizontally), but it sure can be the right tool for the job.

I'm am using IE 6.0 SP2. When I hover over a tab, I get a flash where the tab is replace with a rectangle before the rounded corners appear.

I do not have this experience with Firefox. Any suggested fixes?

Not really new, but very cool and simple.

David, go to 'Tools->Options->Settings' in IE and tell me what you see... The default for those radio buttons is 'Automatically', and when that is set they don't blink like that...

David S, to get rid of the flash on IE 6.0 SP2, you can include a background image of the entire set of tabs in the containing div. It's a bit of a hack, but it takes care of the IE flash.

about Ryan MacCarthy comment: could you explain with a little more detail? thanks

orix, I have a feeling that Ryan is a bit confused, as a background image of the entire set of tabs does not exist here. He may be thinking of the Navigation Matrix tabs..

Example V is my version, based on your works If testing works well, I may try it on www.vaneerden.com, currently using sliding doors for background change, but this reduces the number of images again.

About the flash in IE, wouldn't it help to just use a simple javascript preload script to preload the images? Any image rollover script has a preloader part in it. So they are easy to come by.

good Luck!

Hey Mstyle, the flash problem exists when one has a certain setup in IE. The setup requires a check to the server, so a preload won't help. In addition, the image is already loaded and in use, so a preload isn't necessaary, it already exists on the client.

Update! I have now revised www.vaneerden.com to use your technique. Thanks!

Ha! Slick; sliding doors with one image, and a re-use of the tabs. Nicely done Bill.

Thanks! It acts a little strangely in Khtml, but main browsers IE5+ and FF handle it well

Home » Blog » Web Development » CSS

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..