Navigation Matrix Reloaded
posted 4 years ago // 30 comments // comments are closed
In my previous post, Jon Hicks raised the IE6 flickering issue, which has been tormenting designers and coders alike for too long now. At first I thought there was no elegant solution to this problem, but after a few error and trial sessions I came up with a solution that gets rid of the flickering — in any situation.
What changed?
First of all I need an extra div that wraps the ul and li elements. Originally the ul contained the large background image. However I will need the ul for another purpose, namely to counter the flickering. Thus in this version the extra div holds the main background image. The width and height of the ul matches the group of li elements. The markup needed just little 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 flickering I need to set a background to the ul that matches the hover states of the individual li elements. Below I’ve included the new matrix:
The first 4 rows are used for the different ul backgrounds. As you can see they perfectly match with the hover states on the individual pages. The other two rows include the other states I need for the navigation to function properly. Of course some tabs are included more than once, but this is needed because I need the entire row to display as the ul background, instead of just individual elements. The size in kilobytes is exactly the same as the previous matrix.
Some of the CSS has changed too, most notably the backgrounds 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;
}Naturally the positions of the backgrounds have changed in the li elements because I use a different matrix. Again, download the css file to have a closer look. So, there you go, navigation matrix reloaded, without the flickering.
Links of Interest: Intel Core 2 Duo Laptops Compare laptops in Australia and buy from rated stores
Superb! Thats what I call service! I’m now desperately trying to think of any other bugs I’d like you to fix for me….
Well, your code worked better for me in the fisrt iteration. Today I see this.
[Mozilla 1.5 on Win 2000]
Davezilla — Wow that’s some wicked effect, unfortunately not intended of course. To be honest I have no idea why it’s happening. Somehow it seems like a rendering error. The problem is not due to an error in background placement because what I see in your screenshot can’t possibly result from the background image. I currently only have Firefox 0.8 installed. I’ll grab Mozilla 1.5 to see if I can reproduce the problem.
I have no comments at all… I’m just like… WOW, this nav simply rocks! My full respect to DH, way to go!
And that fixed some of the issues with IE5.x Mac…
Note that thanks to your previous version, I found a workaround to that overflow problem in Mac IE. Basically (in the previous CSS), instead of using height:0; one can use height:1px, and adapt the top padding as needed. I’ll document that as soon as I have a bit of time.
DH, you rock. Serious. You rock man. This is the slickest non-flash, non-javascript navbar I’ve seen yet. Keep up the great work! I can’t wait to see what you produce next!
Nice work! I have used that very same technique to avoid the IE flicker myself. The back-ground image underneath the individual 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 display the other background image underneath. Maybe you could do that to save shifting the background around on hover? It might be less intensive for the client?
My navigation pales in comparison to yours as far as style is concerned, so again; nice work.
Very sweet. I do have one silly question: what the name of the font you used in the tabs?
Very impressive. Totally opened my eyes to some new things I should try with CSS. Bravo.
Nice man! I especially like the text-indent image replacement ;)
Change -100em to -9000px and it’ll fix a goofy bug in Safari. Trust me!
this is great info!
Great job, but that’s some wicked effect on NN 7.1
If someone would like to take the time, when you call “flickering” here. Because when I browse your example in IE6.0/Windows (within FeedDemon, though) it has little flickering, same as the previous a little one-second/white flash.
Dude, thats sweet. I want to try something like that, but I need to know how you created those tabs - they are schweeet. Did you use any tool for that???
Again, kudos to you for the idea and the writeup…
thanks man, you rock! i used a similar version of this on my site: http://www.805bbr.com
All those using Mozilla 1.5 or other older versions of Gecko based browsers (including Netscape) where the odd problem occurs Davezilla noticed I suggest updating to Mozilla 1.6 which displays the navigation correctly. It remains, nonetheless, just a small glitch that does not render the navigation unusable.
Higs — The bitmap font I used is called 04b_03b and is available free of charge at 04 or alternatively at DaFONT
Mike — Thanks for pointing that out. The stylesheets on both examples have been updated.
Weyert — There should be no flickering whatsoever when hovering over the links. I tested this with an assortment of settings in IE6 and emptied the cache several times to make sure the image was downloaded. I can only assume you either looked at the previous example or FeedDemon for some odd reason makes the flickering come back (which I doubt since it just uses IE6’s rendering engine.) That said if anyone else is still seeing any flickering please let me know.
On20s — I use both Photoshop and Fireworks MX to create any graphics I need. Photoshop for most of the artwork and Fireworks MX for some pixel details, fonts and optimization. But I strongly suggest Photoshop for any graphic design needs — it’s the tool of the trade
Great Nav module concept. Congratulations. Thank you!
About the flickering:
I still get some flickering (sometimes) in IE6. After the cache has gone through all the links the flickering seems to diminish. If you use the back button the flickering is also there. Sometimes it is very visible, others only slightly.
So it might just have to do with how IE6 renders the pages and not with the CSS itself… works beautifull in Firefox 0.8
Hi
I see the idea. In FF0.8 on hover the animated 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 deliberate? Or a positioning error? Trevor
DOH!
Would help if IE had animations switched on!
hmmm, seems my link got removed. Thats a bummer.
Whoops, didn’t realize 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 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.
Matrix Reloaded Animated — Bryan
I found that setting the following in ul#nav seems to fix the Odd Gecko Effect and in the process found that IE5/mac needs a little hacking to look perfect:
/* this block replaces the existing top: 68px; rule for ul#nav */
top: 63px;
/* comment from ie5/mac \*/
top: 68px;
/* end hiding */
padding: 0;
No regressions:
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 better:
Firebird-0.7/winCamino-0.7/macIE-5.2/macNetscape-6.2/win
Does setting the padding to 0 have some unknown effect I’m not catching?
Oh, almost forgot the demo page.
The only flickering I get is when I click on a tab.
I tried to use your method to create a navigation, 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
On my PC, in IE6 (not feed demon), if the setting in temp internet files is set to ‘Every visit to the page’, the rollover doesn’t flicker, but when i move to the next tab, the previous one stays highlighted for a second?
Is there a fix for this problem? If you do it quick across all tabs, you can have all tabs highlighted at once, and then one by one they’ll ‘roll off’ afterwards.
Which setting is IE default set to? Because on ‘automatically’ its fine…
Please visit my website.
Ralph Solinas o
I know the last row is to stop the flickering but I guess I’m not understanding the methodology of it. I was looking at the contact one and sometimes it would use one row and sometimes it would use another for the same image, why wouldn’t it lets say for the contact go to 262, 88 every time rather than go to 262, 66 sometimes, I hope this question makes sense. Thanks
wait instead use products 94, 88 and 94 110, sorry Thanks
Maybe someone is interested in a customized example of Didier’s Navigation Matrix. Sometimes three states (normal, active and hover) could be overkill, so I adapted Didier’s Code and created the same navigation, but with only two states (normal and hover).
See a working example at: http://www.redsplash.de/experiments/css/nav_matrix2/
I found something “serious” about this kind of navigation. There are some users out there who don’t turn off their CSS support, but the images.
When you turn off all images, you don’t see any navigation or text at all. Is there any fix to this?