devo creare un menu di immagini, secondo gli standard.
quando il mouse va sull'immagine questa cambia.
seguendo quanto indicato qui: http://www.gdesign.it/pages/howto/ar.../imap/imap.php
ho scritto il mio codice seguente (nel css).

nota: il html è praticamente simile con l'unica differenza che invece di [i] utilizzo il tag[*] che nel caso di 'non foglio di stile' mi da' cmq un elenco verticale (visto che i è tra l'altro un tag deprecato).


codice:
#menumain {
	padding-bottom: 3px;
	text-align: right;
	z-index: 2;
	position: relative;
	height: 32px;
}

#menumain ul {
	list-style: none;
}

#menumain a {
	height: 32px;
	width: 32px;
	text-decoration: none;
}

#menumain a li { 
	display: inline; 
        visibility: hidden;
}

a#menuhome {
	height: 32px;
	width: 32px;
	background-image: url(../img/home.gif);
	border: none; 
}
a#menuhome:hover {
	height: 32px;
	width: 32px;
	background-image: url(../img/home.gif);
	border: none; 
}

Ebbene, ho due problemi:

1. l'altezza dell tag a mi viene ignorata.
2. la larghezza del tag a non è 32 ma è quella del testo (anche se non visibile) che è sicuramente più lungo di 32px.

come ovviare a questi inconvenienti?