mappa con i css. sostituzione di immagine

[speriamobene]

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).

#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?

[miki.]

nei css del tag a, dove specifichi l'altezza e la larghezza, aggiungi
display:block;

[speriamobene]

Originariamente inviato da miki.
nei css del tag a, dove specifichi l'altezza e la larghezza, aggiungi
display:block;

ottimo, anzi, purtroppo solo "bene".
in questo modo ho risolto il problema dell'altezza, ma non del testo che 'eccede' i 32px... la larghezza mi diventa quella di 'Home page' ad esempio per la home

come ovviare?


p.s. - ho cmq nontato che mettendo 'display:block;' le varie voci in elenco mi ritornano uno x riga e non uno accanto all'altra come ottenuto prima. soluzioni?

[miki.]

leggi qui.

forse ti può aiutare
http://www.constile.org/tips/emulare...ate_con_i_css/

[speriamobene]

si visto.
ma nn mi aiuta in quanto lì nell'href non c'e' nessun testo... cosa che io invece ho.