Month: March 2009

Adding a "Skip Nav" link to your design can sometimes compromise the look and feel of the page.  Moreover it can confuse those visitors who have no idea what it means.

A good solution is to create a Skip Nav link that is only visible when it receives keyboard focus.  This happens as a user is tabbing through the page.

To do so, use the following styles and markup:

Styles:

#skip a,
#skip a:hover,
#skip a:visited
    {
    position:absolute;→ Continue reading “Creating a Skip Navigation Link That is Only Visible When it Receives Keyboard Focus”

Here are links to some accessibility validators sent to me by my friend Karen:

• http://checker.atrc.utoronto.ca/servlet/Submit
• http://wave.webaim.org/  This site features a Firefox toolbar.

Here’s a cool site with a ton of free Photoshop patterns.
and
Another.→ Continue reading “Free Photoshop Patterns”

Here are a couple of cool websites for picking and generating color palettes:

• http://www.lightsphere.com/colors/
• http://colorschemedesigner.com/
• http://www.degraeve.com/reference/color.php
• http://www.degraeve.com/color-palette/ This one is really cool.  Give it the URL of an image and it’ll generate a palette for you.

The following is a set of composite screen shots that were generated to
answer the question: "Does Safari on Windows render pages the same way
that it renders pages on the Mac?".

My conclusion is that it does.

Click here to see the composite screen shots.

What I did was to take a screen shot of exactly the same web
page on a Windows XP machine running Safari 3.2.2 and a Mac running
3.2.1. I used pages that I knew → Continue reading “Does Safari under Windows Render Pages Diferently than Safari Under Mac OS X?”

If you have content on your site on which you want to set a custom line-height, doing so on the body tag can cause some unwanted side-effects and rendering anomalies in some browsers.

My suggestion would be to set the line height on the specific content container (div, span, ul, etc.).→ Continue reading “CSS: Setting line-height on the body Tag Can Causes Un-Wanted Rendering Anomalies”

Here is a link with information on how to run both Safari 3 and 4 on the same Mac.→ Continue reading “How to run Safari 4 and Safari 3 on the same mac”

If you have ever tried to get an LCD tuned just right when using a KVM switch you’ll know that the key is in the pixel clock and the phase settings.

Download and use the attached gif as a test image with which to tune your screen.

Make sure that it is being viewed at 100% (not scaled in your browser) and set your pixel clock so that the pattern is uniform across the screen.  Set the phase such that → Continue reading “Test Image for Tuning Pixel Clock and Phase on an LCD Monitor”

Using a CSS styled unordered list you can create a fairly sophisticated navigational bar with rollover states.

In IE6 and IE7 without some special consideration, you end up with spurious white space rendered between the list item.

Click here for and HTML example of the problem (you’ll need to be using IE 6 or IE 7).

Click here for an example of the fix and a detailed explanation of how to do it.→ Continue reading “Removing Extra Whitespace Between List Item Entries in IE”