Articles

Slightly lighter color (assuming your text is black), dotted bottom border, and a question-mark cursor. This has become a somewhat standardized approach, which is always a good thing in design usability.

abbr {
 border-bottom: 1px dotted #222;
 color: #222;
 cursor: 

I just updated my old CSS Sprites article yesterday, and I thought it would be kind of fun to ask everyone to share sprites that they have created themselves. Let’s make a quick giveaway out of it too!…

* { margin:0; padding:0; }
html, body {
   height: 100%;
}
body #fixedElement {
   position:fixed !important;
   position: absolute; /*ie6 and above*/
   top: 0;
   right: 0;
}
#page-wrap {
    width: 600px;
    margin: 0 auto; 
    font: 16px/2 Georgia, Serif;
}

The 100% …

Set up and array of filenames, which correspond to the file names of the images you are trying to randomize.

<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

  $i 

This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015.

Spoiler alert: they …

I am really liking the new snippets area we have going here. I find myself using it all the time, which is exactly why I thought it was worth building. Remember there is an RSS feed just for snippets, which …

Servers can be configured to show the contents of a directory that doesn’t have an index file to render. The result is usually less than visually spectacular:

We can take control of …

This isn’t an end-all-be-all solution to fixing all weird IE z-index issues, but it certainly can help in some circumstances. What it does is loop through each of the elements that you declare and apply ever-declining z-index values on them. …

function doSomething() {

    /*
           This code by Chris Coyier
    */

    var i = 0;    // counter to be used later;

}

Comments in JavaScript can be between /* */ markings (useful for multiple line comments) or after // markings (for …

<?php

    /*
           This code by Chris Coyier
    */

    $i = 0;    // counter to be used later;

?>

Comments in PHP can be between /* */ markings (useful for multiple line comments) or after // markings (for single lines only).…

Example:

/*
  This is a 
  comment in CSS
*/
body {
  font-family: system-ui;
  font-size: 62.5%  /* 1em = 10px */
  line-height: 1.4;
}

The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into …