Ho risolto anche il punto 3, quello del bordo dei prodotti.

Per cominciare, nel CSS, agli elementi .i1, .i2, .i3, .i4 sostituisci display: block con display: inline (per ovviare ad un problema di posizionamento con IE).

Poi sostituisci le definizioni di products a e products a:hover con questo:
codice:
.products a {
  float: left;
  border-bottom: 2px solid #999;
  width: 105px;
  height: 105px;
  padding-bottom: 3px;
}
.products a:hover {
  border-bottom: 2px solid #036;
  width: 105px;
  height: 105px;
}
Mi manca solo il secondo punto che sto ancora studiando.

Ciao.