Navigation Matrix Reloaded
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.
This item was posted by Wednesday, May 5th, 2004.
onCategories:
You can follow comments on this item via the RSS 2.0 feed.
Comments are closed.