IE7: perchè un margin-top negativo non mi rende cliccabile un <li>

[blekm]

titolo complesso, ma problema semplice

http://blekm.altervista.org/menu.html

tutti gli elementi[*] hanno un .class=menu-position impostato con un margin top negativo di -4, questo per rendere uguali gli spazi tra le varie voci

<ul id="menu-voci">
<li id="menu-voci-attivo">Home page
<li class="menu-position">Design
<li class="menu-position">Soluzioni
<li class="menu-position">Progettazione
<li class="menu-position">Portfolio
<li class="menu-position">Contatti[/list]

.menu-position
{
	margin-top: -4px;
}

funziona tutto ok su TUTTI i browser, ma su IE7 l'unica cosa cliccabile è la SCRITTA, invece di essere cliccabile tutta la scatola dell'elemento[*]

se però commento margin-top:-4px; o metto un valore >= 0, (infatti la voce HOME funziona a dovere)

anche su IE7 funziona per bene..

quindi il problema sta nel MENO...

qualche suggerimento?

[gengix]

Prova dichiarare width:100% ai link.

[blekm]

Originariamente inviato da gengix
Prova dichiarare width:100% ai link.

cosi pare funzionare, però ho qualche problema di posizionamento del testo..

vedo di aggiustare questo

grazie

[blekm]

ora però non riesco a staccare la fine del testo dal bordo esterno destro.. si vede sempre sul link del primo post, il testo è appicciato a destra, vorrei un minimo di spaziatura

[gengix]

giocando con del padding dichiarato ai link non riesci?

[blekm]

Originariamente inviato da gengix
giocando con del padding dichiarato ai link non riesci?

#menu-voci li a
{
	display:block;
	text-decoration:none;
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0;
	color:#009;
	font-size:1.1em;
	font-weight:bold;
	width: 100%;
}

se imposto del padding left o right, non sposto il testo.. sposto tutta la scatola[*]

funzionava tutto a dovere, mi ha fregato il 100% per IE7. Questa è l'unica soluzione per IE7? Non capisco perchè un margine negativo non renda cliccabile un elemento[*]...

[gengix]

mi sto copiando il tuo codice..adesso ci guardo meglio

[blekm]

grazias

[gengix]

Tira via la width a 100%. Tira via il padding top e bottom. Attribuisci una height ai link con l'unità di misura in em (così è scalabile insieme al testo) equivalente all'altezza data dai padding attuali + il font-size(e l'eventuale line-height). Per distanziare il testo a questo punto utilizza un padding-right sempre dichiarati in em.

es:

#menu-voci li a
{
	display:block;
	height:1.9em;
	padding-right:0.5em;
	text-decoration:none;
	margin: 0;
	color:#009;
	font-size:1.1em;
	font-weight:bold;
}

.menu-position
{
margin-top:-4px;
}

Dovrebbe funzionare.

[blekm]

grande, pare funzionare.

Devo provare su IE6,ma penso proprio che funzioni anche li..

ti farò risapere, grazie per ora!