The solution is rather trivial – and also very simple to achieve.

Open the System Preferences application and choose Keyboard & Mouse then change the Keyboard Shortcuts option to “All controls” (this can also be toggled using Control-Function-F7 if you are so inclined).

You can now use the tab key to cycle through checkboxes (use the spacebar to select a checkbox when you have cycled to it) and radio buttons (you can use up/down or left/right arrow keys to toggle a radio button when the group is in focus).

A similar option is available in Safari (MacOSX as well as Windows) in the Preferences menu option (within the Edit menu). Select the Advanced tab and select “Press Tab to highlight each item on a webpage”. When enabled, this option allows you to cycle through all elements that can receive focus using option+tab (this includes standard links on the page as well).

I’d like to credit this “discovery” to Brad Jasper and Dylan Ryan at MacTips: Tips & Tricks – but the post is no longer available. Thanks for the heads-up guys!

I have also experienced this with Safari 2 on MacOSX – again, switching to 32-bit PNG fixed the problem.

The examples below rely on the following CSS code (described below):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
  }
</style>
<!––[if lt IE 7]>
<style type="text/css">
  #demo1 {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>
<![endif]––>

The first block of CSS sets a background image on an element with the id “demo1″ (typically a div, span or img) for all browsers. This works fine for everything else, but doesn’t work with IE prior to version 7.

The second block targets just these “broken” browsers through use of a conditional comment. This second block uses the filter property to set up a proper alpha transparent version of the png. Read more about this here at the MSDN site.

In the following example the CSS above would show the logo.png with alpha transparency as the background to a div:

<div id="demo1"></div>

This next example shows that you can display a png with alpha transparency by targetting a transparent image:

<img src="transparent.gif" id="demo1" alt=""/>

There are plenty of variations of this technique. All the examples above are considered “standards friendly”. This final example shows the same CSS simplified (but not passing validation):

<style type="text/css">
  #demo1 {
    width: 250px;
    height: 100px;
    background: url(images/logo.png) transparent 0 0 no-repeat;
    _background-image: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
        (enabled=true,sizingMethod=scale,src=/images/logo.png);
  }
</style>

If you are putting the CSS above into an external stylesheet, then be aware that the path to the logo.png when used as the background image is relative to the CSS file, but the path to logo.png when used in the filter is relative to the enclosing HTML file. This can cause some confusion.

On a related note… you should always ensure your alpha transparent PNGs are 32-bit to ensure that they always display the same colour across all browsers (specifically Firefox and IE displayed a 24-bit alpha transparent PNG differently using the technique described here – changing it to 32-bit confirmed this was the case).

Macs render text at a screen resolution of 72 pixels per inch (ppi) … Windows renders type at a notional screen resolution of 96 ppi… the difference between 96 ppi and 72 ppi (24 pixels) makes the fonts on a Web page look 33 percent larger when viewed on a Windows machine.

To compensate, there are some very simple CSS rules that you can use to essentially “reset” the text size to be consistent across both Mac and Windows.

<style type="text/css">
   html>body { font-size: 16px; }
   body { font-size: 100%; }
</style>
 
<!--[if IE 7]>
<style type="text/css">
   html>body { font-size: 100%; }
</style>
<![endif]-->

Initially the html>body definition is applied to all browsers that understand the child selector CSS. This will result in setting the font-size on Opera, Firefox, Netscape, IE7, Safari (and other “modern” browsers). It will not be applied to older versions of IE – they will ignore this definition.

Next, the body definition is set for all browsers that didn’t understand the initial definition. Because this definition has lower specificity than the initial definition, it is ignored by the likes of Opera, Firefox, Netscape, IE7 and Safari… but older versions of IE will get this font-size definition.

Finally a conditional comment (which is specific to Windows IE) delivers an override to the initial style by setting the font-size back from a fixed pixel value to a scaleable value for all “new” versions of IE… specifically IE7. It needs to be html>body to ensure it doesn’t have a lower specificity than the initial definition.

Now, whether you specify your element’s font size in pixels, points or ems, you can be confident that text will look the same across browsers on Mac and Windows.

Conditional comments are totally valid markup (for HTML as well as XHTML doctypes) that cause IE browsers running in Windows (the old Mac versions of IE ignored them completely) to parse the contents of the commented markup.

The following code shows how a conditional comment can be used to match “all versions of IE less than version 7″ and include an extra css file and an extra div in the content of the page:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
<!––[if lt IE 7]>
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
<![endif]––>
</head>
<body>
  <h1>Testing</h1>
<!––[if lt IE 7]>
  <div>I’m an old IE running in Windows</div>
<![endif]––>
</body>
</html>

Because of the start HTML comment code (<!--), everything until the close HTML comment code (-->) is treated as a comment for non matching IE Windows browsers.

The code that is actually rendered by the browser is different when viewed in IE Windows browsers older than IE7 and any other browser:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
  <link href="iexplore.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
  <div>I'm an old IE running in Windows</div>
</body>
</html>

This is the code that is rendered in other browsers:

<html>
<head>
  <link href="default.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <h1>Testing</h1>
</body>
</html>

You might choose to use this to set some variables on the page for javascript to use – without having to worry about user agent detection issues and spoofing browsers (remember that this will not work for the old IE Mac browsers – only Windows):

<script type="text/javascript">
  var isIE=isIE5=isIE6=isIE7=false;
</script>
<!––[if IE]>
  <script type="text/javascript">
    isIE=true;
  </script>
<![endif]––>
<!––[if IE 7]>
  <script type="text/javascript">
    isIE7=true;
  </script>
<![endif]––>
<!––[if IE 6]>
  <script type="text/javascript">
    isIE6=true;
  </script>
<![endif]––>
<!––[if IE 5]>
  <script type="text/javascript">
    isIE5=true;
  </script>
<![endif]––>

Be sure to check out the difference between down-level hidden (which is what I have used all the examples in this FAQ) and down-level revealed at the MSDN conditional comments page.

This isn’t really completely new – it has been in Microsoft’s Lifecycle Policy document since at least June 2003 (as seen in this CNet news article from June 2003).

When it was first released in March 2000, version 5.x of IE for the Mac was much more standards compliant than it’s Windows counterpart – and even though Microsoft ended development over 2 and a half years ago, the browser still performed better at rendering CSS in a consistent fashion than more modern Windows Internet Explorer builds. That’s not to say the Macintosh version wasn’t ready for retirement… and without anyone remaining to develop it… it’s loyal users have quietly migrated away.

We now have Apple’s flagship Safari as well as the latest Firefox, and Opera browsers available for MacOSX as well as a dedicated following of less well-known browsers (including iCab and Camino) that remain in development.

I don’t think the loss of IE is going to be a problem for Mac users and web developers going forward – it will be good to see it finally drop off the web logs, though.