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?
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:
which does something similar to what you're doing (except that I used background images for the tags).
Hope that helps.
Alas, that didn't work...
My buddy Nick did this successfully over at www.blogosphere.us -- check it out.
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.
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!
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...
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.
try this page out:
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. :)
Woo hoo! Thanks Jim Ray, you rule!
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 :-)
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.
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.
This works in Mozilla, IE5/6 and Opera on Windows.
Awesome, man- I wasn't expecting it to work on the entire Mac fleet, too.
More than happy to help.
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.
You seem to have fixed the problem, but you may still be interested in this:
The (small) sematic problem with the solution is that H2 is used for the tabs, surely an inline UL would be better, as my http://nontroppo.org/test/tab1.html does? I've never tested my positioning on Mac browsers however, so your CSS may be preferable.
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.
Meg, Look at the example at http://www.cacpc.org/ and see if that is what you're looking for. It's working on all browsers I use.
If you're still interested in CSS tabs, this might be useful:
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.
You've been reading Megnut, a personal blog by Meg Hourihan. You can poke around the Archives. You can read more About this site. You can say hi@megnut.com.
There are 23 responses