Matthew J Richards - Freelance Web Developer North Wales

(Photograph courtesy of Copleys)

The original Suckerfish Dropdowns article published over at A List Apart quickly became my/the favoured method of implementing lightweight, standards compliant, semantic and "accessible" drop down menus.

This clever little method makes use of the CSS :hover psuedo class, however, no suprise here, IE doesn't support :hover on elements other than anchor tags.

The sfHover() function was born:

1. sfHover = function() {
2.   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
3.   for (var i=0; i<sfEls.length; i++) {
4.     sfEls[i].onmouseover=function() {
5.       this.className+=" sfhover";
6.     }
7.     sfEls[i].onmouseout=function() {
8.       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
9.     }
10.   }
11. }
12. if (window.attachEvent) window.attachEvent("onload", sfHover);

Now, it doesn't take the brightest spark to twig that we can use javascript to mimic other CSS pseudo classes unsupported or ignored by certain browsers... Which is exaclty what the Sons of Suckerfish provided us with. A javascript method of mimicking :hover, :target, :active and :focus pseudo classes.

However... It's just not pretty enough! And if you like me, have adopted (and fallen in love with) the jQuery Javascript framework, you know there's a much nicer way of doing things!

I present to you:

jQuery Perciformes v1.0 - The entire Suckerfish family under one roof!

A jQuery plugin housing methods to mimic :hover, :focus, :active and :target psuedo classes.

Alternatively you can:

• View an online demonstration (usage examples)
• or Download the ZIP with both example and plugin

Whilst working on my latest project, a web portal for an e-learning environment, I was presented with the issue of screen flicker in IE6 for elements using CSS to specify a background image.

Whilst this may be annoying, irritating or just plain ugly to some. For others, particularily those with epilepsy, it could be potentially life threatening.

Being a strong believer in the web being for everyone I set out to fix this issue. A quick google brought up some promising results. Dean Edwards' blog provided me with all the information I required whilst providing some humour based light entertainment at the same time.

this is a browser problem not a server problem. Unfortunately the only way to fix it is by configuring your server.

Luckily I'm a Linux kind-a-guy so setting up Apache took no more than a couple of minutes, a quick reboot of the server and everything was sorted.

Dean also mentions in his blog that there's now a Javascript alternative. However, I tried this solution with out success.

So in summary, for those Apache users like me who want to prevent flickering in IE6 but can't be arsed to read the whole of this blog article.....

Either add to or uncomment the following line to your httpd.conf

LoadModule expires_module modules/mod_expires.so

Then, in either your httpd.conf or a relevant .htaccess file add the following:

1. #this stops screen flicker in IE
2. BrowserMatch "MSIE" brokenvary=1
3. BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
4. BrowserMatch "Opera" !brokenvary
5. SetEnvIf brokenvary 1 force-no-vary
6.  
7. ExpiresActive On
8. ExpiresDefault A18000
9. ExpiresByType image/gif A2592000
10. ExpiresByType image/jpeg A2592000
11. ExpiresByType image/png A2592000

Restart Apache. Voila.

If you're stuck with IIS, check this out

For those in the dark, here is a simple procedure for center aligning a UL within a floating DIV.

Update:

My last example was crap. Here's a much leaner approach courtesy of Trovster via a comment to this article (which I accidentally deleted whilst de-spamming typo)

Using a web site 'footer' as an example application here's the code:

HTML:

1. <div id='footer'>
2.   <ul>
3.     <li>Item 1</li>
4.     <li>Item 2</li>
5.     <li>Item 3</li>
6.    </ul>
7. </div>

CSS:

1. #footer { text-align: center; }
2. #footer ul { display: inline; }

It's so simple it doesn't really need explaining but for the benefit of those with little or no experience in CSS here goes...

1. Wrap your list UL, OL or DL will do (I've not actually tested DL) with a DIV
2. Give your DIV a CSS text-align: property of center
3. Give your list a CSS display: property of inline

Simple!