Des styles utiles

Centrer un bloc <DIV> dans une page à la fois verticalement et horizontalement

position:absolute;
left: 50%;
top: 50%;
width: 900px;
height: 600px;
margin-left: -450px;
margin-top: -300px;

Comment règler la hauteur d'un <div> pour qu'il s'étende jusqu'en bas de page ?

html, body {
height: 100%;
}

#container {
position: relative;
min-height: 100%
}

Créer une page de vignettes sans tableaux et sans <div>

ul {
margin: 0;
padding: 0;
display: block;
height:700px; }

li {
margin:10px;
display:block;
width:145px;
background-color: orange;
min-height:250px;
float: left;
position: relative;
list-style: none;
}

li div {
margin: 5px;
}

Pour être sûr que les bordures s'affichent de la même façon sur tous les navigateurs !

Tout sur une seule ligne !

border-top: 1px solid #FF0303;
border-bottom: 1px solid #650100;

Des Css ok... mais à condition

Si la version d'Internet Explorer est inférieure à la 7...

<!--[if lt IE 7]>
ce que tu veux.
<![endif]-->

Forcer une image à se positionner
vers le bas d'un conteneur (ex : <div>)

<div style="position:relative;height:300px;border:1px solid">
<img src="1.jpg" style="position:absolute;bottom:0px;heiht:70px">
</div>

Puces : pour que ça fonctionne sous IE et FF

La technique visant à utiliser une image en arrière plan afin de contrôler réellement la position des puces d'une liste (et ce dans l'objectif d'une compatibilité complète sur les différents navigateurs, le nerf de la guerre encore et toujours) est la suivante :
Placer le background sur une ligne séparée et non sur une seule ligne !!! C'est comme ça, il ne faut pas chercher pourquoi...

ul{
margin:0px;
padding:0px;
}

li{
list-style-type: none;
position:relative;
padding:0px 0px 0px 10px;
margin:0px;
display:block;
background-repeat: no-repeat;
background-position: left 6px;
background-image: url(../images/puce.png);
}

Flash en 100% sous Firefox !

Problème
Une animation Flash d'une hauteur de 100% n'occupera pas entièrement l'espace disponible dans la fenêtre du navigateur si la hauteur de son conteneur n'est pas elle aussi réglée sur 100% de haut.
Solution
Régler la hauteur du conteneur de l'animation (html, body ou conteneur p/div) à 100%.
Description détaillée
Dreamweaver a récemment corrigé son insertion du doctype, ce qui signifie que les développeurs peuvent (enfin!) affecter les doctypes correctes, completés avec une URL vers le DTD référent. Au bout du compte, cela se solde par un formattage plus stricte, ce qui en soit est une bonne chose. Cependant, dans les navigateurs Mozilla, cela implique que les SWFs en mode plein ecran ne s'affichent plus correctement.
Par SWFs en plein ecran, on entend ceux dont la largeur et la hauteur sont réglés sur 100% dans les balises object/embed. Avec des doctypes valides, les navigateurs comme Firefox and Netscape affichent les SWFs à environ 1/5eme de leur taille réelle : ils ressemblent à des timbres postes alors qu'ils devrait occuper entièrement l'espace de la fenêtre.
Le conseil qui est souvent donné est celui de supprimer le doctype. Le bricolage fixe le problème certes mais, le prix à payer est.... ben, du bricolage. Ce n'est pas la meilleure solution. La règle CSS suivante corrige l'interprétation de Mozilla en dépit du doctype.

<style>
html, body { height: 100%; }
</style>

(soumis par David Stiller, traduit de l'anglais par Desimagesparmilliers.com)

Un lien en "pointillés" identiques sous IE et FF

Juste une question de mesure...
a{
text-decoration:none; line-height: 20px;
border-bottom-style: dotted;
border-bottom-width: 1px;
[if lt IE 7]>
border-bottom-width: 1pt;
<![endif]
}
a:hover{
border-bottom:none;
}