Mike Davidson has written about his design signature which has inspired me to write about the elements of my web design signature. As he had mentioned, it seems following my signature leads to no or negligible use for IE specific style sheets.

Update: There is another informative article on getting cross-browser compatibility every time.

1. Use only Classes

   I use ids only if there are javascripts that require one. Makes my styles a lot more re-usable and I don’t have to remember whether I used an id or a Class in the HTML when I write my CSS code.

2. Use Reset CSS

   Eric Meyer’s Reset CSS with the vertical-align:baseline commented out works well for me. vertical-align:baseline does not allow HTML elements with set “align” attributes, to display correctly aligned in IE (and plays havoc with widgets that use inline styles and attributes).

3. Using a clear <div>

   I use <div class="clear"></div> and define in the CSS div.clear { clear:both; } to clear floats. Read more about clearing floats.

4. Use a fixed width layout

   I use a fixed width layout with a center align on the body and left align for the child <div> (with margins set to auto). I use floats rather than position for layouts and for anything whose position is fixed (e.g. the header navigation section), I use absolute positioning.

5. Use starting and closing comment tags

   I use Textmate’s snippets to automatically add a comment that states <!--START CLASS <name>--> next to each <div> and at the closing tag </div> adds the comment <!--END CLASS <name>--> — where <name> is the name of the class assigned to the <div>

   The snippet I use is:

   <div class="${1:name}"><!--START CLASS ${1:name}-->
     ${0:$TM_SELECTED_TEXT}
   </div><!--END CLASS ${1:name}-->

6. Use display:inline for all floated elements

   This takes care of the double margin bug for IE.

7. Use the png-fix

   Most of the designs I work on, have some element of transparency - which require the use of the png-fix.

8. Use a conditional IE CSS

   I use a conditional IE-6 and IE-7 CSS stylesheet. Mostly they contain less than 2 or 3 lines. But it is better to keep them separate from modern CSS without using hacks for individual browsers.

9. Use margins rather than padding

   I rarely use padding (and am very careful with borders) on elements with width specified. This is because of the Box Model Bug in IE as compared to other modern browsers.

10. Use vertical-align:middle

    For aligning inline img with any other inline element — especially images which are longer rather than wider. Read more about Vertical Aligning (update: another great article on vertical align).