Attention !

• L’outil gratuit "DebugBar" sous IE est très pratique, et permet notamment d´afficher le DOM d´une page.
• Sous Firefox, un bon outil de debug html/javascript/css : Firebug

Tips

• Le "Hack CSS" est ce qui permet de contourner les bugs IE. Exemple :
  BODY { COLOR: red !important;
  COLOR: green;
  }
  Alors la page sera rouge QUE sous Firefox (ou autre, en tout cas pas sous IE6 qui ne reconnait pas la commande !important et appliquera donc le vert...). A noter que cette solution est à choisir en dernier recours lorsqu´on a à faire avec une vraie incomptatibilité Firefox / IE.
• Les Z-INDEX ne marchent que pour les éléments explicitement positionnés (position: absolute) (IE6).
• Rollover : Au passage de la souris, au lieu de faire deux images distinctes :
  
  A { BACKGROUND : url("mon_image_1.gif"); }
  
  A:hover { BACKGROUND : url("mon_image_2.gif"); }
  
  Il vaut mieux en faire qu´une seule (qui contient les deux images) qu´on fait "coulisser" :
  
  A { BACKGROUND : url("mon_image.gif") 0px 0px; }
  
  A:hover { BACKGROUND : url("mon_image.gif"); -50px 0px; }
   


• La pseudo classe :hover n´est associée qu´au tag A.


• Un nom de classe ne doit pas commencer par un chiffre. Cela plantera sous Firefox.


• Application d´un style avec un attribut particulier : input[type="text"] {background-color: blue}.


• Attention, pas d´espace entre la quantité et l´unité ("25px" et non "25 px"), ça plantera sous Firefox.


• L´épaisseur de border est ajouté au width et height de la boite.


• Font-color n´existe pas ! C´est  "color" qu´il faut utiliser.


• Pour changer une background-color sur un mouseover, le plus simple et de faire une balise A qui n´est liée à aucune URL. Faire un style "A:hover" et le tour est joué.


• Attention à bien utiliser la palette des 256 couleurs WEB pour ne pas avoir de surprises au rendu. Visiter le site Visibone (OBSOLETE)


• Pour "Font-family", il est conseillé d´ajouter en dernier choix une police générique.