blog
Navigation rollovers (IE6 friendly)
Whilst coding away today, I came across a little bit of code that I’ve seldom used and rarely seen documented, but is extremely useful for all those of you who try doing image-replacement for text and want it to work nicely in IE6.
My personal technique of choice, and one of the most accessible, is to use background images on spans within the element you are trying to replace. For example, say you wanted to have a custom font in a navigation element, without using a dynamic font replacement technique such as SIFR or PCDTR. Your html code will look something like this:
<ul>
<li><a href=”#”>Nav item 1</a><li>
<li><a href=”#”>Nav item 2</a></li>
…
</ul>
The first thing to do is to insert span tags within your anchors (these will be used to hold the background image that will replace our text) as follows:
<ul>
<li id=”item1″><a href=”#”>Nav item 1<span><!– –></span></a><li>
<li id=”item2″><a href=”#”>Nav item 2<span><!– –></span></a></li>
…
</ul>
Once your html is in place, you should then create your navigation images. In order to get the hover action working smoothly, meaning without flickering or noticable loading periods, we want to create a single image that has both the off and over states within it, as shown below:
Next, you need to create the css to carry out the replacement and rollover actions:
ul li a {
position: relative;
}
ul li a span {
position: absolute;
top: 0;
left: 0;
}
ul li a, ul li a span {
height: 36px;
display: block;
background-position: top left;
background-repeat: no-repeat;
overflow: hidden;
}
ul li a:hover, ul li a:hover span {
background-position: bottom left;
}
ul li#item1 a, ul li#item1 a span {
background-image: url(/img/nav-item1.jpg);
width: 83px;
}
In short what this does is to cover over your base element (the a tag) with an absolutely positioned element (the span tag). The rollover effect is achieved by shifting the background image position using the :hover css event.
I believe that this technique was originally devised by Petr Stanicek and Tom Gilder, and I pass all credit for it to the original developers. This is sufficient to cover all of the major modern browsers, and is fairly well documented throughout the web. However if you wish to get IE6 to respond to this as well (and reliably so) without using javascript, simply add the following modification (something that I haven’t seen documented before, although I’m sure there are blog posts out there covering this):
ul li a, ul li a span {
border: 0px solid red;
}
ul li a:hover, ul li a:hover span {
border: 0px solid blue;
}
Hopefully you should now have a nice, and quick loading rollover-navigation using custom fonts. The advantage of this technique over others is that, if you have images disabled – for example on a mobile browser or for accessibility reasons – the underlying text still appears, which of course you can style to your satisfaction.
To improve performance even further, you can create one large image that has all of your background images and rollover states on them, not just for one single element / nav item. This is a technique used by many of the web’s stalwart websites (as well as the smaller ones too). For further information, see this excellent post on mezzoblue’s website.
Image credit to developmentseed
