Are you crazy about CSS?

OK, before I lose my mind and tear apart everything on my desk, I thought I would turn to the wonderful world wide web for some help. I'm trying to do some CSS-based tabs. I want them to work in the major browsers (read: pretty much everything but NN4). I've read a variety of articles about this, including Mark Pilgrim's Pure CSS Tabs and Mark Newhouse's CSS Design: Taming Lists, and I'm stuck. Can you help?

This is what I want (and have in Mac/Camino 0.7):

This is what I see in Mac/IE 5.2 and Win/IE:

Note in the second image there’s a line beneath the forward tab, making it appear in the “behind” position like all the others. Here’s my code. If you have any ideas how to make this work, I’ll be forever grateful. And if it’s not possible, I’d appreciate hearing that too, before I tear out what remains of my hair. I’ve turned on comments to facilitate your feedback. Thanks a gazillion!

23 thoughts on “Are you crazy about CSS?”

  1. Try adding:
    #content {
    position: relative;
    top: -1px;
    z-index: 1;
    }
    This should push up your content box so that the bottom border of the active tab will obscure that part of the top border of your content box.
    That’s what I’ve done on this site:
    http://www.thesession.org/
    which does something similar to what you’re doing (except that I used background images for the tags).
    Hope that helps.

  2. Meg, z-index doesn’t like working, especially on IE, without specifying the position more explicitly.
    http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zindex.asp
    In other words, you need to specify position: absolute; or position: relative; for all the elements with z-indexes. Try positioning your elements with absolute or relative positioning, then work on the z-index bit.
    BTW – the tabs on blogosphere.us don’t work on the latest version of Safari. This is probably a Safari issue, though.

  3. This is tricky. I think it **might** be related to IE5’s problems with z-index and stacking order as described in this article. http://www.brainjar.com/css/positioning/default5.asp
    I tried adding position:relative to your #s code (so it’s “container” is the page and removed from the others – just a thought), and that fixed it in IE5/Mac but then it’s messed up in Mozilla.
    And what do I really know – this stuff is really hard!
    Sigh. Gotta run!

  4. Jim Ray, that’s getting me closer for sure. Now it’s perfect in Safari and IE, but there’s nothing appearing at all in Camino. It’s gone all white. Guh. So close…

  5. GOT IT!
    Dammit, couldn’t leave work till I figured it out. This should work:
    BODY {
    font-family: ‘Lucida Grande’, Verdana, Lucida,
    Geneva, Helvetica, Arial, sans-serif;
    }
    #s {
    margin:0px;
    padding:0px;
    /*z-index:-5;*/
    }
    #s h2 {
    border:1px solid #000;
    padding-left:8px;
    padding-right:8px;
    padding-top:0px;
    padding-bottom:0px;
    margin:0px;
    background-color:#FFC;
    font-size:small;
    font-weight:bold;
    display: inline;
    /*z-index:5;
    position: relative;*/
    }
    #s h2.on {
    border-bottom: 1px solid #FF6;
    background-color: #FF6;
    z-index:10;
    position: relative;
    }
    #s a {
    color:#333;
    text-decoration:none;
    }
    #s a:hover {color:#FC0;}
    #hold {
    margin-top:-1px;
    background-color:#FF6;
    border:1px solid #333;
    font-size:small;
    width:75%;
    /*z-index:-10;*/
    z-index: 1;
    position: relative;
    }
    #content {
    margin: 15px;
    padding: 10px;
    background-color:#FFF;
    border:1px solid #999;
    font-size:small;
    }
    Any code that’s commented out is yours. This seems to work just fine in IE on the Mac, IE 5.5 on Windows 2000 (Virtual PC), Safari, Camino. Again, the key was to make sure that everything that needed a z-index had an explicit position specified.

  6. Jim – Yup, I know the tabs don’t work in “new” Safari. (They worked in the old version though.) It’s a small tweak in the CSS, I’ve just been putting it off. 🙂

  7. Perhaps Jim Ray would be able to put together a working example for future reference? You’ll be rewarded with the respect of your peers 🙂

  8. Gracious. While the possibility of web-geek whuffie is certainly irresistible, Steven, I certainly can’t claim much credit for this. Meg did most of the heavy lifting, I simply assisted with an annoying bug. Thanks for the kudos all the same, though.

  9. I’m finding in IE6.02/Win that in both Meg’s and Jim Ray’s code, the top borders of the tabs are cut off and the tabs run together with no space. Adding a pixel of padding to the top of #s and a few pixels to the right margin of h2 fixes it, and (theoretically anyway) shouldn’t mess things up in other browsers.

  10. Awesome, man- I wasn’t expecting it to work on the entire Mac fleet, too.
    More than happy to help.

  11. Wowzers Jack! This also works on Mac/IE 5.2, Mac/Camino and Mac/Safari. I’d come up with an alternative with some help from friends but it didn’t have the nice border that my original had, so this is great. Now I’ll see if I can get it to work in the rest of my design. Thanks again to everyone for your help.

  12. I originally was using UL and LI but at some point switched to H2 and since I’ve got it working that way now, I don’t want to fiddle with it anymore.

  13. Could someone please put a final example page up? For us folks who are crazy about css but aren’t crazy enough to get all involved in the tiny details doesn’t want to reinvent the wheel.
    Someone put up an example page, please! Then let me know when it’s up.

Comments are closed.