Principal Software Engineer/Architect, motorcyclist, drummer, and artist
Attached is a .zip file that contains the source code and a set of example web pages that will allow you to dynamically render links (or any html tag for that matter) with one of two classes depending on which page you are viewing
It gives you the ability to render nav bars that display items as selected and unselected.
If you have ever seen Firefox 2 and 3, IE 6 and/or IE 7 render the scroll bars on a div that has the overflow: auto property set what follows is a full description of the problem and a solution.
I run a number of VMWare virtual machine instances on my Linux host and in one of them I do a lot of Photoshop work. This involves a lot of holding down the Shift key, which with the default installation of Kubuntu 8.04 enables the sticky keys and slow keys accessibility options.
To turn this off, go to System Settings/Accessibility and click on the "Activation Gestures" tab. Then uncheck the "Use gestures for activating sticky keys and slow keys".
Click the Apply button and how you can hold down the Shift key as long as you’d like.
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;
left:0px;
top:0px;
width:0px;
height:0px;
overflow:hidden;
}
#skip a:active,
#skip a:focus
{
width:auto;
height:auto;
}
Markup:
<div id="skip">
<a href="#skip">Skip Nav</a>
</div>
<p><a name="skip"></a>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Here are links to some accessibility validators sent to me by my friend Karen:
Here are a couple of cool websites for picking and generating color palettes:
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 contained complicated CSS layouts (I
know this because I designed and built them myself). I then composited
them in Photoshop, laying the Mac screen shot @ a 50% opacity over the
PC screen shot.
I was actually shocked to see how closely they rendered the
pages. In most cases, exactly, down to the font spacing. I have
included links to each of the pages below for viewers to check them for
themselves.
Furthermore, when working on another project, I noticed that a
page wasn’t rendering correctly in Safari 3.2.1 on the Mac but was in
all other browsers on the PC. I checked it on the PC with Safari
version 3.2.2 and it rendered the exact same anomaly.
My conclusion is that the 3.2.x version of Safari renders pages the same under both Windows and 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.).
Here is a link with information on how to run both Safari 3 and 4 on the same Mac.