Martijn, I just had a look at your example with Opera 7.11/linux and all tabs are sitting on the left on top of each other without any background grafics.
Andreas: I have checked on Opera 6.03 on my Mac and a fresh copy of Opera 7 on Win98, but they both make a mess of both the CSS in the article and my own example.
Tweaking a local copy of a HTML file and a stylesheet and reloading in Opera 7 did not show any difference, even not when emptying the cache and restarting Opera.
Even more interesting, this website (A List Apart) uses the same technique for its top menu, but not the IE/Mac hack and it still works.
Can anyone shed a light on this? I like my stylesheets with as less hacks as possible and it seems there are more roads leading to Rome when using list-items for a menu and marking them up with CSS to align them horizontally.
Copy & paste the code below to embed this comment.
dusoft
I am using Mozilla, but tested it on IE 6 under Win2k and no flickering occurs when the cache is set to auto. However I prefer using every time check, so it’s less useful for this option (doesn’t look good).
Regardless of this IE bug, this article is way to go! Thanks for sharing your tips.
Copy & paste the code below to embed this comment.
Michaël Guitton
Congratulations Doug for refining the sliding doors even further; however I’d like to print those 2 articles for back reference w/o the menubar and sidebar widgets.
A shame that ALA doesn’t have a print style sheet ready yet.
Very nice! I’ve been experimenting with tabs too and this will certainly come in handy. One caveat I’ve noticed though, is when you have a large tab row (try making the fonts extremely large in one of the examples). Depending on the browser, the tabs are then stacked in different rows or wider then the content.
The only way around that seems to be limiting the width of the tab row to the width of the content below it, which may not always be possible.
Copy & paste the code below to embed this comment.
std
Nice article, congratulation.
While trying out with IE6/XP (Version:6.0.2800.1106.xpsp2.030422-1633) the example 8a functioned perfectly. However, with the examples 9 to 10a was not to see any hover effect, up to the changing of the font color.
Wow, I guess we’ve found a really wierd bug in IE6/XP. I tried it with another browser of the exact same version (6.0.2800.1106.xpsp2.030422-1633), and the flicker did not occur. The browser’s cache setting is set to “Automatically”. Maybe it has something to do with a plugin. I’ll test it later when I get home. Here’s a list of my plugins:
-Google Searchbar (the newest one)
-Download Accelerator Plus (toolbar not showing)
-Yahoo! Companion (newest version)
-Some XML/XSLT extension I downloaded of the net
For other people with the flicker, what plugins do you have?
Great follow-up article, can’t wait until I see someone like amazon use these techniques.
Anyway, I was working on a site (http://www.axonodesign.com/) using pixy’s rollover effect and had the flicker problem still occur after changing my settings in IE6. The problem however was on the Apache server I was using still causing it to flicker. What I did was for Apache servers 1.3.6 and later. I use these lines in the into the httpd.conf or .htaccess file. to disable Vary headers
for the IE browser
I just wanted to note a variation on the current state that may be useful to some.
Here, since we regularly use includes for our navs (for consistency) it isn’t possible to just class an <li> as current… each page would need it’s own nav.
To get around this, we class the <body> of each page instead, then reference the different styles thusly…
body.home ul.nav{
}
or
body.aboutus ul.nav{
}
Works like a charm, and only requires one markup of the list.
Hmm… I uploaded to my test (friend’s) server, and the fix isn’t working. I put the exact thing you wrote in the .htaccess files for those directories. Maybe it’s just my machine. Please try these:
http://www.treespasm.com/rajeev/tabs/v1/ex10a.html
http://www.treespasm.com/rajeev/tabs/v2/v2.html
Does it work for other people?
Copy & paste the code below to embed this comment.
Mark Shiel
I’m using IE 6 on IE with all patches too. Matching the version numbers with those others with problems. Plugin wise i don’t have the same, mainly IE spell and flashget.
Tested on machine at work. WinME with IE 6 works fine, tested on our XP machine and it does not!
Sorry to intrude yet again on the same subject, but my slow brain is starting to understand.
If you omit the IE5/Mac hack in the code and you insert both the display:block and float:left into the css declaration for the a-tag and the li-tag, does that only cause a problem in Opera 7, or do other browsers encounter serious problems as well?
I have tried to understand what is written about the float property on the W3C website and googled around a bit, but I cannot detect if a float in a float in a float—starting to sound like nested tables—is not permitted theoretically.
The upside of all this: a lot of people are working with the concepts of this article right now and for that I have to say that this seems to be the most inspiring ALA article since the article about ALA version 2.
Copy & paste the code below to embed this comment.
Gilles C
… on my PC running Windows ME.
No blinking noticed.
Maybe XP has something to do with that.
I love this article on Tabs. I’ll draw a different model of Tab (a slanted one) and then will try it with a Web Page I’m working on.
I’ve been trying to find a nice CSS Tab to use for quite a while, and if it’s working as well as it looks, and with most Browsers, I will adopt it…
Thanks for coming up with it.
Oh, and what I really need is a system with Subnav Tabs, like this one here at http://www.homelesspixel.de/tabs/tabs.html, which was my favorite until now.
Thanks for the great article! We are now using the tabs on our site, which launches tomorrow.
A quick thought from a usability perspective – the current tab shouldn’t really be a link since the link will just take the user back to the current page. We solved the problem by still using an anchor, but not specifying an href for it:
Great article. I was thinking that it would be nice if, say, list-o-matic was able to take the concepts outlined here and distill them into a 15-steps (or however many)tutorial, without all the extra stuff that Dave throws in that might scare some people off.
Copy & paste the code below to embed this comment.
Tanny O'Haley
I’m wondering what a screen reader would do with the <menu> tag. Do you know why the <ul> tag has been used for menus instead of the <menu> tag? Wonderful article, thank you this and the additional articles you have on your web site.
Copy & paste the code below to embed this comment.
Tanny O'Haley
Works fine with IE 6 and XP with all the patches from MS. No flicker and really beautiful. I don’t mind the extra hack for IE, it’s part of programming. Everything can’t be perfect as much as we would want it to be.
Copy & paste the code below to embed this comment.
Kwan
I’m having flicker problems here too. I haven’t been to one site that’s been posted thus far in the discussion of this article that uses this technique (or any variation of it) that displays the rollovers without flickering.
Nevertheless, great article. Let’s see if we can figure out this IE6/WinXP bug though.
I thought that CSS was originally created in order to make our lives easier when it comes to designing effective web sites. However, I get the impression that things are just getting more and more complicated. Out of hand, really. These kind of gymnastics need to be built into the technology as integral elements, not as bits and pieces which in the end could capsize the ship.
When I tried to apply the fix given to my site’s menubar, Moz Firebird .7.0 on Win98 didn’t pickup the > selector reapplied width. The example works just fine so it’s something about how I adapted it to fit my code. IUf anyone has a few minutes… Thank you:
ul#menu li
{
float:left;
font-size: 140%;
margin:0;
padding:0;
}
ul#menu a
{
width:.1em;
float:left;
display:block;
padding:0;
margin: 0 .125em;
font-weight: bold;
text-decoration: none;
}
ul#menu>a {width:auto;}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
ul#menu a {float:none;}
/* End IE5-Mac hack */
ul#menu a span
{
display:block;
margin:0;
padding:5px 15px 4px;
}
Copy & paste the code below to embed this comment.
Gilles C
Super!
Here is to give you an idea of how I want to use it.
http://www.gtechblues.com/gtblues2.html
It’s far from being finished, I just patched your tabs with what I was using so far to see if I could use your idea with a submenu. I took out the topnav tabs and replaced them with yours and bingo, it’s still working the way I want.
At least now I know that I can put some more time on it to get a page with a better look… and a cleaner source without extra stuff.
Copy & paste the code below to embed this comment.
David Hunt
It’s an interesting technique and a good tutorial. The problem is that if the window isn’t wide enough for the tabs, they wrap downwards. In my opinion, it looks unprofessional. It’s can be more of an issue when it occurs in the user interface of a web application. If you have a solution to that problem that doesn’t involve hard-coded widths, I’d love to see it.
Copy & paste the code below to embed this comment.
Paul Bellamy
I’ve been trying to implement this code to work from an external stylesheet on IE5.2 Mac OSX. It works in every single browser I’ve got on both PC and Mac (Opera, Mozilla, Safari etc) except ie5.2 – it does work when I place the stylesheet in the XHTML document, but as soon as I try to refer to it externally (either as a LINKed file or as an @import) the formatting breaks. Some of it gets through (colours, no bullets on the list) but other than that it’s still formatted like a list, and the background images are ranged over to the other side of the screen and displayed in all their 400px wide glory.
Anyone else experienced this truly frustrating phenomena? I don’t want to have loads of css info in the headers of all my documents, and definitely don’t want to do any browser checking.
Copy & paste the code below to embed this comment.
brett
I’m getting the flicker effect as well, regardless of browser cache settings.
Based on the number of people reporting this issue on configurations that are very common (IE 6, win2k, winxp), i’d be concerned about using this technique in production just yet.
After a week and a half of testing this on every machine I could find—a mix of 98/2k/XP machines, some at various cafes, friends parents’ houses, public terminals, and even some slow-rendering copies of Virtual PC (some on broadband, at least 4 on dial-up)—I couldn’t replicate any problems of background-image flickering. And I really tried. I looked everywhere I could. As long as IE/Win was left at the default cache setting (“Automatically”), with a reasonable amount of disk space reserved for temp files, the images held completely steady as many times as I moused over them.
All of the machines tested (15-20) were standard-issue real-world machines, usually with default settings left in place. Outside of un unknown browser bug we haven’t yet uncovered, I supsect some of the development environments used by more experienced ALA readers may have just enough customized to prevent standard image caching.
Either that, or could somehow be a web server setting. I’ve seen some blogs on Blogger’s blogspot domain where background images applied to anchors flicker every single time. When files were moved to another server, they were fine (with same browser settings).
If anyone can figure out what the oddity is that’s causing a few people to see image flickering (besides the wrong browser setting), we’d appreciate it. Thanks for the feedback.
Copy & paste the code below to embed this comment.
Dan
I’ve been wondering this for a while now… what’s the deal with the three digit colors in the style sheets? For instance, in this article, the author has this in his style sheet (I took the unnecessary attributes out):
Well, for some proof of the bug’s existance, I’ve captured screenshots of the flicker (very hard to do, only does it for a millisecond on broadband) and the hover state of the tabs. I believe it’s not been metioned, but the tabs don’t change backgrounds (move the background image), but just change text color. Here’s some images. Shure hope this can be fixed, because it sure looks great in Mozilla!
Note to everyone, in case it wasn’t clear: Example 8a is the only version which includes extra elements to get the hover change working in IE.
After Example 8a, I dropped the extra span intentionally and reverted to the cleaner version—so there isn’t any hover effect for Ex. 9 and 10 in IE, other than the text color. If you want the hover working in IE, see Example 8a, and its brief mention in the article text.
I’m already using it and LOVING it. Now if I can just get my H# tags to work right! CSS has changed my life. I’m Doug Wray and I’m a web developer. (/goofy music)
Copy & paste the code below to embed this comment.
askinya_xoxlitude
The whole concept is looking good,
but why use a single image, when it might cause problems?
As to me 2 images(normal/hover) are easier
to work with, especially when you need to develop variations.Of course you dont need a preloader, just put the over image into
a hidden layer on top of the page.
I’ve used some of this CSS code in another project (not tabs), and stumbled on a problem with IE/Win region fix.
If the name has more than one word (try Our products instead of Products), that tab item will break into two lines (to be precise number-of-words lines).
Solution is to code it like this:
*html #header a {
width: .1em;
white-space: nowrap;
}
This works in IE 5.5 and 6, but not in IE 5 which doesn’t support white-space property. So, you can either neglect that, or you can make width: 8em or some other possible value.
Or you can ignore it completly if you have high-enough background images.
Thanks to Tantek, IE 5.x hacks can be placed to separate file to deminish the updating problem.
Copy & paste the code below to embed this comment.
Haunani
Hello Doug, Thank you for this wonderful tutorial, I’ve learned so much. I noticed the difference in the examples given for 8a and 9 and 10.
so I’m am trying to incorporate both examples of the WinIE hover fix to the targetted tab via the Id.
So far..I’m close..but it’s tricky and I’m still unsuccessful. It seems that the targeted tab code gets wiggy with the rollover code.
I have the rollover code working, but the target tab ends up being the images reversed in color and orientation. I’m thinking the span tag has something to do with it.
I wondered if you have solved this and can offer a hint. I’ve enjoyed playing with this code and love the brevity of it.
Haunani, is this a fix for the IE6/XP problem or your own personal brew? If it is the fix, please post the complete source! (example number edited, CSS changed, markup changed)
In ex: 8a, after having shifted styles around, Doug is instructing the header list items to display inline and the header anchors to float left. If the list items are already instructed to display inline, why is it necessary to float the anchors contained in the list items to the left? If you don’t do this, the layout falls apart, but I can’t figure out why. I’m sure there is a simple explanation, but somehow I’m not grasping it.
Copy & paste the code below to embed this comment.
Greg
I’ve controlled the multi-word tabs from wrapping with white-space:nowrap; but the menu I have is wider than the page in low res (800×600) and the list items wrap. white-space:nowrap; doesn’t seem to work if applied to #header or #header ul. Any ideas?
Copy & paste the code below to embed this comment.
Jerry Cain
I used the sliding door concept at eldoradosurgicenter.com but now the customer wants the tabs and subnavbar to stay at the top when scrolling. Obviously, this can easily be done using frames. However, how does one call up the “Current” set of tab images when using frames? i.e., when a user clicks a tab, the tab that was clicked is highlighted. How do you achieve that with the sliding door concept in frames?
Copy & paste the code below to embed this comment.
Jerry Cain
When I implemented the sliding door concept at eldoradosurgicenter.com, the navbar div (the one with the tabs) was superimposed on the following div which is the subnavbar when using Mozilla Firebird, Konqueror, and Galeon. This does’t happen with IE 6.
In order to get around this (where one div overlaps the following div), I had to place the tabs bar and the subnavbar into a table. Obviously, I don’t like that. How can I get the browsers in Linux to display one div right after the a previous one without overlapping? Btw, this only seems to occur when there are floats involved.
Truly informative article!! But with all the issues raised (some solved, some not) couldn’t someone compile the source code + fixes somewhere so it’s easy to copy n’paste?? Just for the sake of not having to go through the 2 articles + 7 pages of comments… :/
Hope this XP bug gets sorted. That is the only thing that makes me reluctant to use it for a client’s site yet.
Wow, this is really weird. When I started up my browser, the flicker stoped happening. Maybe this is one of those “automatic IE updates” (I read they existed on quirksmode.com, but they haven’t been proved to exist). Anyone else experiencing this?
Well, there are two different methods for centering a block in CSS. Since i’m not the expert that came up with them, here are the original sites:
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
Of course the second one only works if you set a width, but still check it out anyway :).
Copy & paste the code below to embed this comment.
Banned in Boston
First of all, my compliments: both articles are clearly written, have great examples, demonstrate (highly!) impressive CSS acumen and the resulting tabs look great.
That said (and I know I’m going to get flamed for this, but so be it…), I have to take strong exception to the section of (Part II) entitled “No Current Tab”. You just CAN’T have a set of tabs without one of them being selected. Period. Full stop. No exceptions—don’t do it! (And yes, I have seen countless examples (for example, the old Yahoo) where people have attempted to do this anyway.)
To clarify, what I mean by “CAN’T” is not that it is technically impossible (of course it is possible, as Example 7 in the article demonstrates), it is just really, really unwise. So, I’m saying “can’t” in the sense that you “can’t” let your two year old play with a lighter or matches.
Look, these CSS-generated ‘tabs’ (and the similar GUI widgets that they are modeled on) are actually just visual metaphores for a real (physical) set of tabs . . . like you’d see on manila folders and on file cabinet hanging folders. Now with the physical folders, one (and only one) folder has to be in front. You can’t have two (or more) of them simultaneously be front-most.
Right about now some may be thinking: hey, we’re in the virtual (not physical) world here; why don’t we break free of the restraints? Well, not only does having “no current tab” break the metaphore, it causes serious usability problems.
If you don’t have one of the tabs selected (current), then the user does not know where they are in reference to the (implied or apparent) navigation that the set of tabs supports. And if they are unsure as to where they are now, they will also have a (much) more difficult time deciding where to go next. Now if your navigation is simple and the navigation paths are clearly labeled (again, think of Yahoo), then the latter difficulty is lessened (but is still there); for unfamiliar site/applications; poorly labeled paths; or branching navigation flows the difficulty will be worse.
For completness’ sake, I should also mention that using tab sets for open-ended navigation (like Yahoo does) or for “a registration process” (as the article mentions) or any other process for that matter, is just a bad idea in the first place. If their usage is confined to just using them as they were originally intended (i.e. to space-multiplex a lot of GUI elements in an overall fixed-size area—for example: for property sheets) then these problems can be avoided.
Copy & paste the code below to embed this comment.
Justin
I ran through this excellent tutorial and am excited to try out the techniques discussed.
I thought I’d mention that IE will never cease to amaze. Throughout the article, I noticed the clickable region problems (using IE 5.5). Throughout Part 1 and including Example 7 in Part 2, my clickable region was faulty. Then in Example 8 my clickable region was fixed to include the entire tab. However in the final version (Example 9), my clickable region returned to the smaller region: the entire tab, but missing the left image area of the tab.
Figured I’d point this out since lots of people are still using IE 5.x.
Copy & paste the code below to embed this comment.
Michael Leditschke
This design seems to assume that the tab content will come after all the menu items. Changing tabs involves a server round trip to update the tab content.
Is it possible to combine some of the techniques used in the suckerfish article with this article, plus a little javascript magic, to avoid this round-trip?
My markup might look like
<ul>
<li>Tab 1 title
<div>
…. content of tab 1
</div>
</li>
<li>Tab 2 title
<div>
…. content of tab 2
</div>
</li>
</ul>
I can see how I can use display:none to hide the content of the inactive tabs, but how do I get the div content under the active tab to appear below ALL the tabs? I’d like the content to somehow “float” beneath all the tabs.
What about using the ‘behavior’ property in IE and creating an HTC file to access the background position of the parentNode instead of adding extra span tags to accomplish the same thing? And then in doing so, you could remove the box model hack and reset the height and width in the HTC. This certainly keeps your HTML simple, although, at the cost of a more complicated implementation of having to create an HTC file.
Just use a single image of both complete tabs.The way the background images are positioned and overlapped, there’s no need to use seperate images for the left and right. This saves an image request and any worry that the two slices optimized my end up with slightly unmatched palettes.
Yes! I’ve figured out the source of the IE6/XP bug! When I was scouring the settings of the XP machine that worked, I noticed that the cache size was set to a small amount (20MB). My cache on my home machine (which displayed the bug) had a cache size of 895MB (by default). When I changed it to 20MB, everything started working. It seems that with a larger cache size the browser does not check for newer versions of files at the right time. Well, at least we know it isn’t a code error!
I also moved to tableless layouts as most of you did. but there’s still one situation where I use tables. when I need to keep certain graphic or text element at the bottom of the page (something like here http://www.mldgroup.com). How should I resolve this with div’s?
Copy & paste the code below to embed this comment.
Robin Patt-Corner
This works flawlessly! However we have a need to place an image of a line (not a line that can be mocked up by a border) at the bottom of the tabs and hence in the BG
Challenging, even when you adjust the padding to the depth of the imaged line, because the sliding left door wants very badly to be in front (the whole point, right!) and gets in front of the bg image no matter how you pad it.
So … we need to either bring the BG forward or slide the left door behind the bg but still in front of the right door.
Copy & paste the code below to embed this comment.
Drew
Okay. I’m not intelligent enough to add Step 8a’s IE fix to Step 10a. Everytime I try weird stuff happens. I spent an hour on it last night and just couldn’t work it out. Sad, I know. Could someone please help me or post the answer outright?
I got rid of the flicker by clearing my cache. Works fine now. The ability of the tabs to resize is awesome.
But, given this flicker problem (caused by the browser, not the code), would any professional web designers implement this technique on a highly visible site? I’m especially interested if Doug would feel secure using it on a site such as www.adaptivepath.com.
I am going to take a new approach for my Japanese web site.
The sliding door is a great article and definitely I want to use on my pages.
I tested all the examples (example 1-10) and I found a problem with Japanese character environment. If I reduce browser’s width, it start character wrap within a tab, further reducing window width a tab itself wraps.
This does not occur in alphabet characters.
Is there any fix for this?
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span { float: none; }
/* End IE5-Mac hack */
#header a:hover span {
color: #333;
}
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
background-position: 0 -150px;
border-width: 0;
}
#home #nav-home a span, #news #nav-news a span,
#products #nav-products a span, #about #nav-about a span,
#contact #nav-contact a span {
background-position: 100% -150px;
padding-bottom: 5px;
color: #333;
}
It works fine for these browsers:
– Internet Explorer 5.01 SP2
– Internet Explorer 5.5 SP2
– Internet Explorer 6.0 SP2
– MSN Explorer 6.0
– Mozilla 1.5
– Mozilla Firebird 0.7
– Netscape Navigator 7.1
– Opera 7.11
Copy & paste the code below to embed this comment.
rz
i’ve taken liberally from doug’s techniques to add drop downs to a very similar menu layout. i’ve got a working solution in the latest gecko browsers, ie 5+, opera 7.11 (windows). on the mac side it works in safari and gecko browsers, but goes absolutely wacko in ie 5.2. view it here – http://rzand.homedns.org:8080/main/home
btw, this layout seems to be more browser friendly than the brainjar example, another demo i have borrowed heavily from. anyone seen this before and have any ideas?
btw, i’m sniffing the browser on the server side with php and including local styles that override those in the stylesheet rather than using css hacks.
Copy & paste the code below to embed this comment.
Charles
Rz, do you think it will help win Netscape 4 users over to your viewpoint to lecture them about what browser they are using?
Actually, your site seems to work fine in Netscape 4 with JavaScript off. I just don’t see your interface work.
And that’s actually the great thing about the technique in this article. If you have a modern browser, you see the cool stuff. If you have Netscape 4, the site still works.
(Well, except for any links to a mid-page id, but aside from that.)
Can’t upgrade to Netscape 6 until I buy a new Mac (requires OS X, which doesn’t run on an 8600), iCab crashes too much on my unit, and I’d rather not use IE, even if it’s IE/Mac.
Call me stubborn, but it’s my attention you’re trying to get, and I’m darned if I’m going to buy a new computer just to visit your site.
Copy & paste the code below to embed this comment.
Benjamin
First off – yes, this is a great technique, and a very easy-to understand tute.
I’ve been using these tabs to allow navigation through a one-way process (specifically an online ordering process) – the user can see where they are in the process, and click back to see or change previous steps/tabs. However, the user shouldn’t be able to click forward more than one tab at a time (if you’re one step one, you can’t jump straight to step 4)
So – how can we create a tab which is disabled, or greyed out? If we remove the anchor element, we no longer have a second ‘sliding door’ to apply the style to…
anyone got any ideas? preferably without introducing extra spans…fanks!
Copy & paste the code below to embed this comment.
squareman
Actually, it isn’t a broken or unusable interface. There are other homologous tab examples: cookbooks, reference books, VW Owner’s Manuals. In these examples, often you’ll see tabs for the referential content; but they are all still have preceding material before the first tab: cover, title page, contents, introductions.
Excellent stuff but this does not work in IE 5/Mac whereas it works perfectly in IE5.x+ for PC and also NS7 for both PC and Mac. Is there any hack to make it work for IE/Mac?
Copy & paste the code below to embed this comment.
petr
Hi, I would like to ask if there is any posiblity to center <li> “tabs” to the header div. I don’t want to center the header div but only ul and li. The reason is because I will dynamicly change amount of tabs and I can’t center it to the page right now without changing header width. :-(
For beter understandig you can look at
http://www.daend.cz/FTP/WEB-templates/01/
Right now it looks like tabs are + – centered. But if I remove one from the list it is not centered in the header div with black border.
Thanks for your help.
Copy & paste the code below to embed this comment.
Chris
Hello everyone and many thanks for the article !
Is there a way to make the tabs to evenly distribute themselfs when resizing the window ?
Either by reduce/enlarge the gaps or by changing the tabs’ width.
101 Reader Comments
Back to the Articleelan
IE6/XP
Same 6.0.2800.1106.xpsp2.030422-1633 version as reported above, same flickery behavior.
Stephen Taylor
An excellent experiment in the power of css.
Martijn ten Napel
I wonder if the IE5/Mac hack is needed. If you add a display:block to the li definition, IE5/Mac lines up nicecly.
To see this I have modified the example7 file:
http://www.xs4all.nl/~mosm/Blogtest/slidingdoors_alternative.html
Any reason not to do this?
Andreas
Martijn, I just had a look at your example with Opera 7.11/linux and all tabs are sitting on the left on top of each other without any background grafics.
Andreas
Andreas
Both articles are very inspiring and very succinctly written. I enjoyed reading them and took home a lot of new insights. Thanks, Doug.
Andreas
Martijn ten Napel
Andreas: I have checked on Opera 6.03 on my Mac and a fresh copy of Opera 7 on Win98, but they both make a mess of both the CSS in the article and my own example.
Tweaking a local copy of a HTML file and a stylesheet and reloading in Opera 7 did not show any difference, even not when emptying the cache and restarting Opera.
Even more interesting, this website (A List Apart) uses the same technique for its top menu, but not the IE/Mac hack and it still works.
Can anyone shed a light on this? I like my stylesheets with as less hacks as possible and it seems there are more roads leading to Rome when using list-items for a menu and marking them up with CSS to align them horizontally.
dusoft
I am using Mozilla, but tested it on IE 6 under Win2k and no flickering occurs when the cache is set to auto. However I prefer using every time check, so it’s less useful for this option (doesn’t look good).
Regardless of this IE bug, this article is way to go! Thanks for sharing your tips.
Michaël Guitton
Congratulations Doug for refining the sliding doors even further; however I’d like to print those 2 articles for back reference w/o the menubar and sidebar widgets.
A shame that ALA doesn’t have a print style sheet ready yet.
Jeroen Coumans
Very nice! I’ve been experimenting with tabs too and this will certainly come in handy. One caveat I’ve noticed though, is when you have a large tab row (try making the fonts extremely large in one of the examples). Depending on the browser, the tabs are then stacked in different rows or wider then the content.
The only way around that seems to be limiting the width of the tab row to the width of the content below it, which may not always be possible.
std
Nice article, congratulation.
While trying out with IE6/XP (Version:6.0.2800.1106.xpsp2.030422-1633) the example 8a functioned perfectly. However, with the examples 9 to 10a was not to see any hover effect, up to the changing of the font color.
std
Sorry, didn’t realize that only example 8a has the additional spans.
Rajeev Sharma
Wow, I guess we’ve found a really wierd bug in IE6/XP. I tried it with another browser of the exact same version (6.0.2800.1106.xpsp2.030422-1633), and the flicker did not occur. The browser’s cache setting is set to “Automatically”. Maybe it has something to do with a plugin. I’ll test it later when I get home. Here’s a list of my plugins:
-Google Searchbar (the newest one)
-Download Accelerator Plus (toolbar not showing)
-Yahoo! Companion (newest version)
-Some XML/XSLT extension I downloaded of the net
For other people with the flicker, what plugins do you have?
Blakems
Great follow-up article, can’t wait until I see someone like amazon use these techniques.
Anyway, I was working on a site (http://www.axonodesign.com/) using pixy’s rollover effect and had the flicker problem still occur after changing my settings in IE6. The problem however was on the Apache server I was using still causing it to flicker. What I did was for Apache servers 1.3.6 and later. I use these lines in the into the httpd.conf or .htaccess file. to disable Vary headers
for the IE browser
BrowserMatch “MSIE” brokenvary=1
BrowserMatch “Mozilla/4.[0-9]{2}” brokenvary=1
BrowserMatch “Opera” !brokenvary
SetEnvIf brokenvary 1 force-no-vary
It worked after that with no flicker.
Emilio Vanni
Blakems said: “can’t wait until I see someone like amazon use these techniques”
I think someone else will renew it’s tab method first
;-)
btw, outstanding article: thanks to the ALA staff!
Jay Jones (JabezStone)
Awesome article, Doug.
I just wanted to note a variation on the current state that may be useful to some.
Here, since we regularly use includes for our navs (for consistency) it isn’t possible to just class an <li> as current… each page would need it’s own nav.
To get around this, we class the <body> of each page instead, then reference the different styles thusly…
body.home ul.nav{
}
or
body.aboutus ul.nav{
}
Works like a charm, and only requires one markup of the list.
Anne
If there are any spaces around the child selector, IE5.0 (Windows) will apply the style rule, so:
li > a{color:green;} /* green in IE5.0 */
li>a{color:green;} /* default in IE5.0 */
For the rest, great article!
Blakems
Oh, I forgot, we will see this method used on apple.com first, before amazon. ;)
Rajeev Sharma
I’ll try that on my Apache (real) server. However, for the IIS server running on my home machine, is there any way to to do this? Global.asa maybe?
Rajeev Sharma
Hmm… I uploaded to my test (friend’s) server, and the fix isn’t working. I put the exact thing you wrote in the .htaccess files for those directories. Maybe it’s just my machine. Please try these:
http://www.treespasm.com/rajeev/tabs/v1/ex10a.html
http://www.treespasm.com/rajeev/tabs/v2/v2.html
Does it work for other people?
Mark Shiel
I’m using IE 6 on IE with all patches too. Matching the version numbers with those others with problems. Plugin wise i don’t have the same, mainly IE spell and flashget.
Tested on machine at work. WinME with IE 6 works fine, tested on our XP machine and it does not!
Martijn ten Napel
Sorry to intrude yet again on the same subject, but my slow brain is starting to understand.
If you omit the IE5/Mac hack in the code and you insert both the display:block and float:left into the css declaration for the a-tag and the li-tag, does that only cause a problem in Opera 7, or do other browsers encounter serious problems as well?
I have tried to understand what is written about the float property on the W3C website and googled around a bit, but I cannot detect if a float in a float in a float—starting to sound like nested tables—is not permitted theoretically.
The upside of all this: a lot of people are working with the concepts of this article right now and for that I have to say that this seems to be the most inspiring ALA article since the article about ALA version 2.
florian
The Tab is blinking with me too XP IE6 :/ looks awful, but i would love the article if it worked.
Gilles C
… on my PC running Windows ME.
No blinking noticed.
Maybe XP has something to do with that.
I love this article on Tabs. I’ll draw a different model of Tab (a slanted one) and then will try it with a Web Page I’m working on.
I’ve been trying to find a nice CSS Tab to use for quite a while, and if it’s working as well as it looks, and with most Browsers, I will adopt it…
Thanks for coming up with it.
Oh, and what I really need is a system with Subnav Tabs, like this one here at http://www.homelesspixel.de/tabs/tabs.html, which was my favorite until now.
Gilles C
Jay Goldman
Thanks for the great article! We are now using the tabs on our site, which launches tomorrow.
A quick thought from a usability perspective – the current tab shouldn’t really be a link since the link will just take the user back to the current page. We solved the problem by still using an anchor, but not specifying an href for it:
<li><a><span>Current Tab</span></a></li>
Works everywhere and still validates.
Jay
Christian
Great article. I was thinking that it would be nice if, say, list-o-matic was able to take the concepts outlined here and distill them into a 15-steps (or however many)tutorial, without all the extra stuff that Dave throws in that might scare some people off.
Now that would be truly useful!
verdon
great article here…
re:
http://www.homelesspixel.de/tabs/tabs.html
On another note, the link referenced above is a bit of a mess in Safari
Tanny O'Haley
I’m wondering what a screen reader would do with the <menu> tag. Do you know why the <ul> tag has been used for menus instead of the <menu> tag? Wonderful article, thank you this and the additional articles you have on your web site.
Matt
Yep, broken as hell here on Win2000/IE6 too. No rollovers, tabs disappear.
Tanny O'Haley
Works fine with IE 6 and XP with all the patches from MS. No flicker and really beautiful. I don’t mind the extra hack for IE, it’s part of programming. Everything can’t be perfect as much as we would want it to be.
Kwan
I’m having flicker problems here too. I haven’t been to one site that’s been posted thus far in the discussion of this article that uses this technique (or any variation of it) that displays the rollovers without flickering.
Nevertheless, great article. Let’s see if we can figure out this IE6/WinXP bug though.
jlc
http://www.homelesspixel.de/tabs/tabs.html
– looks strange in IE5.1/Mac as well.
Great article.
Kiffin Gish
I thought that CSS was originally created in order to make our lives easier when it comes to designing effective web sites. However, I get the impression that things are just getting more and more complicated. Out of hand, really. These kind of gymnastics need to be built into the technology as integral elements, not as bits and pieces which in the end could capsize the ship.
Brad
Doesn’t work in IE5/Mac either.
Crys
When I tried to apply the fix given to my site’s menubar, Moz Firebird .7.0 on Win98 didn’t pickup the > selector reapplied width. The example works just fine so it’s something about how I adapted it to fit my code. IUf anyone has a few minutes… Thank you:
ul#menu li
{
float:left;
font-size: 140%;
margin:0;
padding:0;
}
ul#menu a
{
width:.1em;
float:left;
display:block;
padding:0;
margin: 0 .125em;
font-weight: bold;
text-decoration: none;
}
ul#menu>a {width:auto;}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
ul#menu a {float:none;}
/* End IE5-Mac hack */
ul#menu a span
{
display:block;
margin:0;
padding:5px 15px 4px;
}
<ul id=“menu”>
<li>[url=”/fiction/“id=“this”><span>Home</span></a></li>
<li><a ]<span>Fiction</span>[/url]</li>
<li><span>Muse Blog</span></li>
<li><span>Maps</span></li>
<li><span>Artwork</span></li>
<li><span>Links</span></li>
<li><span>Search</span></li>
</ul>
Gilles C
Super!
Here is to give you an idea of how I want to use it.
http://www.gtechblues.com/gtblues2.html
It’s far from being finished, I just patched your tabs with what I was using so far to see if I could use your idea with a submenu. I took out the topnav tabs and replaced them with yours and bingo, it’s still working the way I want.
At least now I know that I can put some more time on it to get a page with a better look… and a cleaner source without extra stuff.
Thanks.
Martijn ten Napel
re : http://www.alistapart.com/discuss/slidingdoors2/4/#c5333
I don’t know what a screen reader would do with the menu tag, but reading http://www.htmlhelp.org/reference/html40/lists/menu.html
is says:
“MENU is deprecated in HTML 4.0 in favor of UL.”
David Hunt
It’s an interesting technique and a good tutorial. The problem is that if the window isn’t wide enough for the tabs, they wrap downwards. In my opinion, it looks unprofessional. It’s can be more of an issue when it occurs in the user interface of a web application. If you have a solution to that problem that doesn’t involve hard-coded widths, I’d love to see it.
Paul Bellamy
I’ve been trying to implement this code to work from an external stylesheet on IE5.2 Mac OSX. It works in every single browser I’ve got on both PC and Mac (Opera, Mozilla, Safari etc) except ie5.2 – it does work when I place the stylesheet in the XHTML document, but as soon as I try to refer to it externally (either as a LINKed file or as an @import) the formatting breaks. Some of it gets through (colours, no bullets on the list) but other than that it’s still formatted like a list, and the background images are ranged over to the other side of the screen and displayed in all their 400px wide glory.
Anyone else experienced this truly frustrating phenomena? I don’t want to have loads of css info in the headers of all my documents, and definitely don’t want to do any browser checking.
brett
I’m getting the flicker effect as well, regardless of browser cache settings.
Based on the number of people reporting this issue on configurations that are very common (IE 6, win2k, winxp), i’d be concerned about using this technique in production just yet.
Douglas Bowman
After a week and a half of testing this on every machine I could find—a mix of 98/2k/XP machines, some at various cafes, friends parents’ houses, public terminals, and even some slow-rendering copies of Virtual PC (some on broadband, at least 4 on dial-up)—I couldn’t replicate any problems of background-image flickering. And I really tried. I looked everywhere I could. As long as IE/Win was left at the default cache setting (“Automatically”), with a reasonable amount of disk space reserved for temp files, the images held completely steady as many times as I moused over them.
All of the machines tested (15-20) were standard-issue real-world machines, usually with default settings left in place. Outside of un unknown browser bug we haven’t yet uncovered, I supsect some of the development environments used by more experienced ALA readers may have just enough customized to prevent standard image caching.
Either that, or could somehow be a web server setting. I’ve seen some blogs on Blogger’s blogspot domain where background images applied to anchors flicker every single time. When files were moved to another server, they were fine (with same browser settings).
If anyone can figure out what the oddity is that’s causing a few people to see image flickering (besides the wrong browser setting), we’d appreciate it. Thanks for the feedback.
Eric Delord
May I suggest using the <label> tag for the extra markup as in:
<li><label>Links</label></li>
-
Wonderful article!
Dan
I’ve been wondering this for a while now… what’s the deal with the three digit colors in the style sheets? For instance, in this article, the author has this in his style sheet (I took the unnecessary attributes out):
#header #current a{
color: #333;
}
Is this correct? Why not #333333?
Rajeev Sharma
Well, for some proof of the bug’s existance, I’ve captured screenshots of the flicker (very hard to do, only does it for a millisecond on broadband) and the hover state of the tabs. I believe it’s not been metioned, but the tabs don’t change backgrounds (move the background image), but just change text color. Here’s some images. Shure hope this can be fixed, because it sure looks great in Mozilla!
http://www.treespasm.com/rajeev/tabs/flicker.png
http://www.treespasm.com/rajeev/tabs/hover.png
Douglas Bowman
Note to everyone, in case it wasn’t clear: Example 8a is the only version which includes extra elements to get the hover change working in IE.
After Example 8a, I dropped the extra span intentionally and reverted to the cleaner version—so there isn’t any hover effect for Ex. 9 and 10 in IE, other than the text color. If you want the hover working in IE, see Example 8a, and its brief mention in the article text.
Me
Doesnt work in Safari, though.
( But nice anyway ! )
M. Douglas Wray
I’m already using it and LOVING it. Now if I can just get my H# tags to work right! CSS has changed my life. I’m Doug Wray and I’m a web developer. (/goofy music)
askinya_xoxlitude
The whole concept is looking good,
but why use a single image, when it might cause problems?
As to me 2 images(normal/hover) are easier
to work with, especially when you need to develop variations.Of course you dont need a preloader, just put the over image into
a hidden layer on top of the page.
askinya xoxlitude
Aleksandar Vacic
I’ve used some of this CSS code in another project (not tabs), and stumbled on a problem with IE/Win region fix.
If the name has more than one word (try Our products instead of Products), that tab item will break into two lines (to be precise number-of-words lines).
Solution is to code it like this:
*html #header a {
width: .1em;
white-space: nowrap;
}
This works in IE 5.5 and 6, but not in IE 5 which doesn’t support white-space property. So, you can either neglect that, or you can make width: 8em or some other possible value.
Or you can ignore it completly if you have high-enough background images.
Thanks to Tantek, IE 5.x hacks can be placed to separate file to deminish the updating problem.
Aleksandar Vacic
Ahh…I missed the end of the article where Doug notes the same thing.
Sorry for the noise.
Rick Prentice
Loved the tutorial, but it doesn’t work in my mac IE5 or N6.. any suggestions?
Haunani
Hello Doug, Thank you for this wonderful tutorial, I’ve learned so much. I noticed the difference in the examples given for 8a and 9 and 10.
so I’m am trying to incorporate both examples of the WinIE hover fix to the targetted tab via the Id.
So far..I’m close..but it’s tricky and I’m still unsuccessful. It seems that the targeted tab code gets wiggy with the rollover code.
I have the rollover code working, but the target tab ends up being the images reversed in color and orientation. I’m thinking the span tag has something to do with it.
I wondered if you have solved this and can offer a hint. I’ve enjoyed playing with this code and love the brevity of it.
Mahalo – Haunani
Haunani
hi, I figured it out. I added span code to get the functionality working the way I wanted
code:
#home #nav-home,
#news #nav-news,
#products #nav-products,
#about #nav-about,
#contact #nav-contact {
background-position:100% -150px;
border-width:0;
}
#home #nav-home a,
#news #nav-news a,
#products #nav-products a,
#about #nav-about a,
#contact #nav-contact a {
background-position:0% -150px;
color:#333;
}
#home #nav-home a span,
#news #nav-news a span,
#products #nav-products a span,
#about #nav-about a span,
#contact #nav-contact a span{
background-position:100% -150px;
color:#333;
}
Rajeev Sharma
Haunani, is this a fix for the IE6/XP problem or your own personal brew? If it is the fix, please post the complete source! (example number edited, CSS changed, markup changed)
Elliot
In ex: 8a, after having shifted styles around, Doug is instructing the header list items to display inline and the header anchors to float left. If the list items are already instructed to display inline, why is it necessary to float the anchors contained in the list items to the left? If you don’t do this, the layout falls apart, but I can’t figure out why. I’m sure there is a simple explanation, but somehow I’m not grasping it.
Greg
I’ve controlled the multi-word tabs from wrapping with white-space:nowrap; but the menu I have is wider than the page in low res (800×600) and the list items wrap. white-space:nowrap; doesn’t seem to work if applied to #header or #header ul. Any ideas?
Jerry Cain
I used the sliding door concept at eldoradosurgicenter.com but now the customer wants the tabs and subnavbar to stay at the top when scrolling. Obviously, this can easily be done using frames. However, how does one call up the “Current” set of tab images when using frames? i.e., when a user clicks a tab, the tab that was clicked is highlighted. How do you achieve that with the sliding door concept in frames?
Jerry Cain
When I implemented the sliding door concept at eldoradosurgicenter.com, the navbar div (the one with the tabs) was superimposed on the following div which is the subnavbar when using Mozilla Firebird, Konqueror, and Galeon. This does’t happen with IE 6.
In order to get around this (where one div overlaps the following div), I had to place the tabs bar and the subnavbar into a table. Obviously, I don’t like that. How can I get the browsers in Linux to display one div right after the a previous one without overlapping? Btw, this only seems to occur when there are floats involved.
Arni D
Truly informative article!! But with all the issues raised (some solved, some not) couldn’t someone compile the source code + fixes somewhere so it’s easy to copy n’paste?? Just for the sake of not having to go through the 2 articles + 7 pages of comments… :/
Hope this XP bug gets sorted. That is the only thing that makes me reluctant to use it for a client’s site yet.
Pukka
(delete accordingly)
Rajeev Sharma
Wow, this is really weird. When I started up my browser, the flicker stoped happening. Maybe this is one of those “automatic IE updates” (I read they existed on quirksmode.com, but they haven’t been proved to exist). Anyone else experiencing this?
nash esh
No flickering on win98se + ie6.0.2800.1106.
Btw, many great thanks for those two articles.
Bob Easton
Thanks Doug! It’s superb, especially with the niceties added in part II.
What do you recommend as a technique for centering the set of tabs in the viewport? A quick stab at putting text-align:center on the ul didn’t do it.
Rajeev Sharma
Well, there are two different methods for centering a block in CSS. Since i’m not the expert that came up with them, here are the original sites:
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
Of course the second one only works if you set a width, but still check it out anyway :).
Banned in Boston
First of all, my compliments: both articles are clearly written, have great examples, demonstrate (highly!) impressive CSS acumen and the resulting tabs look great.
That said (and I know I’m going to get flamed for this, but so be it…), I have to take strong exception to the section of (Part II) entitled “No Current Tab”. You just CAN’T have a set of tabs without one of them being selected. Period. Full stop. No exceptions—don’t do it! (And yes, I have seen countless examples (for example, the old Yahoo) where people have attempted to do this anyway.)
To clarify, what I mean by “CAN’T” is not that it is technically impossible (of course it is possible, as Example 7 in the article demonstrates), it is just really, really unwise. So, I’m saying “can’t” in the sense that you “can’t” let your two year old play with a lighter or matches.
Look, these CSS-generated ‘tabs’ (and the similar GUI widgets that they are modeled on) are actually just visual metaphores for a real (physical) set of tabs . . . like you’d see on manila folders and on file cabinet hanging folders. Now with the physical folders, one (and only one) folder has to be in front. You can’t have two (or more) of them simultaneously be front-most.
Right about now some may be thinking: hey, we’re in the virtual (not physical) world here; why don’t we break free of the restraints? Well, not only does having “no current tab” break the metaphore, it causes serious usability problems.
If you don’t have one of the tabs selected (current), then the user does not know where they are in reference to the (implied or apparent) navigation that the set of tabs supports. And if they are unsure as to where they are now, they will also have a (much) more difficult time deciding where to go next. Now if your navigation is simple and the navigation paths are clearly labeled (again, think of Yahoo), then the latter difficulty is lessened (but is still there); for unfamiliar site/applications; poorly labeled paths; or branching navigation flows the difficulty will be worse.
For completness’ sake, I should also mention that using tab sets for open-ended navigation (like Yahoo does) or for “a registration process” (as the article mentions) or any other process for that matter, is just a bad idea in the first place. If their usage is confined to just using them as they were originally intended (i.e. to space-multiplex a lot of GUI elements in an overall fixed-size area—for example: for property sheets) then these problems can be avoided.
Thanks for listening;
let the flames begin… ;-)
Justin
I ran through this excellent tutorial and am excited to try out the techniques discussed.
I thought I’d mention that IE will never cease to amaze. Throughout the article, I noticed the clickable region problems (using IE 5.5). Throughout Part 1 and including Example 7 in Part 2, my clickable region was faulty. Then in Example 8 my clickable region was fixed to include the entire tab. However in the final version (Example 9), my clickable region returned to the smaller region: the entire tab, but missing the left image area of the tab.
Figured I’d point this out since lots of people are still using IE 5.x.
Thanks for the great two-part article!
Michael Leditschke
This design seems to assume that the tab content will come after all the menu items. Changing tabs involves a server round trip to update the tab content.
Is it possible to combine some of the techniques used in the suckerfish article with this article, plus a little javascript magic, to avoid this round-trip?
My markup might look like
<ul>
<li>Tab 1 title
<div>
…. content of tab 1
</div>
</li>
<li>Tab 2 title
<div>
…. content of tab 2
</div>
</li>
</ul>
I can see how I can use display:none to hide the content of the inactive tabs, but how do I get the div content under the active tab to appear below ALL the tabs? I’d like the content to somehow “float” beneath all the tabs.
Thanks
Jonathan Snook
What about using the ‘behavior’ property in IE and creating an HTC file to access the background position of the parentNode instead of adding extra span tags to accomplish the same thing? And then in doing so, you could remove the box model hack and reset the height and width in the HTC. This certainly keeps your HTML simple, although, at the cost of a more complicated implementation of having to create an HTC file.
Steve Clay
Just use a single image of both complete tabs.The way the background images are positioned and overlapped, there’s no need to use seperate images for the left and right. This saves an image request and any worry that the two slices optimized my end up with slightly unmatched palettes.
Rajeev Sharma
Yes! I’ve figured out the source of the IE6/XP bug! When I was scouring the settings of the XP machine that worked, I noticed that the cache size was set to a small amount (20MB). My cache on my home machine (which displayed the bug) had a cache size of 895MB (by default). When I changed it to 20MB, everything started working. It seems that with a larger cache size the browser does not check for newer versions of files at the right time. Well, at least we know it isn’t a code error!
wyktor
Hey guys,,
I also moved to tableless layouts as most of you did. but there’s still one situation where I use tables. when I need to keep certain graphic or text element at the bottom of the page (something like here http://www.mldgroup.com). How should I resolve this with div’s?
thanks,,
Gabriel Radic
You could actually use the same image for both the item (e.g. the LI element) and for the link. They will combine just fine.
Chantal Samson
I also had the flicker problem with IE6/W2K. Reducing the cache size to 20MB eliminated the flickering of the tabs.
I’m not sure this resolves anything, since the flicker problem remains unpredictable.
Does anyone know what is the default cache size setting for IE6? Thanks.
Robin Patt-Corner
This works flawlessly! However we have a need to place an image of a line (not a line that can be mocked up by a border) at the bottom of the tabs and hence in the BG
Challenging, even when you adjust the padding to the depth of the imaged line, because the sliding left door wants very badly to be in front (the whole point, right!) and gets in front of the bg image no matter how you pad it.
So … we need to either bring the BG forward or slide the left door behind the bg but still in front of the right door.
Ideas? z-axis?
R.
arnold kim
Here’s an odd one
http://www.chaosmint.com/testcss/test.html
This flickers for mr in Windows IE 6
http://www.alistapart.com/d/slidingdoors2/v1/ex10.html
this does not. Exact same code. thoughts?
arn
Drew
Okay. I’m not intelligent enough to add Step 8a’s IE fix to Step 10a. Everytime I try weird stuff happens. I spent an hour on it last night and just couldn’t work it out. Sad, I know. Could someone please help me or post the answer outright?
David Chatsuthiphan
I got rid of the flicker by clearing my cache. Works fine now. The ability of the tabs to resize is awesome.
But, given this flicker problem (caused by the browser, not the code), would any professional web designers implement this technique on a highly visible site? I’m especially interested if Doug would feel secure using it on a site such as www.adaptivepath.com.
I don’t think I could =/
MCP
If anyone has the full code (up to step 10a) with the IE rollover fix included, I would be grateful if you could post it here.
Hiro Katsumi
I am going to take a new approach for my Japanese web site.
The sliding door is a great article and definitely I want to use on my pages.
I tested all the examples (example 1-10) and I found a problem with Japanese character environment. If I reduce browser’s width, it start character wrap within a tab, further reducing window width a tab itself wraps.
This does not occur in alphabet characters.
Is there any fix for this?
Hiro Katsumi
I forgot to tell one more point.
Tab words of example 10 is complete vertical writing regardless width of windows.
I can send html pages which show the problems if anyone challenges fixing this issue.
Curtney Jacobs
Does anyone have an example of turning the tabs sideways?
_CJ
FataL
Did anyone correct problem with MSN for MAC OS X ? In this browser tabs looks like in Safari (100% width) without hack…
FataL
Did anyone correct problem with MSN for MAC OS X ? In this browser tabs looks like in Safari (100% width) without hack…
MCP
I think that many people had problems incorporating the IE rollover fix into example 10. This is what I came up with:
body {
background: #fff;
margin: 0;
padding: 0;
color: #000;
font: x-small/1.5em Georgia,Serif;
voice-family: “\”}\”“; voice-family:inherit;
font-size: small;
}
html>body { font-size: small; }
#header {
float: left;
width: 100%;
background: #dae0d2 url(bg.gif) repeat-x bottom;
font-size: 93%;
line-height: normal;
}
#header ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#header li {
margin: 0;
padding: 0;
display: inline;
}
#header a {
float: left;
background: url(left_both.gif) no-repeat left top;
width: .1em;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
font-weight: bold;
color: #765;
text-decoration: none;
}
#header a span {
float: left;
display: block;
background: url(right_both.gif) no-repeat right top;
margin: 0;
padding: 5px 15px 4px 6px;
}
#header>ul a { width: auto; }
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span { float: none; }
/* End IE5-Mac hack */
#header a:hover span {
color: #333;
}
#home #nav-home a, #news #nav-news a,
#products #nav-products a, #about #nav-about a,
#contact #nav-contact a {
background-position: 0 -150px;
border-width: 0;
}
#home #nav-home a span, #news #nav-news a span,
#products #nav-products a span, #about #nav-about a span,
#contact #nav-contact a span {
background-position: 100% -150px;
padding-bottom: 5px;
color: #333;
}
#header a:hover {
background-position: 0% -150px;
color: #333;
}
#header a:hover span {
background-position: 100% -150px;
}
It works fine for these browsers:
– Internet Explorer 5.01 SP2
– Internet Explorer 5.5 SP2
– Internet Explorer 6.0 SP2
– MSN Explorer 6.0
– Mozilla 1.5
– Mozilla Firebird 0.7
– Netscape Navigator 7.1
– Opera 7.11
If you find any bugs, please post here.
rz
i’ve taken liberally from doug’s techniques to add drop downs to a very similar menu layout. i’ve got a working solution in the latest gecko browsers, ie 5+, opera 7.11 (windows). on the mac side it works in safari and gecko browsers, but goes absolutely wacko in ie 5.2. view it here – http://rzand.homedns.org:8080/main/home
btw, this layout seems to be more browser friendly than the brainjar example, another demo i have borrowed heavily from. anyone seen this before and have any ideas?
btw, i’m sniffing the browser on the server side with php and including local styles that override those in the stylesheet rather than using css hacks.
Charles
Rz, do you think it will help win Netscape 4 users over to your viewpoint to lecture them about what browser they are using?
Actually, your site seems to work fine in Netscape 4 with JavaScript off. I just don’t see your interface work.
And that’s actually the great thing about the technique in this article. If you have a modern browser, you see the cool stuff. If you have Netscape 4, the site still works.
(Well, except for any links to a mid-page id, but aside from that.)
Can’t upgrade to Netscape 6 until I buy a new Mac (requires OS X, which doesn’t run on an 8600), iCab crashes too much on my unit, and I’d rather not use IE, even if it’s IE/Mac.
Call me stubborn, but it’s my attention you’re trying to get, and I’m darned if I’m going to buy a new computer just to visit your site.
Benjamin
First off – yes, this is a great technique, and a very easy-to understand tute.
I’ve been using these tabs to allow navigation through a one-way process (specifically an online ordering process) – the user can see where they are in the process, and click back to see or change previous steps/tabs. However, the user shouldn’t be able to click forward more than one tab at a time (if you’re one step one, you can’t jump straight to step 4)
So – how can we create a tab which is disabled, or greyed out? If we remove the anchor element, we no longer have a second ‘sliding door’ to apply the style to…
anyone got any ideas? preferably without introducing extra spans…fanks!
squareman
Actually, it isn’t a broken or unusable interface. There are other homologous tab examples: cookbooks, reference books, VW Owner’s Manuals. In these examples, often you’ll see tabs for the referential content; but they are all still have preceding material before the first tab: cover, title page, contents, introductions.
No flame. Just rebuttal. ;)
Faridur Rahman Choudhury
Excellent stuff but this does not work in IE 5/Mac whereas it works perfectly in IE5.x+ for PC and also NS7 for both PC and Mac. Is there any hack to make it work for IE/Mac?
Thnx
Anthony
In your first article about sliding navs you mentioned the abilility to put a logo in the header# – how do you ad this?
Thanks – great CSS!
Lu
Okay, not so mind-boggling, but certainly opens the lid on what CSS can do. Who would have thought compliance could be so ‘cool’ ;-)
petr
Hi, I would like to ask if there is any posiblity to center <li> “tabs” to the header div. I don’t want to center the header div but only ul and li. The reason is because I will dynamicly change amount of tabs and I can’t center it to the page right now without changing header width. :-(
For beter understandig you can look at
http://www.daend.cz/FTP/WEB-templates/01/
Right now it looks like tabs are + – centered. But if I remove one from the list it is not centered in the header div with black border.
Thanks for your help.
Chris
Hello everyone and many thanks for the article !
Is there a way to make the tabs to evenly distribute themselfs when resizing the window ?
Either by reduce/enlarge the gaps or by changing the tabs’ width.
Thanks a lot in advance,
Chris