J'ai trouve comment resoudre mon probleme d'espace entre les images, mais je ne sais pas pourquoi. Peut-etre connaissez vous la reponse ? Voici comment j'ai resolu le probleme :

#espressoTop {
	display:block;
}

#espressoLeft {
	float:left;
}

<div><img id="espressoTop" src="espresso_top.gif" alt="" /></div>
<div id="espressoLeft"><img src="espresso_left.gif" alt="" /></div>

Remarquez que le "display:block" est applique a la premiere image alors que le "float:left" est applique au div qui contient la seconde image. Appliquer les deux aux images, ou les deux aux elements div donne un resultat qui marche avec un navigateur, mais pas avec l'autre ! En grande partie, les CSS restent un mystere pour moi, et c'est pourquoi je teste immediatement chaque changement avec plusieurs navigateurs. En changeant des details, une propriete margin en padding par exemple (equivalentes visuellement s'il n'y a pas de bordure), ce qui semble etre un bug avec un navigateur disparait parfois. Pour reussir a obtenir ce que l'on souhaite, il faut : changer, tester, retester, recommencer.

J'ai egalement cree un element div autour du texte, auquel j'ai ajoute le style "clear:left" afin que le texte soit affiche en dessous la tasse, et non - s'il y a suffisament de place - a sa droite, directement en dessous du sous-titre.