brandnewbox.co.uk

Skip navigation

The idea of 'skip navigation' links is to allow users to jump quickly over repetitive site header and navigation, and straight to the main content of the page. This can be especially useful for non-graphical browsers such as Lynx or screen readers.

The following HTML and CSS provides a method to do this. Features are:

• The link is initially hidden from CSS capable browsers
• When a user 'tabs' through links on the page, the 'skip navigation' link will pop up in the top left corner while it has focus.
• An accesskey can be used to jump straight to the link

HTML:

Skip to content

CSS:

a#skip {
 position: absolute;
 top: 5px;
 left: 5px;
 padding: 5px;
 font-size: 12px;
 width: 0;
 height: 0;
 overflow: hidden;
 }
a#skip:focus, a#skip:active {
 width: 12em;
 height: auto;
 overflow: visible;
        background: white;
        z-index: 99;
}

Two column list

Using css to style an unordered list into 2 columns:

» 2 column list

Styling <hr> tags

Using CSS to style <hr> tags have very mixed effects on different browsers. A safer method is to style a <div> tag which works much more consistently cross-browser.

» The Lab: Styling <hr> tags.

Commented Backslash MacIE5 CSS Hack

Original source: Sam-I-am.com

#isnotMacIE5 { display: none;  }
#isMacIE5 { display: block; background-color: #060; color: #fff; }

/* commented backslash hack v2 */
#isnotMacIE5 { display: block; background-color: #060; color: #fff; }
#isMacIE5 { display: none; }
/* end hack */

The use of the */ at the end of the first comment line stop IE5 on the Mac realising the comment has ended and so ignores all declarations until a subsequent comment is reached.

Tantek’s Box Model Hack

Original source: Box Model Hack

div.content { 
  width:400px; 
  voice-family: ""}""; 
  voice-family:inherit;
  width:300px;
} 
html>body .content {
  width:300px;
} 

Used to target IE5 and IE5.5 on Windows to fix Box model width & height mis-calculations.