Nice browsers like Opera and Firefox display abbreviations with a blue dashed line underneath, when you hover over the text a tooltip pops up to display the title text of the abbreviation. So you can do something like this to expand an abbreviation

<abbr title="Hyper Text Markup Language">HTML</abbr>

Chrome & Safari offer the tooltip feature but don’t show the dashed underlining unless you provide a style for the abbr tag. Internet Explorer is different again, IE7 & IE8 will display the tooltips (but not very reliably) but ignore the styling, IE6 doesn’t do anything.

To get working properly in all browsers I thought I would try adding a class to each tag to see if Internet Explorer liked that. I had already styled the abbr element to keep Chrome & Safari happy so I just added a selector for a new abbr class to the existing style.

abbr, .abbr {
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: blue;
}

It worked better than I could have hoped, I didn’t need to add class=”abbr” to any of my html abbr tags at all. It seems that just declaring a style for a class of .abbr makes Internet Explorer work like the other browsers. And as a real bonus it also works in IE6 and IE8 behaves more consistently too!

I don’t know why this works and perhaps I am not the first to discover this but I thought it was worth sharing.

Method

It’s quite simple in principle. When a user loads one of the pages we are using for this test several things happen:

1. A PHP script creates a session on the server and logs this in a mySQL database
2. If no session exists already then the PHP script writes a little bit of javascript into the HTML page to be served
3. If the client has javaScript enabled on their computer the script will run sending an asynchronous call (to avoid slowing down the pageload while waiting for a response from the server) to the server
4. Another PHP script on the server will find the mySQL record created in step one and update the javascript_enabled flag
5. If the client doesn’t have javaScript enabled then the script won’t run and the database will not be updated

Results

So far we have checked 593 sessions and 21 of them have had javaScript enabled, a rate of 3.5%.

We will give this trial a little time and a bit of analysis before we roll this out for some proper results (and publish the code so other people can do the same).

Edit: Well the first change was to exclude robots, Googlebot and Slurp from Yahoo! were very quick on the scene and of course they don’t use javaScript.

Further Edit: 31st Aug 2010 The second change was to remove the logging from this page, it seems like my little script was interfering with something in the header of the blog page, perhaps Google Analytics.
I am suspicious about the very low percentage of javaScript we are seeing, further investigation is required. It could be that people are reading this post through feed readers rather than directly and so not activating the script.

Further Edit: 6th Sep 2010 Something isn’t right here, the logging works for me but the numbers look far too low. I wonder if there is something wrong with my javaScript code (I am no javaScript expert) which is causing it not to make the ajax call for most people. This is the code that is included into the header of the testing page:

<script type="text/javascript">
// 
// This script is part of my javascript logging routine.
// If javascript is enabled it sends a request to the server which will log the fact that javascript is enabled.
// 
// The cunning bit which copes with the fact that IE6 doesn't know about XMLHttpRequest, thanks to
// http://ajax-prototype.blogspot.com/2007/02/workaround-to-make-ajax-calls-on.html
//
if (!window.XMLHttpRequest) {
  window.XMLHttpRequest = function() {
    return new ActiveXObject('Microsoft.XMLHTTP');
    } 
}
//
// Send the PHP session_id to the server script so it can update the log record for this session
//
request=new XMLHttpRequest();
request.open("GET","http://www.cotsweb.com/update_javascript_log.php?session_id=&lt;?php echo(session_id()); ?gt; ,true);
request.send(null);
</script>

Perhaps someone else can see what I have done wrong?

One of the pages displays the monthly menu for Sophie’s Baked Delights Club, a cake club where subscribers get a different home-baked cake delivered to them once per month.  Each month subscribers can choose from  two different cakes made with seasonal ingredients. Quite simple really but we wanted the page to display the menu in monthly order with the current month at the top.

The cake details are stored in a mySQL database so Sophie can go in and change them as she changes her menu.  But we only store the month rather than the full date so that the menu can just roll over from year to year without unneccesary maintenance being required.    This meant that we couldn’t just read through the file by date nor (except in January) could we just read the months in their normal (Jan, Feb, Mar…) order, if the current month is April we want to display the months as Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec, Jan, Feb, Mar (stored as 4,5,6,7,8,9,10,11,12,1,2,3).

Specifying a sort sequence in mySQL

Fortunately mySQL has a mechanism for doing this, you can use ORDER BY FIELD in your select statement to specify the order you require.  So the code we need is;

SELECT * FROM cake_club_menu ORDER BY FIELD(menu_month,4,5,6,7,8,9,10,11,12,1,2,3) , menu_sequence_nbr

Using PHP to Create the ORDER BY FIELD statement

Of course we can’t hard code the ORDER BY FIELD statement as the sequence will change every month, so I created a PHP function to create the  statement, hopefully the following code is pretty clear

<?php
//
// PHP functions for Sophies Baked Delights
//
function orderByFieldText()
{
//
// Dynamically create text for Order By Field mySQL statement
//   This allows us to list items in month order with the current month first and rolling in to next year
//
//  First get the current month
//
$thisMonth =(date("n"));
//
//  Now set the base text for the statement - menu_month is the database field we want to order by
//
$orderByField = "ORDER BY FIELD(menu_month,";
//
// Now loop through 12 times to create the list of month numbers for the statement
//
for ($i = 1; $i <= 12; $i +=1 )
 {
 $orderByField .= $thisMonth;   // Add this month to the statement
 if ($i <> 12) {                // If this isn't the last item in the list insert a comma
 $orderByField .= ',';
 }
 else {                         // Else insert a closing bracket
 $orderByField .= ')';
 }
 if ($thisMonth == 12)          // If we have got to December (12) next month is January (1)
 {
 $thisMonth = 1;
 }
 else {                         //  Else next month is this month +1
 $thisMonth += 1;
 }
 }
return $orderByField;
}
?>

Reading the database and displaying the menu

Then we just need to call the function in the main PHP module and loop through the returned menu records writing the data to the screen as we go.   As you can see from the following code I used a table with a row for each month.

<table id="cakeClubMenu">
 <tbody>
<?php
//
// Populate the order by field for the database lookup
//
$orderByField = orderByFieldText();
//
// Read the cake club menu file to populate the table
//
$sql = "SELECT * FROM cake_club_menu " . $orderByField ." , menu_sequence_nbr";
$menu_array = mysql_query($sql);
$i = 0;
//
// Now write each line of the table in turn
//
while($menu = mysql_fetch_array($menu_array)) {
 // convert month number to month name for display - thanks to <a title="An easy way to convert a month number to a month name in PHP" href="http://www.gilbertpellegrom.co.uk/php-month-number-to-month-name-the-easy-way/">www.gilbertpellegrom.co.uk</a>
 $monthNum = $menu['menu_month'];   
 $monthName = date("F", mktime(0, 0, 0, $monthNum, 10));
//
//
 switch ($menu['menu_sequence_nbr'])
 {
 case 1 :  // 1st cake for the month starts the row
 echo("&lt;tr&gt;\n");
 echo('&lt;td&gt;'.$monthName.'&lt;/td&gt;'."\n");
 echo('&lt;td&gt;&lt;strong&gt;'.$menu['menu_cake_name'].'&lt;/strong&gt; - '.$menu['menu_cake_description'].'&lt;/td&gt;'."\n");
 break;
 case 2 :  // 2nd cake finishes the row
 echo('&lt;td&gt;OR&lt;/td&gt;'."\n");
 echo('&lt;td&gt;&lt;strong&gt;'.$menu['menu_cake_name'].'&lt;/strong&gt; - '.$menu['menu_cake_description'].'&lt;/td&gt;'."\n");
 echo('&lt;/tr&gt;'."\n");
 break;
 default : // If a 3rd cake is required then this will need modification - currently not allowed
 break;
 }
 }
echo('&lt;/tbody&gt;'."\n");
echo('&lt;/table&gt;'."\n");
?&gt;

Hopefully someone will find this method useful.  As with most problems the answers are all on the internet, but sometimes you need to find the answer before you know what you should have been searching for.

But will it run on my computer?

Yes, as long as you are running Vista or Windows 7.

IE9 uses features  which don’t exist in Microsoft’s older operating systems; that is anything older than Windows Vista,  there are pretty good technical reasons for doing this and IE9 is faster and more secure because of it, but it does mean that IE9 will never run under Windows/XP.    Of course Windows/XP is now pretty old and we can’t expect it to be supported forever, but you can still buy a brand new PC with XP installed and over 65% of PCs are still running XP, more than twice the market share of Windows Vista and Windows 7 combined.

Will people upgrade to Windows 7 so they can run IE9?

I think the days of people upgrading their operating systems to run the latest software, particularly something as basic as a browser are long gone.  Windows 7 looks like a pretty good operating system and I will happily run when I get a new PC, but I’m not going to upgrade an old PC to run it just so I can install IE9.  If I want a better browser than IE8 it is much less painful to install Firefox, Chrome or Opera than it is to change operating systems.

As PC usage increases and as people replace old PCs Windows 7 usage will increase and XP will continue its decline, but it will take years for Windows 7 (or it’s successors) to overtake XP in market share.    As technologies like HTML5 etc become more widespread there will be more need for XP users to move away from browsers which don’t support these features, otherwise they will be unable to use many of the features that other people take for granted.

So what will Microsoft do about Windows/XP?

The people at Microsoft are pretty canny and I don’t think they will want to risk the huge user base still on XP gradually drifting onto non-Microsoft browsers.  They might get the idea that there are other areas where Microsoft products aren’t the only option.

Internet Explorer 8.5?

My theory is that we will see a new version of IE8, perhaps they will call it IE8.5, which will incorporate a lot of the features from IE9 and will run on older versions of Windows.   Although Internet Explorer version 8.5 will never be as fast or as secure as IE9 it could use the same techology to render webpages and so be a good interim step.  It could be distributed through Windows Update (as IE8 was) and so would keep the average Windows/XP user on a Microsoft Browser until they are ready to upgrade to Windows 7.

Of course this is just my theory and I’m sure Microsoft won’t be announcing any such move any time soon, they would much rather that everbody bought Windows 7.  But they didn’t get the market share they have by ignoring most of their customers.  Maybe this time next year I will be able to say ” I told you so”.

1. They keep up to date with the latest releases – these people have adopted IE7 in the past and are now migrating en-masse to IE8.  IE7 usage has dropped from 35% in March 2009 to 14% in February 2010 and I guess this trend will continue until IE7 disappears entirely.The combined usage of IE7 and IE8 has remained fairly stable at around 36-37% of the market.  As IE7 has faded IE8 has taken up it’s share.
2. They have used IE6 for years, possibly in a corporate environment where stability is more important than modernity, or possibly just because  that is what was installed when their PC was first delivered.  These people are now starting to upgrade from IE6 to more modern browsers, IE6 usage has dropped from 31% in March 2009 to 20% in February 2010.The interesting thing is that these people don’t seem to be upgrading to the newer versions of Internet Explorer, rather they are migrating to other browsers, some are moving to Firefox or to Opera but the biggest beneficiary of this move seems to be Google’s Chrome browser.  Chrome usage has gone from less than 2% in March 2009 to nearly 6% in February 2010.As a footnote – Apple’s Safari Browser is also gaining users but I suspect that is due to more people buying Macs and iPhones with Safari installed rather than to people actually choosing to install Safari on their PC.

By amalgamating the version data from the Browser Trends website I have come up with the following graph.  Please click on the image to see the full size graph.

Amalgamated web browser trends Mar 2009 to Feb 2010

You can see how the more modern versions of Internet Explorer are maintaining their market share but IE6 usage is dropping quite rapidly while other (non-IE) browsers take up it’s share.

As a website designer I love this trend, I can look forward to a day when IE6 usage will have shrunk sufficiently that I can ignore it’s many foibles and design for 21st Century browsers instead.

As users of Microsoft’s newer browsers seem to keep up to date with the latest versions we can hope that they will all be using IE9 or even IE10 by then.  Internet Explorer is slowly becoming more standards compliant with each version so hopefully IE9 & IE10 will continue this trend and life will become much easier for me.

I dream of a day when the websites I create work properly in all browsers without me having to compromise the design to get to that state.

Fake Anti-Virus Windows

Recently we have had two cases of PCs (both running Windows XP and Internet Explorer) being infected by “drive by”  malware.   The user is surfing normally and comes across an innocent looking website, then suddenly up pops a virus warning, apparently from their own anti-virus software.  These messages are pretty scary and quite persistent, the correct response is to close the window (by clicking on the cross at the top right rather than by clicking within the window) and leave that website but if you aren’t sure you can easily end up allowing the site to install it’s “anti-virus software” on your computer.

Once the infected website has installed it’s payload (usually what is known as a trojan, from the Trojan Horse) on  your computer you have a big problem, it will pop up “anti-virus” windows all over the place and make web browsing and email impossible.  And, it will usually disable your own anti-virus software and make it very difficult to install any more.

Anti-Malware

The solution lies with the marvellous people at Malwarebytes.org, they offer a free download which, so far, has solved the problem for me.  The  paid version is well worth looking at too, it isn’t expensive and their work is definitely worth supporting.

Now if you have been very wise you will only have been using a limited account for your browsing rather than an account with administrator privileges; you can just login as an administrator and download the software you need.  Sadly some software doesn’t work that well without administrator privileges and most people set themselves as administrators to avoid hassle.  In this case it is likely that the whole computer is inaccessible and you will need to call on a friend so you can download the necessary software to a USB memory stick.

Removing the fake Anti-Virus Trojan

1. Visit the  Malwarebytes.org website and download their anti-malware product to a memory stick.
2. Boot the infected computer in safe mode (you can usually get this option by pressing F8 while Windows is starting up).
3. Insert the memory stick and run the anti-malware installation program
4. Use the anti-malware program to do a complete scan of the computer.  In safe mode you won’t be able to access the internet to update the malware signatures first but I found that the signatures were only a couple of weeks old anyway.
5. Hopefully the anti-malware program will find one or more offensive programs, use the program to remove them then reboot your computer, this time normally rather than in safe mode.
6. Now run the anti-malware program again, update the definitions from the internet and do another full scan.   Malware is a fast moving field and it is quite likely you will find more with a second scan.
7. Reboot again and all should be well.

How to stop malware infections in the future

Make sure your computer is fully updated with the latest updates to Windows and to your other software packages.    Vendors are pretty quick to release security patches; use them.

Install and use another browser;   our current favourite is Google Chrome, the design of Chrome makes it very difficult for Malware to affect anything outside it’s own browser window.  Microsoft try hard with Internet Explorer but even the latest versions are nothing like Chrome for security and of course they also provide the biggest target for Malware authors.

Installing Chrome for all users on your computer

By default when you install Chrome it will only install it for the current user, this is a nuisance if you want to get the whole family using the safer (and faster) browser.  The answer is to  download Chrome Pack , this offers you a whole raft of goodies from Google some of which you may fancy, but if you only want Google Chrome just untick all the other boxes.

Fonts have traditionally been a bit of a nightmare for web designers, the web browser loads the fonts from the user’s computer.  If the font you asked for isn’t installed on the user’s machine then it will default to something else, this means that what the user sees may be quite different from what you intended.

My first thought was “goody a chance to use Typekit for real!”.   Typekit is a new service which lets you use real fonts on your own website, the fonts are loaded on demand from the Typekit website.  This means that you can use proper fonts in a legitimate way but let Typekit deal with all the licensing issues.  You have to pay for most of the fonts of course but the charges are quite reasonable and an awful lot better than licencing direct from the big commercial suppliers.

Unfortunately Typekit didn’t have the exact font I wanted (they are very new and their library of fonts is still growing), but I did discover a free version of the font on fontspace which used the Open Font License (OFL) so I could legitimately incorporate it in the new website.   I was able to do this because the most modern browsers are now starting to support the CSS @font-face declaration properly (though to be fair Internet Explorer has supported @font-face since IE4 way back in 1997).

But of course to work properly I had to provide the browser with the font in a format it could understand.  Thank heavens for Fontsquirrel’s @font-face generator which converts  your existing font file into all the necessary different formats and even supplies you with the CSS code to use them.

So now I had fonts installed and ready to test, I always test any website as extensively as as possible but rarely have I had as wide a range of results  as this.  The following table shows my experience with the various browsers available to me.

All this is very confusing but the conclusion is that I think @font-face is now well enough supported to be used on a live site.   Support should get better over the next few months, particularly as Firefox users move on to version 3.5 (or even 3.6 which supports .woff files).

What Chrome Frame does is tell Internet Explorer to use Chrome’s rendering engine (Webkit) rather than IE’s own rendering engine.  The benefit for the user is faster browsing, particularly when a website uses Javascript, Chrome’s javascript module is much faster than IE’s equivalent.  The benefit for the website developer is that Chrome is a good modern browser, standards compliant and supporting a lot of newer features such as HTML 5 & CSS2/3 which are not even supported in IE8.

The theory is that if a web page works in Chrome then it will work in IE with Chrome Frame.  Chrome Frame is still very new so they are not quite there yet but I’m sure they will get there.   All those IE specific problems which website designers have had to work around for years, including those still hanging around from IE6, will become a thing of the past.  Wonderful!

But will people use it?

The problem is that Chrome Frame, being a plugin for IE, has to be installed by the user.  Do you remember the bad old days when it seemed that every new site required a new plugin?  Once the user has installed Chrome Frame all will be well but that first installation is the sticking point.

As a webdesigner I can put a piece of code on any of my websites which pops up a window giving an IE user the option to install Chrome Frame so they can view the site properly, but I don’t really want to do that.  People are, and should be, wary of installing things when asked to do so by a website.  And I don’t want people to navigate away from my site because it is too scary or demanding.  In any case most sites work fine  in IE anyway so why do they need to install a plugin?

My real hope is that corporate IT installations might think that installing Chrome Frame to upgrade IE6 would be a good idea.  IE6 is currently the most popular browser in the world, largely because there is no reason for the big corporates to change to anything else.   But a plugin might be different, any existing applications will continue to work fine but new applications could use newer features without the extra coding needed to cope with the particular quirks found in IE6.  It could be quite a money saver.

Critical Mass

I will be monitoring my Google Analytics reports for the day when I see “unChromed” IE6 usage drop below 5%.   I think that will be the time to put the plugin code on my own sites.  And when it drops below 2% I will consider ignoring IE6 all together, a happy prospect.

In the meantime I will carry on as usual, coding around the quirks in IE6 and ignoring the other features I might use if IE7 & IE8 supported them.

I wonder what Microsoft think about Google writing a plugin for them?

Part of keeping your site secure is keeping the software up to date, just like you do with your own computer (I hope).  There is a constant battle going on between nice people improving and fixing software and nasty people trying to find new holes which they can exploit for their own gain.  The nice people are working for your benefit so take advantage of their labours and use the upgrades they provide.

If you have a self-hosted WordPress Blog, like this one, then you need to be aware of a new attack.   Take  a look at Lorelle on WordPress for details.  If you haven’t upgraded to WordPress 2.8.4 then your blog is vulnerable to this attack.

We have already upgraded all the blogs we host, we keep an eye on software upgrades as a matter of course.  WordPress is very easy to keep up to date, some other packages require a lot more work, but we will always apply security fixes to any package we host.

No system is 100% secure but by keeping up to date you encourage those nasty people to look for easier targets.

And then there is Internet Explorer 6! The bane of any web designer’s life.  Getting IE6 to behave the same way as more modern browsers can be a real pain.  If a site works in any more modern browser it will probably be pretty good in all the others.  Anything that works in Firefox will almost certainly work  prettywll in Chrome, Safari and Opera and although IE7 and IE8 are not as good at complying with the standards they aren’t too difficult to work with.

IE6 Market Share overtakes IE7!

The problem is that IE6 is still installed on millions of machines around the world.   In fact I just checked out browser versions on the excellent marketshare website and discovered that IE6 has regained its position as the most popular browser in the world with over 25% of the market.  This is largely due to the advent of IE8, many people are starting to migrate from IE7 to IE8 which means that the market share of the newer browsers is being split.  If you combine the shares of IE7 & IE8 it adds up to more than 36%.

I guess that most people who have made the move to IE7 will be happy enough to let Microsoft upgrade them to IE8 so eventually IE7 will fade away as earlier versions like IE4 & IE5 have.  But IE6 is a bigger problem, it was the biggest browser for a  long time early on in the development of a lot of corporate systems, and it still works just as well as it ever did.
If you are running a corporate intranet the substantial cost of  upgrading hundreds or thousands of PCs  to a newer browser and retesting all your internal systems to make sure they still work properly is not matched by any real benefit.  It isn’t broken so don’t  fix it.

This means that while a corporation may have a lovely modern website for its external customers to use, it may only have IE6 installed for its own staff, that is the browser that has been tested against their internal systems.  But this means that when those staff do a bit of surfing in their lunch hour they are still using IE6 to look at everyone else’s websites.

IE6 for Ever

I can’t see this situation changing any time in the next few years, IE6 will continue its slow decline and new websites will have to contine to support it.  This support comes at a cost, extra testing, extra coding and of course a whole bunch of lovely new features like CSS2 & CSS3 which make building good websites much easier but which IE6 just doesn’t know about.

So much as I loathe IE6 I continue to use it every day for testing.   If your site doesn’t work properly with IE6 you could be losing 25% of the customers that have already made the effort to find your site.  That is like kicking out 25% of the customers in your shop because you don’t like the way they talk.  Not a good way to run a business.