Navigation Matrix Reloaded

5th May 2004

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 did change?

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:

 
  

   

    
welcome 

    
products

    
support

    
contact

   

  

 

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 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.