Lost in the translation

I separated each navigation link into its own <div>, each with its own id. Within each <div> I created the link with both English and Maori text, each within its own <span>. My plan was to use the :hover pseudo-class to turn each span on and off.

<div id="search">
	<a href="search.htm">
		<img src="images/buttong.gif" width="26" height="25" alt="Search">
		<span class="en">Search</span> <span class="mi">Rapu</span>
	</a>
</div>

a span.en, a:hover span.mi {
	display: inline;
}

a:hover span.en, a span.mi {
	display: none;
}

Each <div> was then positioned absolutely using CSS.

Problems

The page worked well in Firefox. My plan was going really well – until I tried it in Internet Explorer. I was sure my code was valid, so I paid a quick visit to SitePoint Forums and had the answer in minutes. Apparently there is a known bug in IE that requires that a property must change on :hover, or the span wont display. So the CSS became:



a:hover {
	background-color: transparent; /*hack for IE */
}

a span.en, a:hover span.mi {
	display: inline;
}

a:hover span.en, a span.mi {
	display: none;
}

Old Browsers

To my surprise, the page looked as intended in IE4 and NN4. The translation mouseovers worked too. The only issue I had was that because the icon was included in the link NN4 put a border around it. I decided that my users and I could live with that.

Unsolved

When moving the pointer away from a link text in Opera 7.2.1 the English text does not re-appear. This only occurs on the text, not if you mouse-out from the icon. I am still unsure why this is, but I suspect that I am the only user that visits our website with Opera. I have tried using the :link pseudo-class on the a element but this cause a few other strange display problems in different browsers.

The Results

The finished page was a huge reduction in size and server requests. The HTML slimmed down to 3.4kB from 15.1kB, CSS increased from 1kB to 2kB, and there are only 4 images totalling 37.9kB reduced from 46 images at 54.7kB. Total page size including images and CSS; 41.3kB, a reduction of 29.5kB.

Conclusion

While the code may not be perfect, it’s not bad. The page worked as intended for most visitors to our site and became much more accessible to text readers.

This took me only half the time I estimated. The manager that requested the change was happy with the result. Now my issue is how to bring the rest of the site up to standard.

This article is © Joseph Lindsay. All rights reserved until September 2004. Creative Commons licence from October 2004.

Pages: 1 2