Here is a copy (.pdf) if you didn’t get yours.

So I found the code to make it work on both IE and Firefox (will not work on any other browser), as well as improving its ‘unobtrusiveness’. As you can see from the code, I only display the link if the browser is either Internet Explorer or Firefox otherwise the link text is blank.

The ‘Browser.Detect’ object is from a script from the JavaScript guru himself, PPK which detects what browser the visitor is using. Browser detection isn’t used as much today as it once was but it is still needed on some occasions.

Internet Explorer

Firefox

function browserBoomkark(id) {
 
var link = document.getElementById(id);
 
switch (BrowserDetect.browser) {
 
     case 'Explorer':
 
          link.innerHTML = 'Set to Home Page';	
          link.style.cursor = 'pointer';
          link.onclick = function () {
               this.style.behavior='url(#default#homepage)';
               this.setHomePage('URL');
          }
 
      break;
 
      case 'Firefox': // only supports making page a favorite
 
           link.innerHTML = 'Set to Favorite';
           link.style.cursor = 'pointer';
           link.onclick = function () {
 
                window.sidebar.addPanel('label', 'URL', "");
           }
 
           break;
 
      default:
 
           // nothing is displayed for other browsers
      }
}

Test the page yourself to test it out and download the code (.zip).

Note: For short reference checkout out the Core CSS RefCardz:
Part 1 and Part 2 (.pdf) by Molly Holzschalg.

<rel ="stylesheet" media="print" type="text/css">

If a style sheet has a media type of “screen”, it will not be used when the page is printed. If no media type is specified, the style sheet would influence the printed results.

note: Any style sheet intended only for printing purposes must be given the print media type to prevent it be from implemented on screen. Nobody wants to print an article written in white text on a solid black or extravagant rainbow background.

Here are some videos (.zip) narrated by CSS guru Eric Meyer on setting up a print style sheet:

Print style overview
Creating a basic style
Hiding graphic content
Improving the look
Modifying sub content
Adding a footer

Here is a form using a table for its layout and here is the same form using CSS for the layout. If you don’t view the source for either page, could you tell which one used tables or CSS?

Designing without tables definitely takes more time when you think about the layout of each input element and its semantic meaning. Though once you do, your forms will be easier to maintain, more cross-browser compatiable and accessible and will even download a little faster.

View the source of both examples to see the differences and hopefully it will help you make the transition too.

Two additional resources would be this excerpt (.pdf) from the wonderful book The Art & Science of CSS that talks about how to properly design a form with semantic markup and CSS and this useful online tool from Accessify.com that gives you a head start in creating a CSS based form layout (minus the styles).

Ever wondered how they were done?

Well, I found out how from Christian Watson.

Here is a simple example and the code (.zip).

When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it’s then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.

Here are some videos (.zip) narrated by Andy Clarke and Molly Holzchlag that will teach you the basics of floats.

Floating columns
Floating elements
Clearing floats
Floated web layout

Here are some really good articles (.pdf) on different aspects of floats as well:

Floating Theory   Floating Images within Text   Clearing Floats    Float Tricks

Classes should be separated with a space, not a comma. If any style rules overlap between the classes, a class further down the CSS document will always override those above.

<h6 class="boxout highlighted">...</h6>

The basic purpose of CSS is to allow the designer to define style declarations, and to apply those styles to selected portions of HTML pages using selectors which are references to an element or grop of elements to which the style is applied.

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces.

To get a jump start on learning the basics of CSS check out these video tutorials (.zip):

Selectors
Advanced Selectors
Text Properties pt.1
Text Properties pt.2
Inheritance
The Cascade

Fortunately, IE contains a feature called ‘conditional commenting’. Simply make yourself a new IE6 friendly stylesheet, include it in your page as usual and wrap it in a conditional comment to hide it from everything except the guilty browser.

<!--[if IE 6]>
<link rel="stylehseet" type="text/css" href="ie6styles.css" />
<![endif]-->