Guidelines:

  1. Examples should have no dependencies outside of test.
  2. Examples should be as short as possible

Background images exceed width/height specification in IE 6

Solution is to use overflow:hidden.
Incorrect Correct 
.ex1a {
  background: url(images/discTriF0.gif);
  width : 9px;
  height : 9px;
}

.ex1b {
  background: url(images/discTriF0.gif);
  width : 9px;
  height : 9px;
  overflow : hidden;
}

Margins are doubled on floated divs

to fix, set display:inline on the floated div.
Incorrect correct 
.ex2a {
  width : 10px;
  height : 10px;
  margin-left : 10px;
  background : #FF0000;
  float : left;
}

.ex2b {
  width : 10px;
  height : 10px;
  margin-left : 10px;
  background : #FF0000;
  float : left;
  display : inline;
}

The IE6 box model counts the border as part of the width (width = content + border + padding)

Solution: add an outer div for border, an inner div for padding.
Border and width on same div Border on outer div border on inner div
CSS is as follows: 
.ex3back {
	width : 20px;
	height : 20px;
  background : #FF0000;
}
.ex3border {
	width : 20px;
	height : 20px;
	border : 5px solid #00FFFF;
}