Avoiding Pitfalls in IE6 Compatibility
As much as web developers around the globe might wish otherwise, Internet Explorer 6 has a large enough user base that websites should still generally be implemented with it in mind. A tech-oriented blog with a savvy user-base might be okay targeting only newer browsers, but most of us aren't so lucky; the average e-commerce site probably can't afford to lose the 10-15% of users that might be on IE6.
You may not be able to avoid spending some development time on IE6, but keeping some of the following common issues in mind should help ensure that you're not taking any longer than absolutely necessary.
Javascript: test early and often
While it's perfectly fine to do most of your development with a newer browser, make sure to test your site in IE6 every time you implement new functionality. Complex javascript in particular can be a hidden gotcha - code that runs virtually instantaneously on newer browsers can sometimes be incredibly slow on IE, and this becomes an even bigger issue when you consider that most IE6 users will also be using older equipment. In particular be careful when doing mass string operations - even some simple operations like concatenation are very slow in IE. Creative use of arrays and functions like join can be used as a speedier alternative.
// example of bad javascript
...
// example of speedier alternative
...
Older versions of IE also have a tendency to cache ajax requests unless explicitly told not to, so make sure your requests either have a distinctive URL (i.e. append a timestamp/session ID) or return 'no-cache' in its header. Alternatively, Post requests are generally not cachable whereas Get requests are, so changing your request method may work when the others aren't an option.
// example of no-cache header
..
// example of post ajax request
...
Complex form layouts
Forms tend to trigger a considerable amount of quirkiness in IE6, and some elements (like select boxes) are less configurable than in most other browsers. Forms should be designed to degrade gracefully in IE6 from the beginning - barring alternative stylesheets or hacks you will have a very hard time getting form elements to match the exact dimensions rendered in other browsers. Additionally, some IE rendering bugs like the "peekaboo" bug tend to show up more often with elements like inputs, which leads us to...
Margins and layout bugs
IE6 has so many rendering quirks that it would be impossible to even begin to cover them all here, but there is a family of bugs related to floated elements that can often be corrected with a single CSS entry, and that I will cover. Internet Explorer has a tendency to apply left margin on floated elements incorrectly in a variety of ways - doubling the margin's width and a ghost "double" indenting of text near a floated element are the two most common. If you encounter something similar to this, try adding "display: inline" to your floated element's CSS definition. At worst it's harmless and doesn't affect rendering, as floats are explicitly block elements according to the standards, and even IE respects that - but it does correct many float glitches, regardless.
Another common bug is referred to as the "peekaboo" bug, as it renders your content invisible until a redraw action is called, most often by scrolling the page, at which point it mysteriously appears. This appears to be caused somehow by having an element which clears floats directly below a container which contains floated content and which is also touching the clearing element. It can be fixed by inserting even a single space between the container and clearing div if the design allows, but it can also be corrected by ensuring the container element has the "hasLayout" property set. I'd personally suggest doing this in an IE-only stylesheet, specified with an "if IE" conditional statement, setting the element to have the property "zoom: 1".
// CSS example of hasLayout and zoom inside the conditional IE6 stylesheet
Hacks and conditional statements
Sometimes you just can't get IE6 to match a design using the same CSS other browsers use. There are a variety of hacks out there to feed IE a separate CSS rule where needed, but I recommend using conditional comments instead. This is done by specifying a separate stylesheet with your IE6-only rules inside an "if IE" tag, which looks like this:
<!--[if lte IE 6]>
<link rel="stylesheet" src="ieonly.css" />
<![endif]-->
To other browsers and validators this appears to be a standard HTML comment tag, but IE will interpret it as a conditional statement - if IE, version less than or equal to 6 - and include the contents as normal HTML tags if it matches. There are arguments for and against this over some of the hack methods; my preference is largely due to this allowing me to keep my IE6 specific rules all together in one place.