About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977


Navigation Matrix Reloaded

In my pre­vi­ous post, Jon Hicks raised the IE6 flick­er­ing issue, which has been tor­ment­ing design­ers and coders alike for too long now. At first I thought there was no ele­gant solu­tion to this prob­lem, but after a few error and tri­al ses­sions I came up with a solu­tion that gets rid of the flick­er­ing — in any situation.

What changed?

First of all I need an extra div that wraps the ul and li ele­ments. Orig­i­nal­ly the ul con­tained the large back­ground image. How­ev­er I will need the ul for anoth­er pur­pose, name­ly to counter the flick­er­ing. Thus in this ver­sion the extra div holds the main back­ground image. The width and height of the ul match­es the group of li ele­ments. The markup need­ed just lit­tle change:

<body id="welcome">
<div id="header">
<ul id="nav">
<li id="wel"><a href="welcome2.html">welcome</a></li>
<li id="pro"><a href="products2.html">products</a></li>
<li id="sup"><a href="support2.html">support</a></li>
<li id="con"><a href="contact2.html">contact</a></li>

I also need a new matrix. In order to counter the flick­er­ing I need to set a back­ground to the ul that match­es the hov­er states of the indi­vid­ual li ele­ments. Below I’ve includ­ed the new matrix:


The first 4 rows are used for the dif­fer­ent ul back­grounds. As you can see they per­fect­ly match with the hov­er states on the indi­vid­ual pages. The oth­er two rows include the oth­er states I need for the nav­i­ga­tion to func­tion prop­er­ly. Of course some tabs are includ­ed more than once, but this is need­ed because I need the entire row to dis­play as the ul back­ground, instead of just indi­vid­ual ele­ments. The size in kilo­bytes is exact­ly the same as the pre­vi­ous matrix.

Some of the CSS has changed too, most notably the back­grounds for the ul elements:

ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;

body#welcome ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 0;
body#products ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 -22px;
body#support ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 -44px;
body#contact ul#nav {
background: transparent url(nav_f_2.png) no-repeat 0 -66px;

Nat­u­ral­ly the posi­tions of the back­grounds have changed in the li ele­ments because I use a dif­fer­ent matrix. Again, down­load the css file to have a clos­er look. So, there you go, nav­i­ga­tion matrix reloaded, with­out the flickering.

This item was posted by Dan Rubin on Wednesday, May 5th, 2004.


You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

31 comments on “Navigation Matrix Reloaded”

  1. Posted by Jon Hicks on Wednesday, May 5th, 2004.

    Superb! Thats what I call ser­vice! I’m now des­per­ate­ly try­ing to think of any oth­er bugs I’d like you to fix for me.…

  2. Posted by Davezilla on Wednesday, May 5th, 2004.

    Well, your code worked bet­ter for me in the fis­rt iter­a­tion. Today I see this.

    [Mozil­la 1.5 on Win 2000]

  3. Posted by Didier Hilhorst on Wednesday, May 5th, 2004.

    Dav­ezil­la — Wow that’s some wicked effect, unfor­tu­nate­ly not intend­ed of course. To be hon­est I have no idea why it’s hap­pen­ing. Some­how it seems like a ren­der­ing error. The prob­lem is not due to an error in back­ground place­ment because what I see in your screen­shot can’t pos­si­bly result from the back­ground image. I cur­rent­ly only have Fire­fox 0.8 installed. I’ll grab Mozil­la 1.5 to see if I can repro­duce the problem.

  4. Posted by Max Thrane on Wednesday, May 5th, 2004.

    I have no com­ments at all… I’m just like… WOW, this nav sim­ply rocks! My full respect to DH, way to go!

  5. Posted by Philippe on Wednesday, May 5th, 2004.

    And that fixed some of the issues with IE5.x Mac…

    Note that thanks to your pre­vi­ous ver­sion, I found a workaround to that over­flow prob­lem in Mac IE. Basi­cal­ly (in the pre­vi­ous CSS), instead of using height:0; one can use height:1px, and adapt the top padding as need­ed. I’ll doc­u­ment that as soon as I have a bit of time.

  6. Posted by Scott Johnson on Thursday, May 6th, 2004.

    DH, you rock. Seri­ous. You rock man. This is the slick­est non-flash, non-javascript navbar I’ve seen yet. Keep up the great work! I can’t wait to see what you pro­duce next!

  7. Posted by Phil Baines on Thursday, May 6th, 2004.

    Nice work! I have used that very same tech­nique to avoid the IE flick­er myself. The back-ground image under­neath the indi­vid­ual links that is, not the matrix. I love that matrix idea. It’s a bit like Dave S sprites from ALA.

    In fact, what I do on my site (www.wubbleyew.com) is set the back­ground-image to none on hov­er, to dis­play the oth­er back­ground image under­neath. Maybe you could do that to save shift­ing the back­ground around on hov­er? It might be less inten­sive for the client?

    My nav­i­ga­tion pales in com­par­i­son to yours as far as style is con­cerned, so again; nice work.

  8. Posted by Higs on Thursday, May 6th, 2004.

    Very sweet. I do have one sil­ly ques­tion: what the name of the font you used in the tabs?

  9. Posted by Dave Simon on Thursday, May 6th, 2004.

    Very impres­sive. Total­ly opened my eyes to some new things I should try with CSS. Bravo.

  10. Posted by Mike on Thursday, May 6th, 2004.

    Nice man! I espe­cial­ly like the text-indent image replacement ;)

    Change ‑100em to ‑9000px and it’ll fix a goofy bug in Safari. Trust me!

  11. Posted by mac on Thursday, May 6th, 2004.

    this is great info!

  12. Posted by AlexA on Thursday, May 6th, 2004.

    Great job, but that’s some wicked effect on NN 7.1

  13. Posted by Weyert de Boer on Thursday, May 6th, 2004.

    If some­one would like to take the time, when you call “flick­er­ing” here. Because when I browse your exam­ple in IE6.0/Windows (with­in Feed­De­mon, though) it has lit­tle flick­er­ing, same as the pre­vi­ous a lit­tle one-sec­ond/white flash.

  14. Posted by On20s on Friday, May 7th, 2004.

    Dude, thats sweet. I want to try some­thing like that, but I need to know how you cre­at­ed those tabs — they are schweeet. Did you use any tool for that???

    Again, kudos to you for the idea and the writeup…

  15. Posted by bbr on Friday, May 7th, 2004.

    thanks man, you rock! i used a sim­i­lar ver­sion of this on my site: http://www.805bbr.com

  16. Posted by Didier Hilhorst on Saturday, May 8th, 2004.

    All those using Mozil­la 1.5 or oth­er old­er ver­sions of Gecko based browsers (includ­ing Netscape) where the odd prob­lem occurs Dav­ezil­la noticed I sug­gest updat­ing to Mozil­la 1.6 which dis­plays the nav­i­ga­tion cor­rect­ly. It remains, nonethe­less, just a small glitch that does not ren­der the nav­i­ga­tion unusable.

    Higs — The bitmap font I used is called 04b_03b and is avail­able free of charge at 04 or alter­na­tive­ly at DaFONT

    Mike — Thanks for point­ing that out. The stylesheets on both exam­ples have been updated.

    Wey­ert — There should be no flick­er­ing what­so­ev­er when hov­er­ing over the links. I test­ed this with an assort­ment of set­tings in IE6 and emp­tied the cache sev­er­al times to make sure the image was down­loaded. I can only assume you either looked at the pre­vi­ous exam­ple or Feed­De­mon for some odd rea­son makes the flick­er­ing come back (which I doubt since it just uses IE6’s ren­der­ing engine.) That said if any­one else is still see­ing any flick­er­ing please let me know.

    On20s — I use both Pho­to­shop and Fire­works MX to cre­ate any graph­ics I need. Pho­to­shop for most of the art­work and Fire­works MX for some pix­el details, fonts and opti­miza­tion. But I strong­ly sug­gest Pho­to­shop for any graph­ic design needs — it’s the tool of the trade

  17. Posted by alex west on Sunday, May 9th, 2004.

    Great Nav mod­ule con­cept. Con­grat­u­la­tions. Thank you!

    About the flickering: 

    I still get some flick­er­ing (some­times) in IE6. After the cache has gone through all the links the flick­er­ing seems to dimin­ish. If you use the back but­ton the flick­er­ing is also there. Some­times it is very vis­i­ble, oth­ers only slightly.

    So it might just have to do with how IE6 ren­ders the pages and not with the CSS itself… works beau­ti­full in Fire­fox 0.8

  18. Posted by Trevor Nelmes on Monday, May 10th, 2004.


    I see the idea. In FF0.8 on hov­er the ani­mat­ed gif plays, but in IE it does­n’t appear. This is because the tab is one pix­el low­er in IE than in FF. Is this delib­er­ate? Or a posi­tion­ing error?


  19. Posted by Trevor Nelmes on Monday, May 10th, 2004.


    Would help if IE had ani­ma­tions switched on!

  20. Posted by Bryan on Monday, May 10th, 2004.

    hmmm, seems my link got removed. Thats a bummer.

  21. Posted by bryan on Monday, May 10th, 2004.

    Whoops, did­n’t real­ize there was two forums for this. Here is my post on the May 4th forum

    This is a great idea and method. It allows for the oppor­tu­ni­ty to cre­ate a sim­i­lar flash nav­i­ga­tion where you don’t have to wor­ry about pre­load­ing the image rollovers. I just cre­at­ed an exam­ple that would be some­thing like what I would see in a flash nav­i­ga­tion. Any­ways, let me know what you guys think. Its just an ani­mat­ed gif.

    Matrix Reloaded Animated


  22. Posted by Tim Hatch on Monday, May 10th, 2004.

    I found that set­ting the fol­low­ing in ul#nav seems to fix the Odd Gecko Effect and in the process found that IE5/mac needs a lit­tle hack­ing to look perfect:

    /* this block replaces the exist­ing top: 68px; rule for ul#nav */

    top: 63px;

    /* com­ment from ie5/mac \*/

    top: 68px;

    /* end hiding */

    padding: 0;

    No regres­sions:


    Looks bet­ter:


    Does set­ting the padding to 0 have some unknown effect I’m not catching?

    Oh, almost for­got the demo page.

  23. Posted by Kim Siever on Tuesday, May 11th, 2004.

    The only flick­er­ing I get is when I click on a tab.

  24. Posted by Adagio on Wednesday, May 12th, 2004.

    I tried to use your method to cre­ate a nav­i­ga­tion, but the hov­er does­n’t work on IE5.0 (PC) … I real­ly have no idea, why. My code is (more or less) 100% the same one you have used.

    Link to my site

  25. Posted by andrew on Thursday, June 3rd, 2004.

    On my PC, in IE6 (not feed demon), if the set­ting in temp inter­net files is set to ‘Every vis­it to the page’, the rollover does­n’t flick­er, but when i move to the next tab, the pre­vi­ous one stays high­light­ed for a second?

    Is there a fix for this prob­lem? If you do it quick across all tabs, you can have all tabs high­light­ed at once, and then one by one they’ll ‘roll off’ afterwards.

    Which set­ting is IE default set to? Because on ‘auto­mat­i­cal­ly’ its fine…

  26. Posted by Ralph Solinas on Thursday, July 1st, 2004.

    Please vis­it my website.

    Ralph Soli­nas o

  27. Posted by Mike on Friday, July 2nd, 2004.

    I know the last row is to stop the flick­er­ing but I guess I’m not under­stand­ing the method­ol­o­gy of it. I was look­ing at the con­tact one and some­times it would use one row and some­times it would use anoth­er for the same image, why would­n’t it lets say for the con­tact go to 262, 88 every time rather than go to 262, 66 some­times, I hope this ques­tion makes sense.


  28. Posted by Mike on Friday, July 2nd, 2004.

    wait instead use prod­ucts 94, 88 and 94 110, sorry


  29. Posted by Christian Machmeier on Wednesday, July 7th, 2004.

    Maybe some­one is inter­est­ed in a cus­tomized exam­ple of Didier’s Nav­i­ga­tion Matrix. Some­times three states (nor­mal, active and hov­er) could be overkill, so I adapt­ed Didier’s Code and cre­at­ed the same nav­i­ga­tion, but with only two states (nor­mal and hover).

    See a work­ing exam­ple at: http://www.redsplash.de/experiments/css/nav_matrix2/

  30. Posted by Adagio on Thursday, July 29th, 2004.

    I found some­thing “seri­ous” about this kind of nav­i­ga­tion. There are some users out there who don’t turn off their CSS sup­port, but the images.

    When you turn off all images, you don’t see any nav­i­ga­tion or text at all. Is there any fix to this?