Another great post! I've been working on the exact same technique for my site for about the past week. Great to see that I'm on the right track with my design.
James
JP
· 5 years ago
I noticed yesterday that Zeldman uses this technique for his nav bar (sans tabs). It's great that you only need one image for the whole setup--much easier to manage.
Michele
· 5 years ago
Very nice indeed, Didier!
In Firefox 0.8/Win, if you click on one of the tabs and then you drag your mouse down, the original text of the link appears. A quick fix could be:
ul#nav li a {
...
text-indent: -1000em;
text-decoration: none;
...
}
That should push the text well out of the way.
Dan Cederholm
· 5 years ago
Beautifully done. Interestingly I was playing around with overlapping tabs like this recently -- using one image for all the possible combinations is the best approach. Otherwise, you'll have to chop up each end where the tabs overlap, and another set for when tab is selected to appear "in front". Keeping all the possibilities in one single file, like Didier has done is so much easier. Nice work.
Brian
· 5 years ago
Why do you need the bottom two rows of tabs, the -66px and -88px?
andrew
· 5 years ago
So is this basically using tabs w/ body id's in combination with Dave Shea's CSS Sprites navigation?
Keith
· 5 years ago
Very nice example and good work on the explanation, it's very easy to follow. Thanks for sharing Didier.
Nick
· 5 years ago
That's all and good but has one major flaw in that blind users who rely on such programs as Jaws (Freedom Scientific) to navigate the site will not be able to do so. I think the ALT= field might be read instead so it might be possible but I don't have convenient access to JAWS to test the theory out. Granted this is a very tiny populace of the world wide web I don't think your technique would be good if those people were potential visitors/users.
Craig
· 5 years ago
Great explanantion Didier, maybe we will even see it used in site sometime soon ;-)
eric
· 5 years ago
Nick, Didier is replacing his links with background images, when read by something like JAWS it should render as an ordered list, as he said. There's nothing in his code that he can apply an alt="" field to.
Zelnox
· 5 years ago
Amazing (^_^)//
Bruce Boughton
· 5 years ago
I've been using this technique for ages, in mock-ups at least. To me it seems the best technique for image based navigation menus since it eliminates the delay between loading the mouseover image without any complicated JS pre-loading. It can take some fiddling to get right, depending on context but it's pretty easy once you get your head round. It's nice to see it showcased in such a clear manner.
Jon Hicks
· 5 years ago
I've been using a similar method recently (not with all images in one file - I wish I'd thought of that!), but have a problem with flicker in IE 6. Its only a second or so, but its bad enough to look unacceptable.
Great post indeed! I love the creative use of the CSS. Fine method to maintain accessability while treating with eyecandy at the same time! I'll be sure to "steal" this technique for my own use >8P
ib.
justin
· 5 years ago
If I'd known that I was going to be viewing such beauty, I would have put on a diaper. Simply lickable!
Tony Crockford
· 5 years ago
the first time I looked at the example in Opera 7.5beta1 the tabs didn't show up in the normal state and only appeared on rollover.
a ctrl refresh sent them away again...
thought you'd like to know.
tony
Didier Hilhorst
· 5 years ago
First of all I'd like to thank everyone for the very kind and encouraging words. This method certainly has some flaws and there's definitively room for improvement. I'll address some of the individual remarks and commments below. Michele — Thanks for pointing that out. It's a bit of an odd thing really, but I tested it and it happens indeed. Isn't code a wonderful thing? I'll update the stylesheet soon.Brian — I need the bottom two rows (-66px and -88px) because on the active state the tabs overlap other sections, i.e. the gray colored active tabs are actually wider than the width of the list element (visually). To make sure it looks good, and correct, the remaining parts of the image are included in adjecent elements. Download all the files and play with the background positions in the CSS file and you will see why they are needed.Andrew — That's an interesting view on the matter. I think you are right to make the analogy and link the various methods, although I did not specifically look at these two articles at the time I created this example. Of course I based my work on knowledge posted by others, including Dave, Dan and Douglas.Nick — This example inherits the problems inherent to the FIR (and similar) methods: when stylesheets are enabled and images disabled the navigation will not work, i.e. users will not see anything. However, none of the content is actually hidden or not displayed , so to my knowledge blind users working with JAWS should be able to use the navigation. However it would be nice to have a confirmation on that, if possible.Jon — The damn flickering is something the IE team should fix, honest, too many designers are suffering from this obvious flaw. That said the flickering in IE6 will only occur in one instance. IE6 has an assortment of options to check for newer versions of stored pages, that are located under Tools » Internet Options... » Temporary Internet Files » Settings. In that list you can choose between:Every visit to the pageEvery time you start Internet ExplorerAutomaticallyNeverThe automatically option is checked by default. Most designers set this option to every visit to the page to make sure they're not viewing a cached version (when testing). When the latter setting is used it will flicker no matter what you try, IE6 will load the image again each time you hover, and thus result in flickering, unfortunately setting a background image the the list element itself does not solve the problem. But my guess is that just a small percentage is using these settings (it just happens to be the small percentage looking at this and other examples, probably.) With all the other settings no flickering occurs, to my knowledge.Tony — That's an odd problem. No such thing happens in my version of Opera (7.03). Normally it shouldn't occur in Opera 7.5 Beta 1 either. The image is downloaded once. The only thing that happens in the hover state is the change in background position. I have no explenation for the problem except that the image didn't load correctly the first time around (due to an unknown reason.)
Bruno
· 5 years ago
Didier, thanks for sharing your experiments wth us! Visually the result his awesome. Unfortunately, it isn't IE 5.x Mac friend due - I think - to the browser CSS position related bugs. Have you check it out?
Andrei Herasimchuk
· 5 years ago
Why is anyone using Mac IE 5 anymore? Dump it? Safari is far better and free. If you are using OS 9 with Mac IE 5... well... if one wants to live in the dark ages (in computing time), then I think designer's should just let them stay there. 8^)
Nice job D.
Bart N.
· 5 years ago
That's some sweet navigation !
Didier Hilhorst
· 5 years ago
Bruno — I'm afraid I will have to agree with Andrei regarding support for IE5.x for Mac. Just a small fraction of users browse the web using IE5.x for Mac and I think it's not worth the effort and trouble to hack my way around to support that browser.
That said if anyone has a quick fix that doesn't require a zillion hacks I'm all ears. The more that is supported the better obviously. But at a certain point it's not worth the effort.
Though it is a great technique, Dan's method has a major accessibility flaw and is not so much, as he states, 'accessible'. Being able to be read by screenreaders is only part of the story. Turning image-loading off in a graphical desktop-browser is all that is needed to render the menu inaccessible.
Until this issue is resolved, I will not use CSS-IR for critical site functionality.
Kris
· 5 years ago
Didier, I recall an article on ALA, possibly written by Douglas Bowman, in which a floating bug in IE/mac is addressed; when both the element and the content of that element are floated, IE/Mac suddenly behaves properly on adjusting the width of the element.
I don't remember which article it was, but I am sure it is easy enough to find.
James Holbeach
· 5 years ago
Hi DH, firstly a very clever solution to a problem I've been thinking about for some time. However, as with Jon, the flicker in IE makes it unacceptable (note in Moz it works BEAUTIFULLY!).
I tried changing my settings back to automatically, reloaded the browser, but the flicker was still there, no matter what I did?
Didier Hilhorst
· 5 years ago
Kris — You are absolutely right, and I noted exactly this in my reply to Nicks\'s comment. But personally I find that the possibility of users browsing with images turned off and CSS turned on is rather an exception. However I do not have any data to back this statement up. It would be interesting to know what percentage is using these particular settings. I know it is usually done to improve download speeds etc. I think CSS-IR has its place in real world web design, and I don\'t think we should avoid this method just because there\'s a possibility of it not working properly. As far as IE/Mac is concerned I think my updated version solved some issues, but I did not check that myself.
James — Please see Navigation Matrix Reloaded for an updated version of this method, which effectively solves the flickering issue in IE6.
Bob Easton
· 5 years ago
Regarding accessibility by screen readers: both Jaws 5 and Home Page Reader 4 do just fine with this experiment. Confirmed by actual testing. They both read the text links exactly as presented in the HTML. The images are completely irrelevant as they are background images, and the screen readers don't even know they exist.
Unlike the image replacement techniques which often use display:none to hide the text, this technique leaves the text available to screen readers.The technique is much more accessible than some image replacement methods.
Very nice job Didier!
Jim
· 5 years ago
I picked up on this method after reading Dave Shea's article 'CSS Sprites' over at ALA.
Bryan
· 5 years ago
This is a great idea and method. It allows for the opportunity to create a similar flash navigation where you don't have to worry about preloading the image rollovers. I just created an example that would be something like what I would see in a flash navigation. Anyways, let me know what you guys think. Its just an animated gif.
I hate to be a harebringer of bad news but overall there are still problems with this solution in ie 5.x for mac. The nav does not line up.
ie does funny things when you try to line things up lots of times.
sorry.
Mike
· 5 years ago
I'll be trying this for sure. Tabstrips with overlapping tabs can be seriously confusing. But, I am building a serverside scripted app (php), so I'm not about the matrix. Should i just include all possible tabs in the matrix, even though users might not even see some of the tabs (due to the rightsmanagement). Anyway, I'll see if I can get it to work.
Mike
· 5 years ago
Oh, and I think Blogger uses it too (on the CMS part where users edit their weblog), I was really confused when I saw their matrix, but now I understand how it works!
All Comments
Another great post! I've been working on the exact same technique for my site for about the past week. Great to see that I'm on the right track with my design.
James
In Firefox 0.8/Win, if you click on one of the tabs and then you drag your mouse down, the original text of the link appears. A quick fix could be:
ul#nav li a {
...
text-indent: -1000em;
text-decoration: none;
...
}
That should push the text well out of the way.
To get round it, I had to apply the rollover state to the background of the <li> and set the background-image in the tag to none. It still uses the same image file. Have you come across this problem with this method?
bye alex
ib.
a ctrl refresh sent them away again...
thought you'd like to know.
tony
Nice job D.
That said if anyone has a quick fix that doesn't require a zillion hacks I'm all ears. The more that is supported the better obviously. But at a certain point it's not worth the effort.
Until this issue is resolved, I will not use CSS-IR for critical site functionality.
I don't remember which article it was, but I am sure it is easy enough to find.
I tried changing my settings back to automatically, reloaded the browser, but the flicker was still there, no matter what I did?
James — Please see Navigation Matrix Reloaded for an updated version of this method, which effectively solves the flickering issue in IE6.
Unlike the image replacement techniques which often use display:none to hide the text, this technique leaves the text available to screen readers.The technique is much more accessible than some image replacement methods.
Very nice job Didier!
http://www.btkdesigns.com/matrix/index.html
Bryan
ie does funny things when you try to line things up lots of times.
sorry.