CSS Tabs 2.0

Almost four years ago I thought it might be fun to experiment with CSS and create CSS Tabs — simple, cross-browser tabs that developers could just drop onto a page and they would work. Almost four years later, CSS Tabs is by far the most popular page on unraveled and perhaps the most popular css tabs on the web. But like many HTML/CSS techniques, it had aged and was no longer one of the best methods for creating cross-browser tabs.

Now I’m no longer purely a developer, but I wasn’t about to just sit there and watch CSS Tabs go out of date. So a few weeks ago I started looking around to see what folks were doing and how they could be done better. The result is CSS Tabs 2.0. They’re the same, simple cross-browser tabs, but they use a different CSS technique that allows them to work in 17 browsers across Windows, Mac and Linux. And they no longer have the ugly alignment bug that was caused when the text size was changed.

Since I released CSS Tabs, I’ve received a ton of questions from people building sites who (no offense) had no clue what they were doing. So this time around, I’ve tried to make them even easier to use for the unprofessional developer by including lots of comments in the CSS.

So feel free to try them out and experiment on your own, but please provide attribution according to their Creative Commons license. And please let me know if you have any feedback or find the browser compatibility list to be inaccurate. Enjoy.

Comments

  1. First of all, the background and the reasons why I’m investing time learning CSS, PHP, Apache etc…

    I’m a civil engineer operating for water and sanitation projects in developing countries. There, I found out that software piracy is widespread. But I couldn’t teach my colleagues that piracy is a crime without offering affordable alternative solutions.

    Most of my colleagues in developing countries use Excel to store their data. I was used to store most of them in databases and I wanted to promote that approach. ACCESS is a very convenient DBMS since it provides a very intuitive GUI interface. But it has strong limitations and MS Office Professional is not affordable in those countries at the legal rate of one licence per user.

    Thus, I looked for cheap or free software to connect to PostgreSQL or MySQL databases. OpenOffice rapidly shown it’s own limitations, and it rapidly became obvious that the solution could dwell either in a Java/Swing interface to the DBMS or a PHP interface. I’m a rather old goat, and though still academically interested into Java2/Swing, I thought that XHTML/PHP solutions would be much faster to implement.

    I wanted to reproduce the ACCESS interface look. I recently found your site and a few other ones on CSS, and feel that I’m going to achieve my goals.

    Thanks for making your experience available.

  2. Hello, I noticed the gap between the tabs and I couldn’t get it closed. Then, suddenly, while hovering the carpet, it came to me. The list items are made inline elements. That means that whitespace characters come in to play. And yes, putting the li tags on one line (without spaces or linefeeds) fixed the gap. Now I can control the width of the gap through the margin-right property.

  3. At any page zoom level in IE7 but the default 100%, the tab text loses its alignment with the tabs… O.o

    I know IE7’s implementation of page zoom is horrific, but is there any sort of workaround?

  4. I didn’t do extensive testing in IE7 but thanks for letting me know. I’m not aware of any workarounds at the moment. I’ll look into it and see what I can find.

  5. I am using the code provided here in a Dreamweaver template arrangement. I am having trouble with the . What are the placement requirements for this tag?

  6. This tab system doesn’t do teh grand job that you suggest in your post. When we increase the font size in, say, Maxthon (IE), with a CTRL +, the tab titles become larger but the green background remains the same, making the entire tabbing break.

    If you respond to this, could you also kindly send me a CC by email. Thanks.

  7. I figured out a way to fix the text misalignment in IE7. Not sure if this is specific to my customized tab bar or not, but here’s the generic version of what I did.

    In an IE7-specific stylesheet, I applied the following:

    ul li
    {
    zoom: 1;
    }

    ul li a
    {
    position: relative;
    }

    body#tab1 li#tab1, body#tab2 li#tab2 /*etc. etc - include all the CSS selectors required to cover whichever tab is “current” */
    {
    zoom: normal;
    }

    This fix hasn’t gone live yet, but it’s up and running on a site I’m developing at a zekret lokation… I’ll post the URL here once it’s live. :)

  8. active tab is smaller than the other tabs on my iphone

  9. I may have no idea what I’m doing, but what am I supposed to download? The page you link to CSS Tabs 2 has nothing to “download”, nothing that I can see that is downloadable and no system or code that has any suggestion I can get. Are you expecting us to right-click and view source or what exactly are giving us?

  10. Thanks for explaining it so clearly. Also the source code is great and easy to follow. I think this is a great approach to using tabs in web sites. You rock.

Comments are closed for this entry

Please send your feedback via Twitter to @jmk.