Copy & paste the code below to embed this comment.
Frank
First off I’d like to say what a brilliant article this is.
Secondly, how would it be possible to adapt this to make scalable content holders. So, you’d have lovely rounded cornered boxes to hold text etc. How would you go about adding a rounded bottom to each tab?
Simple, elegant and really amazing. This article presents a great solution for good looking graphical tabs only through smart exploring of HTML and CSS features. Congratulations, Doug!
This is exactly what I have spent all of today trying to get to work. Until reading this article, I couldn’t tie it all together. I should’ve just played with iPod more and read this article.
Welcome back ALA. With an article like this that so well explains it’s topic reflects on the competency of the author and the high standard of A List Apart. Well done Doug and ALA.
Copy & paste the code below to embed this comment.
Eckhard Rotte
Hi,
I´ ve been playing around with this “sliding doors” – technique a few weeks ago. I stopped it because it doesn`t really work on Mac IE 5 – thanks for your solution.
But in Mac IE 5.0 there’s still a bug left – here’s a screenshot:
I´ ve been playing around with this “sliding doors” – technique a few weeks ago. I stopped it because it doesn`t really work on Mac IE 5 – thanks for your solution.
But in Mac IE 5.0 there’s still a bug left – here’s a screenshot:
Copy & paste the code below to embed this comment.
john
I get a flicker that occurs, where the background of the right side of the tab flickers as I enter the link, once I am hovered it works fine.
This occurs in IE 6.0 on Win2k, and in examples 3 and on. In example 3, the left portion of the tab flickers, and in example 4 the right portion flickers. Obviously which one flickers is according to the layering.
Copy & paste the code below to embed this comment.
Peterman
Truly a great article! I knew that background images could be used for e.g. rounded corners this way, and I suspected that more advanced things could be done with proper backgrounds, but I never dared hope it could look as great as examples 2+3 and still scale so perfectly.
Paul Nattress ( http://www.alistapart.com/discuss/slidingdoors/3/#c5117 ) wrote:
“Just playing the devil’s advocate here, but if we used the standard method of displaying tabs (i.e. using only images) then won’t screen readers read out the alt tags on the images? How is the sliding doors technique better for accessibility?”
The text can be scaled. (A minor point is also that it downloads faster.) Accessibility isn’t just about screen readers.
Another benefit is that tabs can be added and changed with a few keystrokes in a text editor; no need for e.g. Photoshop to be used, or even installed on the machine you’re updating from.
Copy & paste the code below to embed this comment.
Antony
The image flikering in IE6 only happens if you have the ‘check for newer versions of stored pages’ (Internet Properties/General/Tempoary Internet files/Settings) set to ‘Every visit to the page’. This is not the default (the default is ‘Auto’). But as web designers want to always see the newest version with out the cashed version getting in the way we all usually set it to this. (to reduce the likelyhood of seeing the cashed page just reduce the ‘Tempoary Internet files folder to a tiny size (I have mine at 1MB).
Copy & paste the code below to embed this comment.
Andy Smith
Excellent article. I think the display problem with IE5/Mac (the one fixed in the article, not the one in Eckhard’s comment) comes about because you’re trying to do something that isn’t intended to be possible in CSS2.
Section 9.5 of the CSS2 spec says that a non-replaced floating element (ie one that isn’t an image or object or something else with an intrinsic width) must have an explicit width. Section 10.3.5 says that if a non-replaced floating element has auto width specified, its computed width should be zero. So interpreting the spec strictly I think this means the tabs should disappear completely.
However most browsers have decided on a ‘shrink to fit’ approach instead, which seems more useful. This has made it into the CSS 2.1 working draft, where section 10.3.5 describes how the shrink to fit width is calculated.
Does this mean you should feel slightly impure and non-standards-compliant for using this technique? I guess it depends if you’re willing to be a bit pragmatic about it and accept that the behaviour you’re relying on is widespread enough to have made it into CSS 2.1. But if you want to be ultra-standards-compliant you should probably specify a width, maybe in ems if you want it to resize nicely.
Thank you for this excellent and insightful article (and what a comeback of ALA. The Eagles are nothing compared to it ;-) ).
All the way through the article I was not thinking of tabs, but of all the other sliding doors that can be used for the flexible width content, and for that I think the “Bowman Sliding Doors” is going to be a significant one.
In the interest of throwing out other “innovations”: I implemented a similar, though not as glorious, method in adding a vertical slant to the left of the links “contact | directions | site map | home” at www.bigaustin.org. Demonstrates the variety of outcomes from this method, not just tabs. As I was reading, I asked myself “what about IE5/Mac?” and lo-and-behold, you encountered the same issue as I did =). Good work, much cleaner and truly more innovative than my humble slanted line.
Andy Smith: First, let’s make sure we’re clear… there is no problem with this technique in IE5/Mac in general. 5.1 and 5.2 render it flawlessly. It’s IE5.0/Mac which can’t handle multiple nested floats very well. As I stated in the article, the upgrade to 5.1 fixes the many float bugs that existed in 5.0. The amount of people still using IE5.0/Mac is being pinched off to almost nothing as the 5.1 upgrade has been around forever, more people switch from OS9 to OSX, and Safari shifts into dominance on the Mac.
Since the CSS 2.1 Working Draft makes corrections and clarifications to the many errors and vague statements from the original CSS2 Specification, no, I don’t think there is a problem with omitting explicit widths for floated list items. In fact, specifying a width would defeat the purpose of allowing the tabs to expand dynamically with the text inside, no matter what it is, or how often it’s changed or resized.
Even if widths were specified in “ems”, since most designs don’t deal with monospaced fonts, widths of the tabs and the text inside them might not match up well, especially once the text is resized. Not to mention, every time you changed the text or added a new tab, you’d need to go back to the CSS repeatedly to modify specified widths.
Copy & paste the code below to embed this comment.
Paul Arzul
i don’t think you need to worry douglas—because you can use:
width: auto;
for things without intrinsic width (like floats). that should size things appropriately (i think).
i’m rather more concerned about what this (wonderful) css tabs technique does to the semantics of a stylesheet—since it’s making them harder to read/decipher. i suppose we’ll all be in for a serious tidyup come css3 borders:
Copy & paste the code below to embed this comment.
roland
I found it easier to understand the markup than all that wordy stuff that led up to it. I also think the illustrations in the first quarter of the article would have benefitted from the use of an additional color to denote which layer is doing the overlapping.
I have been using this very nice trick for the past month on creating a capped look for the first and last list item by using :first-child and :last-child. I used it on a example to cap the bottom of the submenus. http://moronicbajebus.com/playground/cssplay/drop-down-llama-menu/
It suffers from an excessive <li> and flickers on Safari at the overlap point where both links are in a hover state, and hasn’t been tested on IE 5 Windows yet.
I’d been following all sorts of nice tabs based on unordered lists on the listomatic site recently, but this totally takes the cake. Doug, you’ve created some excellent tabs here. Congratulations. And welcome back ALA!
In the article the display:block is set on the anchor element and not on the list element.
If display:block is set on the list element and not on the anchor element IE5/Mac (the latest free version at least) does not stack the tabs vertically, but horizontally and in all other browsers it works as well. The IE5/Mac hack is not necessary then (I use the sams approach of floating list items for my website, so I experimented a little).
Copy & paste the code below to embed this comment.
Sean Martell
Amazing tutorial. Only one problem… is there a way to re-work this technique to allow for a centered tab system? The float:left really makes it hard to center this if you like having your menu at 100% width and centered.
Copy & paste the code below to embed this comment.
Gena
Interesting article, without a doubt, but it seems to ignore IE6—why’s that?
And there’s no mention that only the text is clickable in IE6 (not rest of the tab). Is there a fix for this? Most of the tabs I see people using, both image-based and CSS ones make the whole image area interactive.
Copy & paste the code below to embed this comment.
rich
i’m happy to let IE6 users go through the ever so slightly steep learning curve required to click on the link rather than the tab.
this is fine because the site i am using this on is a personal one, but in a business environment this may be a factor that would have to be seriously thought over.
other than that, an excellent piece of coding.
welcome back ala!
oh btw nice hack from Tobias for rollovers. i’ve used it :)
I’m so happy to have A List A Part back. Articles like this make many of us wish we could “:hover” over your shoulders for a day—gleaming as much as we could. Thanks for all you offer.
Copy & paste the code below to embed this comment.
Stephen
Have tried in IE6, Firebird 0.7 and Opera 7 and I could not get images for the tabs, except for version 1 in Opera 7, which gives me the inactive tabs fine, but the active tab is not complete. Confused since everyone else says this rocks, and it sounds great….update – just refreshed my firebird and now it gives a working version 1, but still with broken active tab. You must be working on it…will check back. Cheers.
Copy & paste the code below to embed this comment.
Andrew
I’m with everyone else in heaping praise on this article and technique, I just want to ask a question though about the behaviour of the tabs when the window width is less than the total width of all five tabs.
Using both IE6 and Firebird 0.61, examples 1 and 2 in the article make the tabs line up to the left, so if the window is only wide enough to fit in the Home, News and Products tab then the About and Contact tabs are aligned to the left on the next line. With examples 3 onwards the About tab displays directly below the Products tab and the Contact tab displays on a third line.
This isn’t so much a criticism as just an enquiry as to why this happens. I don’t know enough about CSS to work it out for myself unfortunately.
Copy & paste the code below to embed this comment.
sandro
dear people, tabs are so last millenium. CSS is a silly hack. Don’t use tables because they are obsolete (as if the browser will EVER stop recognizing tables. wake up!), yet use an UGLY hack to make this stuff work. Extraordinary.
If tabs are the right interface that is a great discussion. I don’t know if they are soooo last millenium, but I’m not convinced I like them either.
But saying CSS is nothing but an ugly hack and tables the best layout medium means either you are trolling around here (in which case your post better be deleted) or you show an extraordinary ignorance that is exemplarary of too many webguys who know one little trick and think that’s the ultimate way of working. Read http://www.macromedia.com/newsletters/edge/october2003/index.html?sectionIndex=1&trackingid=OMN_AAJT to start with.
Copy & paste the code below to embed this comment.
sandro
to martijn:
css is often hacked. the css in this example has a very prominent hack. other examples have other hacks. if you want to call that a troll, well…
tables are the best layout medium. they are easy and known and automatically reflow. they will never disappear, you can quote me on that. they should be part of the standard, and any body that seeks to destroy something that is known and useful simply to conform to an abstraction like ‘standards’ is someone not to be trusted. which is most likely to happen? css hacks suddenly fail one day on a new browser release? tables stop being supported, thereby neutering, guessing, 10 billion websites or so? i wonder why amazon continues to use tables for their tabs. must be one trick ponies.
You can go to uspto.gov and do a search for sandro pasquali. read through my patents. You will see in my work a commitment to advanced dynamism in websites.
It is amazing that you send be to a 300 k flash file so i can read a 3 column layout (hint: everyone knows that’s the wrong way to present text on the web) that celebrates css. there’s so much humor there i’ll just leave it for posterity.
look, knock yourself out. use css if you like. i often use it for setting fonts and so on. but i offer that there is more power is learning javascript and manipulating the dom directly, via attributes, and even more power if you have the knowledge and desire to build XUL-ish layout manifests and have those parsed by a javascript-driven xml/http loader and local parser. you see, this lets you write functions that determine style attributes based on modal concerns, instead of dumb css templates that, let’s hope!, get attached to the right documents. if you never want to progress beyond being a blog styler, stay with css. it’s easy and fun.
To those people who earlier inquired about centering the tabs: I can’t think of a way to do it without putting a wrapper <div> around the entire block of Doug Bowman’s HTML code, and without specifying an exact width for at least one of the <div>‘s involved. If I’m wrong, someone please correct me; I’d really like there to be a simpler way to do this using CSS.
The HTML would look something like
<div id=“header-outerwrap”>
<div id=“header-innerwrap”>
<div id=“header”>
<ul>
….
</ul>
</div>
</div>
</div>
And the CSS would be something like
#header-outerwrap {
text-align:center;
}
#header-innerwrap {
margin:0 auto 0 auto;
text-align:left;
text-align:center;
width:XXXpx;
}
#header {
/*Bowman’s styles */
}
Two wrapper <div>‘s are needed because
1. The original header <div> has been
left-floated, and therefore needs at least
one containing <div> to which centering can
be applied.
2. IE/Win 5.X has a bug that causes elements
with left and right margins of “auto” to
not display as centered. To work around
this, an extra div is needed…this
centering hack is explained elsewhere
online; do a google search if you don’t
know it already.
I have only tested the above code in IE6/Win2K and FB0.7/Win2K; it works fine on both.
Copy & paste the code below to embed this comment.
Ruth
Note that this technique doesn’t center the actual tabs; instead, it centers the div that the tabs are in. I haven’t figured out how to center the tabs themselves; since they are left-floated, center-alignment is problematic.
I have read the number of great responses to this article, but for some reason I am not having the same luck. for some reason the CCS code below does not render so that the current tab is diplayed with both rounded edges.
#header #current {
background-image:url(‘images/norm_right_on.gif’);
}
#header #current a {
background-image:url(‘images/norm_left_on.gif’);
}
If I change it so that the CSS is:
#header #current {
background:url(‘images/norm_right_on.gif’) no-repeat right top;
}
#header #current a {
background:url(‘images/norm_left_on.gif’) no-repeat left top;
the right side is rounded but not the left. Anything to help out!
}
Copy & paste the code below to embed this comment.
Brian
> Clicking the whole tab… | martin:
> It would be fine to click the whole tab not
> just the text link.
2nd that.
Unfortunately, there still seems to be this strong trend among Web Standards Evangelists and Devs to ignore popular browsers—to focus their efforts on browsers with cooler names and OSes like Zeldzilla, Macintush, Firequeror, Funix, Surfari, Limex, etc. Browsers with old-school, pedestrian names like Internet Explorer and Netscape Navigator (sheesh, how could they come up with anything more lame than those???) are pretty much ignored when they’re running on something as sad as Windows 2000 (three years out of date, to be sure!) or XP (NT clone? outta here! :P ).
Screen readers are cool though. Just ask your 95% lame-o user base that’s still doggedly using IE5/6 for Win to go poke their eyes out and learn Braille. That’s the way to do it. Chix fer free! You might even get on MTV…
Thank you so much Mr. Bowman (and ALA) for shedding some light onto an issue that I have worked on (without much success) for some years now. I have always loved the power of CSS and its’ ability to separate design from content, but there were definitely some roadblocks when using it to try something of this nature.
Thank you again for sharing your discovery. I was so proud of myself when I discovered how to use CSS to display a list inline. Now, I am truly humbled… :)
p.s. It is good to see you back in action ALA! I have sorely missed you all this time.
Copy & paste the code below to embed this comment.
julz
I tried using these tabs with (my first!) dw mx database driven site: the tab texts and page contents are all pulled from a flat database. Looks great, works too. (got php to drive the span tag too.)
Now trying second level menu: this is where the ‘tab’ metaphor really breaks down of course.
So for the second level menu: how to get the top level menu to stay in the selected state? A little database-puzzle.
The unclickable part on the left of the tab can become clickable an alternate way.
Leave everything the way it was just before the “Finishing Touches” section.
Now add a “margin-right: 3px;” to the “#header li” style and a counter “margin-left: -3px;” to the “#header a” style.
i.e.
#header li {
float: left;
background: url(“right.gif”) no-repeat top right;
margin-right: 3px;
padding: 0;
}
#header a {
display: block;
background: url(“left.gif”) no-repeat top left;
padding: 5px 15px 4px;
margin-left: -3px;
}
Unfortunately works only in Opera (at least v7).
Don’t know if it works with IE/Mac
See Sliding Doors of CSS II, published 30 October in Issue 161, for IE-oriented workarounds, rollovers, and more:
http://www.alistapart.com/articles/slidingdoors2/
These Sliding Doors extensions, exceptions, and workarounds were omitted from the initial article to keep the focus on the concept and execution of this new CSS design method. The initial article was complex enough! Additional complexities, we felt, belonged in a follow-up article, and we are happy to now publish that follow-up.
Copy & paste the code below to embed this comment.
Matt
Call me an idiot, but I can’t seem to get the “right.gif” image. I suppose I could make my own, but was trying to get your example to work first, before I tried anything else. Can you send or provide a location?
I had just been trying to build a box with rounded corners when I read the article. Inspired by it, this is what came of it: background-images (e.g. rounded ones) on all four sides and completely stylable background surface
Copy & paste the code below to embed this comment.
Matt Anderson
Last night I was lying in bed thinking, “I wish CSS gave me a way to put one image in the upper right corner of a link and a different one in the upper left corner…”
Today I discover that it does! Thanks for a brilliant demo.
Copy & paste the code below to embed this comment.
brett rautenberg
I get the flickering behavior on IE6 on win2k regardless of my browsers cache setting (ie “Check for new version of page” on Auto).
In fact, that setting doesn’t seem to have any effect at all on this computer (e.g. there seems to be no cache-ing). It seems like rollovers, etc always reload when moused over, etc. This results in slightly less responsive rollovers and is annoying.
Anyone else notice this lack of cacheing on IE6 on win2k?
Copy & paste the code below to embed this comment.
Steven Urmston
Great technique, but I have experienced some problems positioning the tabs. When using absolute positioning, this can work in Mozilla/IE , but Opera 6(win) has problems. Relative positioning works in Opera, but this dies a sad death in IE.
If anyone has perfected positioning the 2 floats , I would be very grateful for a few pointers!!
Copy & paste the code below to embed this comment.
Yuri
I am having a problem with a site, http://www.wfmuziek.nl, which seems to be caused by the same thing as the IE/Mac CSS rendering problem.
I don’t have a Mac to test on, but a Mac sent me a screenshot… there’s a huge gap where the content div should be, and you have to scroll all the way to the right to see the content.
Is there a Mac user who wants to take a look at the site’s CSS and suggest what might be causing this?
Copy & paste the code below to embed this comment.
LostPacket
For those of you looking for more positioning control (i.e. centering your tabs, etc), don’t forget that this technique can be easily adapted to a table-based layout. Simply style the <td> tag instead of the <li>.
I know it’s not perfect, but if your business/design requirements make a CSS-based layout impractical, it’s a nice compromise.
I implemented tabs similar to these, but the background images kept flickering in IE6. After much head-scratching, I copied your example verbatim up to my web server, and the problem still occured. It turns out that IE6 won’t cache images when the web server sends them gzipped (which Apache often does). Since your sliding doors are hosted on IIS which doesn’t use gzip content-encoding, there is no problem for you.
In my previous post I mentioned the IE6 content-type:gzip bug. If you’re on a Linux/Apache system that uses mod_gzip, you’ll need to disable it to avoid constant image reloads in IE6. My host is crediblehost.com, and I created this .htaccess file at my public_html root:
As I just commented on the follow up article, there’s no need to split the tab images into left and right. The background alignment allows a single image to be used. See this at http://www.alzonline.net/en/forums/
Copy & paste the code below to embed this comment.
Krishna
Hi,
The article is wonderful and I implemented this in my current project. One of my screens has lot of tabs and they wrap around to the next line. I am using this inside one of the frames. The frame doesn’t have the scrolling=“no” , so how to make the tabs without wrapping to the next line.
What if you have one DIV container that is transparent (DIV1), and inside that DIV is another DIV (DIV2) that is colored, and has the link text in it. DIV2 is centered horizontally and vertically in DIV1.
Now, use your sliding doors technique, but instead of a regular graphic, you create a graphic that has the rounded-edge look that fades to transparency. The region between the inside edge of DIV2 and the outside edge of DIV1 would be filled with the graphic, which would fade to transparency at the junction between DIV1 and DIV2.
What does this accomplish? Well, you have the rounded ‘graphic’ look, but you can change the color of DIV2. Hence, you can use CSS to change the color of the ‘button’ (DIV2) at will, and since DIV1 is transparent, you won’t see the little corners of color at the outside corners of DIV1, where the graphic is transparent.
Copy & paste the code below to embed this comment.
Geert Vancompernolle
This is really awesome! Didn’t know this was all possible with ‘simple’ CSS.
You really showed me the power of CSS. I’m convinced more than ever about the capabilities of CSS.
Yesterday, I reported Japanese character wrapping within a tab.
After that I noticed that the same symptom happens for alphabetic words.
For verification, I changed tab wording from single word to two words, such as New York, New Jersy, and so on.
If you make browser’s width narrower ‘New’ and ‘York’ are formatted in two lines.
Copy & paste the code below to embed this comment.
Pratlina
This was a wonderful article and I love the technique used here. It has made my work so much easier. I have tried using the same technique with a vertical menu but without much success. Has anyone out there accomplished this?
Copy & paste the code below to embed this comment.
James Atkinson
Please excuse my total ignorance.
I’m redesigning an old table-based page with a lot of tabs along the top (ie “news | gallery | store | contact” etc). Since this navbar is a repeating element that gets reused in plenty of pages, what’s the best strategy for structuring the site? My current options seem to be:
1) paste in the tab markup by hand into each page
2) use a SSI to reference a “nav.shtml” file
(pro: if i use this method I can script nav.shtml so the current page’s tab is highlighted or “greyed out”
con: the scripted “nav.shtml” is pretty hefty)
3) use the <object> tag to reference “nav.html”
(do other designers use this tag a lot?)
I just want to have tabs that I can easily update 6 months from now without editing a million html pages.
Copy & paste the code below to embed this comment.
squalis
Hi,
great css…I had one problem though..I couldn’t get the little white corners to disappear….: ( I followed along everything was going great..I added the css to my file ..to remove them….but they remained ….I use IE 6 I dunno if that matters ….other than that it worked Great …Im sure it’s probably something I’ve overlooked….but I tried 3 times & I’m stumped…any help would be great…Thanks
Thank you Doug for sharing this great idea with us. These tabs are fantastic and so useful!
One minor note: Netscape 6 on the Mac has a problem with the #header containing div collapsing rather than containing the floats. The result is the background image does not appear behind the floated links. I think it may be because unlike most browsers, NN6mac doesn’t follow the CSS 2.1 specs on expanding to contain child floats. (It still follows the older CSS2.0 specs). And so, the only solution I could think of would be to put a clearing div in the html as the last element in the #header div. This of course adds clutter to the html code and is therefore probably not worth it, given the few percentage of people using Netscape 6 on the Mac.
Has anyone else noticed this too?
I noticed this issue in Netscape 6.2.3 on a Mac running OS9.
Copy & paste the code below to embed this comment.
heatherh
This is really a cool feature and I was about to use it on the redesign of our new corporate site until I tested it in NS 4.7. Unfortunately our web stats show people still hitting our site with this dinosaur so we have to build for it. It’s completely broken, totally unusable in NS. Bummer :(
131 Reader Comments
Back to the Articlejohn
Very nice technique. I’m trying to build these images in Paint Shop and failing miserably – anyone have tips?
Frank
First off I’d like to say what a brilliant article this is.
Secondly, how would it be possible to adapt this to make scalable content holders. So, you’d have lovely rounded cornered boxes to hold text etc. How would you go about adding a rounded bottom to each tab?
Keep up the great work,
Frank.
Márcio d'Ávila
Simple, elegant and really amazing. This article presents a great solution for good looking graphical tabs only through smart exploring of HTML and CSS features. Congratulations, Doug!
Andrew
Having ‘every visit to the page’ selected in IE really is a showstopper.. i’m wondering if the default setting is ‘never’?
robert
This is exactly what I have spent all of today trying to get to work. Until reading this article, I couldn’t tie it all together. I should’ve just played with iPod more and read this article.
I missed you ALA.
Gianluca
Dear Doug,
did you notice what a strange behaviour IE6 produces when you “hover” the tabs?
Sort of border “flickering”?
Other browsers are OK, but IE6 seems to render not properly… any suggestion?
And BTW, welcome back guys ;)
Mike Hudson
Welcome back ALA. With an article like this that so well explains it’s topic reflects on the competency of the author and the high standard of A List Apart. Well done Doug and ALA.
shaggy
Thanks, I have been working on the exact same thing but this is much cleaner.
The only problem is the cursed IE bug that forces a reload of background images every time you mouseOver it!!???
There are several ‘hacks’ out there that claim to fix it but nothing works. Whoever figures this one out is the smartest kid on the block!
Eckhard Rotte
Hi,
I´ ve been playing around with this “sliding doors” – technique a few weeks ago. I stopped it because it doesn`t really work on Mac IE 5 – thanks for your solution.
But in Mac IE 5.0 there’s still a bug left – here’s a screenshot:
<http://www.webdebug.de/test/SlidingDoors_MacIE50.png>
Does anybody have a solution for this problem?
greets,
E.
Eckhard Rotte
Hi,
I´ ve been playing around with this “sliding doors” – technique a few weeks ago. I stopped it because it doesn`t really work on Mac IE 5 – thanks for your solution.
But in Mac IE 5.0 there’s still a bug left – here’s a screenshot:
<http://www.webdebug.de/test/SlidingDoors_MacIE50.png>
Does anybody have a solution for this problem?
greets,
E.
john
I get a flicker that occurs, where the background of the right side of the tab flickers as I enter the link, once I am hovered it works fine.
This occurs in IE 6.0 on Win2k, and in examples 3 and on. In example 3, the left portion of the tab flickers, and in example 4 the right portion flickers. Obviously which one flickers is according to the layering.
Very good article!
Anyone else get this?
p.s. of course it works fine in mozilla
Peterman
Truly a great article! I knew that background images could be used for e.g. rounded corners this way, and I suspected that more advanced things could be done with proper backgrounds, but I never dared hope it could look as great as examples 2+3 and still scale so perfectly.
Paul Nattress ( http://www.alistapart.com/discuss/slidingdoors/3/#c5117 ) wrote:
“Just playing the devil’s advocate here, but if we used the standard method of displaying tabs (i.e. using only images) then won’t screen readers read out the alt tags on the images? How is the sliding doors technique better for accessibility?”
The text can be scaled. (A minor point is also that it downloads faster.) Accessibility isn’t just about screen readers.
Another benefit is that tabs can be added and changed with a few keystrokes in a text editor; no need for e.g. Photoshop to be used, or even installed on the machine you’re updating from.
Antony
The image flikering in IE6 only happens if you have the ‘check for newer versions of stored pages’ (Internet Properties/General/Tempoary Internet files/Settings) set to ‘Every visit to the page’. This is not the default (the default is ‘Auto’). But as web designers want to always see the newest version with out the cashed version getting in the way we all usually set it to this. (to reduce the likelyhood of seeing the cashed page just reduce the ‘Tempoary Internet files folder to a tiny size (I have mine at 1MB).
Manrilla
Yes. Thank you. This has been a very helpful article. ALA is always filled-to-the-rim with great stuff.
Tim
Thanks so much for making this available. It’s tres’ cool.
The version 2 style sheet will validate if you add an “s” to “San-Serif” to make “Sans-serif”. Sorry, I don’t mean to detract from a great article.
Thank you again!
Andy Smith
Excellent article. I think the display problem with IE5/Mac (the one fixed in the article, not the one in Eckhard’s comment) comes about because you’re trying to do something that isn’t intended to be possible in CSS2.
Section 9.5 of the CSS2 spec says that a non-replaced floating element (ie one that isn’t an image or object or something else with an intrinsic width) must have an explicit width. Section 10.3.5 says that if a non-replaced floating element has auto width specified, its computed width should be zero. So interpreting the spec strictly I think this means the tabs should disappear completely.
However most browsers have decided on a ‘shrink to fit’ approach instead, which seems more useful. This has made it into the CSS 2.1 working draft, where section 10.3.5 describes how the shrink to fit width is calculated.
Does this mean you should feel slightly impure and non-standards-compliant for using this technique? I guess it depends if you’re willing to be a bit pragmatic about it and accept that the behaviour you’re relying on is widespread enough to have made it into CSS 2.1. But if you want to be ultra-standards-compliant you should probably specify a width, maybe in ems if you want it to resize nicely.
Martijn ten Napel
Thank you for this excellent and insightful article (and what a comeback of ALA. The Eagles are nothing compared to it ;-) ).
All the way through the article I was not thinking of tabs, but of all the other sliding doors that can be used for the flexible width content, and for that I think the “Bowman Sliding Doors” is going to be a significant one.
Arthur!
I’ve been working on this for some time now, in an efford to replace my standard grey tabs with some eye-candy tabs.
Thanks for sharing and congrats on the new issue of ALA.
Stephen
In the interest of throwing out other “innovations”: I implemented a similar, though not as glorious, method in adding a vertical slant to the left of the links “contact | directions | site map | home” at www.bigaustin.org. Demonstrates the variety of outcomes from this method, not just tabs. As I was reading, I asked myself “what about IE5/Mac?” and lo-and-behold, you encountered the same issue as I did =). Good work, much cleaner and truly more innovative than my humble slanted line.
Douglas Bowman
Andy Smith: First, let’s make sure we’re clear… there is no problem with this technique in IE5/Mac in general. 5.1 and 5.2 render it flawlessly. It’s IE5.0/Mac which can’t handle multiple nested floats very well. As I stated in the article, the upgrade to 5.1 fixes the many float bugs that existed in 5.0. The amount of people still using IE5.0/Mac is being pinched off to almost nothing as the 5.1 upgrade has been around forever, more people switch from OS9 to OSX, and Safari shifts into dominance on the Mac.
Since the CSS 2.1 Working Draft makes corrections and clarifications to the many errors and vague statements from the original CSS2 Specification, no, I don’t think there is a problem with omitting explicit widths for floated list items. In fact, specifying a width would defeat the purpose of allowing the tabs to expand dynamically with the text inside, no matter what it is, or how often it’s changed or resized.
Even if widths were specified in “ems”, since most designs don’t deal with monospaced fonts, widths of the tabs and the text inside them might not match up well, especially once the text is resized. Not to mention, every time you changed the text or added a new tab, you’d need to go back to the CSS repeatedly to modify specified widths.
Paul Arzul
i don’t think you need to worry douglas—because you can use:
width: auto;
for things without intrinsic width (like floats). that should size things appropriately (i think).
i’m rather more concerned about what this (wonderful) css tabs technique does to the semantics of a stylesheet—since it’s making them harder to read/decipher. i suppose we’ll all be in for a serious tidyup come css3 borders:
http://www.w3.org/TR/css3-border/
- p
roland
I found it easier to understand the markup than all that wordy stuff that led up to it. I also think the illustrations in the first quarter of the article would have benefitted from the use of an additional color to denote which layer is doing the overlapping.
Regardless, it’s nice to see ALA again.
Seamus
I have been using this very nice trick for the past month on creating a capped look for the first and last list item by using :first-child and :last-child. I used it on a example to cap the bottom of the submenus. http://moronicbajebus.com/playground/cssplay/drop-down-llama-menu/
Note: It will not work in all browsers.
Simon Boyle
Arse!
There was me getting ready to show off a similar trick on a site in about a month’s time.
The design’s been held up in committee for about 6 weeks, but an id stripped demo is at
http://homepage.mac.com/sboyle/demo/rollovers.html
It suffers from an excessive <li> and flickers on Safari at the overlap point where both links are in a hover state, and hasn’t been tested on IE 5 Windows yet.
Nicely done.
Scott Johnson
I’d been following all sorts of nice tabs based on unordered lists on the listomatic site recently, but this totally takes the cake. Doug, you’ve created some excellent tabs here. Congratulations. And welcome back ALA!
Martijn ten Napel
In the article the display:block is set on the anchor element and not on the list element.
If display:block is set on the list element and not on the anchor element IE5/Mac (the latest free version at least) does not stack the tabs vertically, but horizontally and in all other browsers it works as well. The IE5/Mac hack is not necessary then (I use the sams approach of floating list items for my website, so I experimented a little).
Is there any objection to this approach?
Arthur!
You can highlight the active tab without using the seperate .active class. There is a way to keep your markup the same on every indiv. page.
[plug]See my website for information[/plug]
BK
That was BEEEEUUUUTIFUL…I am going to use it on a project I am working on…my previous solution was clunky but this is clean….thank you!!!
BK
Christoph Päper
It’s all nice and well, but for usability reasons you should avoid links to the current page, i.e. remove the href attribute:
<li id=“current”><a>Foo</a></li>
Sean Martell
Amazing tutorial. Only one problem… is there a way to re-work this technique to allow for a centered tab system? The float:left really makes it hard to center this if you like having your menu at 100% width and centered.
Any thoughts on a solution? Thanks!
markku
Very nice article, explains very well the possibilities of using mutiple background images, in a “layered” kind of way. Well done!
Gena
Interesting article, without a doubt, but it seems to ignore IE6—why’s that?
And there’s no mention that only the text is clickable in IE6 (not rest of the tab). Is there a fix for this? Most of the tabs I see people using, both image-based and CSS ones make the whole image area interactive.
rich
i’m happy to let IE6 users go through the ever so slightly steep learning curve required to click on the link rather than the tab.
this is fine because the site i am using this on is a personal one, but in a business environment this may be a factor that would have to be seriously thought over.
other than that, an excellent piece of coding.
welcome back ala!
oh btw nice hack from Tobias for rollovers. i’ve used it :)
D.Reddish
This has achived an effect that i was trying to achive myself and got wrong in oh so many small ways.
Its a lovely pice of work
My own attempts sucumbed to horrible nasty hacks and gettarounds.
This if very nice and much more tidy than my own implementation.
Thank you its great to find such helpfull articles.
Piero Fissore
I’m a 19 italian student and I love CSS design. This article is really cool ‘cause now I’ve got new tools for my design.
Bye bye from Piero, Italy.
Brett Merkey
<<Having ‘every visit to the page’ selected in IE really is a showstopper.. i’m wondering if the default setting is ‘never’?>>
After getting two new computers in the same week, I can report that the default setting for IE6 in WinXP is “Automatically”—which produces no flicker.
Only Web developers, motivated by the lust to view their latest changes, would think to change this setting to break the cached behavior.
Brian Andersen
Nice work, I’ll get to sliding.
Jason Pearce
I’m so happy to have A List A Part back. Articles like this make many of us wish we could “:hover” over your shoulders for a day—gleaming as much as we could. Thanks for all you offer.
Markus
I also had that problem. For me it works fine when using a title-tag for the links. Problem fixed. :)
brian
Great solution, Markus… :thumbsup:
Stephen
Have tried in IE6, Firebird 0.7 and Opera 7 and I could not get images for the tabs, except for version 1 in Opera 7, which gives me the inactive tabs fine, but the active tab is not complete. Confused since everyone else says this rocks, and it sounds great….update – just refreshed my firebird and now it gives a working version 1, but still with broken active tab. You must be working on it…will check back. Cheers.
Andrew
I’m with everyone else in heaping praise on this article and technique, I just want to ask a question though about the behaviour of the tabs when the window width is less than the total width of all five tabs.
Using both IE6 and Firebird 0.61, examples 1 and 2 in the article make the tabs line up to the left, so if the window is only wide enough to fit in the Home, News and Products tab then the About and Contact tabs are aligned to the left on the next line. With examples 3 onwards the About tab displays directly below the Products tab and the Contact tab displays on a third line.
This isn’t so much a criticism as just an enquiry as to why this happens. I don’t know enough about CSS to work it out for myself unfortunately.
Joe Chong
I am going to try right align the tabs. Has anyone tried that?
sandro
dear people, tabs are so last millenium. CSS is a silly hack. Don’t use tables because they are obsolete (as if the browser will EVER stop recognizing tables. wake up!), yet use an UGLY hack to make this stuff work. Extraordinary.
Martijn ten Napel
to sandro:
If tabs are the right interface that is a great discussion. I don’t know if they are soooo last millenium, but I’m not convinced I like them either.
But saying CSS is nothing but an ugly hack and tables the best layout medium means either you are trolling around here (in which case your post better be deleted) or you show an extraordinary ignorance that is exemplarary of too many webguys who know one little trick and think that’s the ultimate way of working. Read http://www.macromedia.com/newsletters/edge/october2003/index.html?sectionIndex=1&trackingid=OMN_AAJT to start with.
sandro
to martijn:
css is often hacked. the css in this example has a very prominent hack. other examples have other hacks. if you want to call that a troll, well…
tables are the best layout medium. they are easy and known and automatically reflow. they will never disappear, you can quote me on that. they should be part of the standard, and any body that seeks to destroy something that is known and useful simply to conform to an abstraction like ‘standards’ is someone not to be trusted. which is most likely to happen? css hacks suddenly fail one day on a new browser release? tables stop being supported, thereby neutering, guessing, 10 billion websites or so? i wonder why amazon continues to use tables for their tabs. must be one trick ponies.
You can go to uspto.gov and do a search for sandro pasquali. read through my patents. You will see in my work a commitment to advanced dynamism in websites.
It is amazing that you send be to a 300 k flash file so i can read a 3 column layout (hint: everyone knows that’s the wrong way to present text on the web) that celebrates css. there’s so much humor there i’ll just leave it for posterity.
look, knock yourself out. use css if you like. i often use it for setting fonts and so on. but i offer that there is more power is learning javascript and manipulating the dom directly, via attributes, and even more power if you have the knowledge and desire to build XUL-ish layout manifests and have those parsed by a javascript-driven xml/http loader and local parser. you see, this lets you write functions that determine style attributes based on modal concerns, instead of dumb css templates that, let’s hope!, get attached to the right documents. if you never want to progress beyond being a blog styler, stay with css. it’s easy and fun.
sanchez
sandro pasquali said:
>>“You can go to uspto.gov and do a search for sandro pasquali.”
The search for sandro pasquali:
http://www.firstgov.gov/fgsearch/index.jsp?fr=0&nr=20&de=detailed&mw0=sandro pasquali&mt0=phrase&ms0=must&in0=domain&dom0=www.uspto.gov&db=www&rn=1&parsed=true&act;.search=Submit
The result:
Your search did not return any documents. Please revise your search and try again.
Ruth
To those people who earlier inquired about centering the tabs: I can’t think of a way to do it without putting a wrapper <div> around the entire block of Doug Bowman’s HTML code, and without specifying an exact width for at least one of the <div>‘s involved. If I’m wrong, someone please correct me; I’d really like there to be a simpler way to do this using CSS.
The HTML would look something like
<div id=“header-outerwrap”>
<div id=“header-innerwrap”>
<div id=“header”>
<ul>
….
</ul>
</div>
</div>
</div>
And the CSS would be something like
#header-outerwrap {
text-align:center;
}
#header-innerwrap {
margin:0 auto 0 auto;
text-align:left;
text-align:center;
width:XXXpx;
}
#header {
/*Bowman’s styles */
}
Two wrapper <div>‘s are needed because
1. The original header <div> has been
left-floated, and therefore needs at least
one containing <div> to which centering can
be applied.
2. IE/Win 5.X has a bug that causes elements
with left and right margins of “auto” to
not display as centered. To work around
this, an extra div is needed…this
centering hack is explained elsewhere
online; do a google search if you don’t
know it already.
I have only tested the above code in IE6/Win2K and FB0.7/Win2K; it works fine on both.
Ruth
Note that this technique doesn’t center the actual tabs; instead, it centers the div that the tabs are in. I haven’t figured out how to center the tabs themselves; since they are left-floated, center-alignment is problematic.
martin
It would be fine to click the whole tab not just the text link.
Byron Guptill
I have read the number of great responses to this article, but for some reason I am not having the same luck. for some reason the CCS code below does not render so that the current tab is diplayed with both rounded edges.
#header #current {
background-image:url(‘images/norm_right_on.gif’);
}
#header #current a {
background-image:url(‘images/norm_left_on.gif’);
}
If I change it so that the CSS is:
#header #current {
background:url(‘images/norm_right_on.gif’) no-repeat right top;
}
#header #current a {
background:url(‘images/norm_left_on.gif’) no-repeat left top;
the right side is rounded but not the left. Anything to help out!
}
Brian
> Clicking the whole tab… | martin:
> It would be fine to click the whole tab not
> just the text link.
2nd that.
Unfortunately, there still seems to be this strong trend among Web Standards Evangelists and Devs to ignore popular browsers—to focus their efforts on browsers with cooler names and OSes like Zeldzilla, Macintush, Firequeror, Funix, Surfari, Limex, etc. Browsers with old-school, pedestrian names like Internet Explorer and Netscape Navigator (sheesh, how could they come up with anything more lame than those???) are pretty much ignored when they’re running on something as sad as Windows 2000 (three years out of date, to be sure!) or XP (NT clone? outta here! :P ).
Screen readers are cool though. Just ask your 95% lame-o user base that’s still doggedly using IE5/6 for Win to go poke their eyes out and learn Braille. That’s the way to do it. Chix fer free! You might even get on MTV…
William Dodson
Thank you so much Mr. Bowman (and ALA) for shedding some light onto an issue that I have worked on (without much success) for some years now. I have always loved the power of CSS and its’ ability to separate design from content, but there were definitely some roadblocks when using it to try something of this nature.
Thank you again for sharing your discovery. I was so proud of myself when I discovered how to use CSS to display a list inline. Now, I am truly humbled… :)
p.s. It is good to see you back in action ALA! I have sorely missed you all this time.
julz
I tried using these tabs with (my first!) dw mx database driven site: the tab texts and page contents are all pulled from a flat database. Looks great, works too. (got php to drive the span tag too.)
Now trying second level menu: this is where the ‘tab’ metaphor really breaks down of course.
So for the second level menu: how to get the top level menu to stay in the selected state? A little database-puzzle.
Jeff Knox
The unclickable part on the left of the tab can become clickable an alternate way.
Leave everything the way it was just before the “Finishing Touches” section.
Now add a “margin-right: 3px;” to the “#header li” style and a counter “margin-left: -3px;” to the “#header a” style.
i.e.
#header li {
float: left;
background: url(“right.gif”) no-repeat top right;
margin-right: 3px;
padding: 0;
}
#header a {
display: block;
background: url(“left.gif”) no-repeat top left;
padding: 5px 15px 4px;
margin-left: -3px;
}
Unfortunately works only in Opera (at least v7).
Don’t know if it works with IE/Mac
apartness
See Sliding Doors of CSS II, published 30 October in Issue 161, for IE-oriented workarounds, rollovers, and more:
http://www.alistapart.com/articles/slidingdoors2/
These Sliding Doors extensions, exceptions, and workarounds were omitted from the initial article to keep the focus on the concept and execution of this new CSS design method. The initial article was complex enough! Additional complexities, we felt, belonged in a follow-up article, and we are happy to now publish that follow-up.
Matt
Call me an idiot, but I can’t seem to get the “right.gif” image. I suppose I could make my own, but was trying to get your example to work first, before I tried anything else. Can you send or provide a location?
Andreas
I had just been trying to build a box with rounded corners when I read the article. Inspired by it, this is what came of it: background-images (e.g. rounded ones) on all four sides and completely stylable background surface
http://www.andreas-kalt.de/roundedbox/index.htm
Andreas
Matt Anderson
Last night I was lying in bed thinking, “I wish CSS gave me a way to put one image in the upper right corner of a link and a different one in the upper left corner…”
Today I discover that it does! Thanks for a brilliant demo.
brett rautenberg
I get the flickering behavior on IE6 on win2k regardless of my browsers cache setting (ie “Check for new version of page” on Auto).
In fact, that setting doesn’t seem to have any effect at all on this computer (e.g. there seems to be no cache-ing). It seems like rollovers, etc always reload when moused over, etc. This results in slightly less responsive rollovers and is annoying.
Anyone else notice this lack of cacheing on IE6 on win2k?
Ren
Up to now I used this technique without CSS. You’ve made it much easier now. Thank you!
Steven Urmston
Great technique, but I have experienced some problems positioning the tabs. When using absolute positioning, this can work in Mozilla/IE , but Opera 6(win) has problems. Relative positioning works in Opera, but this dies a sad death in IE.
If anyone has perfected positioning the 2 floats , I would be very grateful for a few pointers!!
Lino
For some reason, when I open my page in netscape, it doesn’t break between the final </div> and the procedding code.
That tabs are there and working fine, but then my stuff is to the right of them, as opposed to under them.
Yuri
I am having a problem with a site, http://www.wfmuziek.nl, which seems to be caused by the same thing as the IE/Mac CSS rendering problem.
I don’t have a Mac to test on, but a Mac sent me a screenshot… there’s a huge gap where the content div should be, and you have to scroll all the way to the right to see the content.
Is there a Mac user who wants to take a look at the site’s CSS and suggest what might be causing this?
Yuri
It included the comma in the link, so here is is again:
http://www.wfmuziek.nl
LostPacket
For those of you looking for more positioning control (i.e. centering your tabs, etc), don’t forget that this technique can be easily adapted to a table-based layout. Simply style the <td> tag instead of the <li>.
I know it’s not perfect, but if your business/design requirements make a CSS-based layout impractical, it’s a nice compromise.
John Simons
I implemented tabs similar to these, but the background images kept flickering in IE6. After much head-scratching, I copied your example verbatim up to my web server, and the problem still occured. It turns out that IE6 won’t cache images when the web server sends them gzipped (which Apache often does). Since your sliding doors are hosted on IIS which doesn’t use gzip content-encoding, there is no problem for you.
John Simons
In my previous post I mentioned the IE6 content-type:gzip bug. If you’re on a Linux/Apache system that uses mod_gzip, you’ll need to disable it to avoid constant image reloads in IE6. My host is crediblehost.com, and I created this .htaccess file at my public_html root:
<ifmodule mod_gzip.c>
mod_gzip_on no
</ifmodule>
Which did the trick.
Rob Winters
This is why I missed you guys. :)
Steve Clay
As I just commented on the follow up article, there’s no need to split the tab images into left and right. The background alignment allows a single image to be used. See this at http://www.alzonline.net/en/forums/
Krishna
Hi,
The article is wonderful and I implemented this in my current project. One of my screens has lot of tabs and they wrap around to the next line. I am using this inside one of the frames. The frame doesn’t have the scrolling=“no” , so how to make the tabs without wrapping to the next line.
thanks in advance,
Krishna
Darren Brothers
Excellent article, and it gave me an idea.
What if you have one DIV container that is transparent (DIV1), and inside that DIV is another DIV (DIV2) that is colored, and has the link text in it. DIV2 is centered horizontally and vertically in DIV1.
Now, use your sliding doors technique, but instead of a regular graphic, you create a graphic that has the rounded-edge look that fades to transparency. The region between the inside edge of DIV2 and the outside edge of DIV1 would be filled with the graphic, which would fade to transparency at the junction between DIV1 and DIV2.
What does this accomplish? Well, you have the rounded ‘graphic’ look, but you can change the color of DIV2. Hence, you can use CSS to change the color of the ‘button’ (DIV2) at will, and since DIV1 is transparent, you won’t see the little corners of color at the outside corners of DIV1, where the graphic is transparent.
Geert Vancompernolle
This is really awesome! Didn’t know this was all possible with ‘simple’ CSS.
You really showed me the power of CSS. I’m convinced more than ever about the capabilities of CSS.
Thanks for this great example!
Rgds,
Geert
Hiro Katsumi
Yesterday, I reported Japanese character wrapping within a tab.
After that I noticed that the same symptom happens for alphabetic words.
For verification, I changed tab wording from single word to two words, such as New York, New Jersy, and so on.
If you make browser’s width narrower ‘New’ and ‘York’ are formatted in two lines.
I prefer to have a fix for this issue.
rz
include a non-breaking space rather than a ” ” in menu items that have 2 or more words.
Pratlina
This was a wonderful article and I love the technique used here. It has made my work so much easier. I have tried using the same technique with a vertical menu but without much success. Has anyone out there accomplished this?
Rob Green
Thats given me some good ideas… thanks for taking the time out.
James Atkinson
Please excuse my total ignorance.
I’m redesigning an old table-based page with a lot of tabs along the top (ie “news | gallery | store | contact” etc). Since this navbar is a repeating element that gets reused in plenty of pages, what’s the best strategy for structuring the site? My current options seem to be:
1) paste in the tab markup by hand into each page
2) use a SSI to reference a “nav.shtml” file
(pro: if i use this method I can script nav.shtml so the current page’s tab is highlighted or “greyed out”
con: the scripted “nav.shtml” is pretty hefty)
3) use the <object> tag to reference “nav.html”
(do other designers use this tag a lot?)
I just want to have tabs that I can easily update 6 months from now without editing a million html pages.
squalis
Hi,
great css…I had one problem though..I couldn’t get the little white corners to disappear….: ( I followed along everything was going great..I added the css to my file ..to remove them….but they remained ….I use IE 6 I dunno if that matters ….other than that it worked Great …Im sure it’s probably something I’ve overlooked….but I tried 3 times & I’m stumped…any help would be great…Thanks
Michael Ryznar
Thank you Doug for sharing this great idea with us. These tabs are fantastic and so useful!
One minor note: Netscape 6 on the Mac has a problem with the #header containing div collapsing rather than containing the floats. The result is the background image does not appear behind the floated links. I think it may be because unlike most browsers, NN6mac doesn’t follow the CSS 2.1 specs on expanding to contain child floats. (It still follows the older CSS2.0 specs). And so, the only solution I could think of would be to put a clearing div in the html as the last element in the #header div. This of course adds clutter to the html code and is therefore probably not worth it, given the few percentage of people using Netscape 6 on the Mac.
Has anyone else noticed this too?
I noticed this issue in Netscape 6.2.3 on a Mac running OS9.
Nice work Doug!
heatherh
This is really a cool feature and I was about to use it on the redesign of our new corporate site until I tested it in NS 4.7. Unfortunately our web stats show people still hitting our site with this dinosaur so we have to build for it. It’s completely broken, totally unusable in NS. Bummer :(