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

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy 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 trial 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­nally the ul con­tained the large back­ground image. How­ever I will need the ul for another pur­pose, namely 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 matches the group of li ele­ments. The markup needed 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>
</ul>
</div>
</body>

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 matches the hover states of the indi­vid­ual li ele­ments. Below I’ve included the new matrix:

matrix

The first 4 rows are used for the dif­fer­ent ul back­grounds. As you can see they per­fectly match with the hover states on the indi­vid­ual pages. The other two rows include the other states I need for the nav­i­ga­tion to func­tion prop­erly. Of course some tabs are included more than once, but this is needed 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 exactly 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­rally 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 closer 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.

Categories:

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­ately try­ing to think of any other 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 fisrt iter­a­tion. Today I see this.

    [Mozilla 1.5 on Win 2000]

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

    Dav­ezilla — Wow that’s some wicked effect, unfor­tu­nately not intended 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­rently only have Fire­fox 0.8 installed. I’ll grab Mozilla 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­cally (in the pre­vi­ous CSS), instead of using height:0; one can use height:1px, and adapt the top padding as needed. 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 flicker 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 background-image to none on hover, to dis­play the other back­ground image under­neath. Maybe you could do that to save shift­ing the back­ground around on hover? 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 silly 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. Totally 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­cially 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 (within Feed­De­mon, though) it has lit­tle flick­er­ing, same as the pre­vi­ous a lit­tle one-second/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­ated 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 Mozilla 1.5 or other older ver­sions of Gecko based browsers (includ­ing Netscape) where the odd prob­lem occurs Dav­ezilla noticed I sug­gest updat­ing to Mozilla 1.6 which dis­plays the nav­i­ga­tion cor­rectly. 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­tively 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­ever when hov­er­ing over the links. I tested this with an assort­ment of set­tings in IE6 and emp­tied the cache sev­eral 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 pixel details, fonts and opti­miza­tion. But I strongly sug­gest Pho­to­shop for any graphic 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.

    Hi

    I see the idea. In FF0.8 on hover the ani­mated gif plays, but in IE it doesn’t appear. This is because the tab is one pixel lower in IE than in FF. Is this delib­er­ate? Or a posi­tion­ing error?

    Trevor

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

    DOH!

    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, didn’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­nity to cre­ate a sim­i­lar flash nav­i­ga­tion where you don’t have to worry about pre­load­ing the image rollovers. I just cre­ated 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­mated gif.

    Matrix Reloaded Animated

    Bryan

  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:

    IE6/winIE5.5/winIE5.01/winFirefox-0.8/winMozilla-1.7b/winMozilla-1.6a/winSafari-1.2/macOpera-7/winOpera-6/winOpera-5/win

    Looks bet­ter:

    Firebird-0.7/winCamino-0.7/macIE-5.2/macNetscape-6.2/win

    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 hover doesn’t work on IE5.0 (PC) … I really 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 visit to the page’, the rollover doesn’t flicker, but when i move to the next tab, the pre­vi­ous one stays high­lighted 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­lighted 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­cally’ its fine…

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

    Please visit 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­ogy 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 another for the same image, why wouldn’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.

    Thanks

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

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

    Thanks

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

    Maybe some­one is inter­ested in a cus­tomized exam­ple of Didier’s Nav­i­ga­tion Matrix. Some­times three states (nor­mal, active and hover) could be overkill, so I adapted Didier’s Code and cre­ated 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?