Problema con stile su Asp.Net Menu control

martedì 31 maggio 2011 - 15.22

Augusto Profilo | Newbie

Buongiorno,
sto utilizzando il controllo Menu in una applicazione web con Asp.Net 2.0.
Negli items del menu ho utilizzato una immagine di sfondo, ma no riesco ad eliminare il colore background dietro il testo.


264x57 3Kb


Credo che dietro al testo venga inserita la stessa immagine, perchè se la cambio varia anche lo sfondo del testo.

Qualche idea su come eliminare questo problema?
Grazie
A. V.

alexmed Profilo | Guru

Ciao
La soluzione che ho adottato io è fare in modo che il link ricopra tutta l'area che occupa nel "td".
Il menu presenta uno stile StaticMenuItemStyle al quale devi attribuire una classe in cui siano previsti questi parametri

.StaticMenuItem
{
line-height: 2em; /* questo serve per aumentare o diminuire l'altezza */
display: block;
background-image: url('...');
/* altro */
}

Prova, al limite postaci il tuo codice, CSS compreso

Ciao

alexmed

Augusto Profilo | Newbie

Ok grazie,
questo risolve bene il problema anche se purtoppo ne apre un altro probabilmente legato alle differenze tra IE e FF.

L'immagine che utilizzo come background è alta 25.
In pratica su FF devo aumentare la dimensione a 27 altrimenti mi scompare il bordo degli elementi.
In ogno caso su FF scompare sempre il bordo dx dell'ultimo elemento statico (il più a dx)

Grazie comunque
A. V.

alexmed Profilo | Guru

Prova anche a vedere gli effetti dei margini e del padding che dovrebbe essere per entrambi impostato a zero
e a questo punto prova anche ad eliminare line-height e impostare l'altezza

Ciao

alexmed

Augusto Profilo | Newbie

Si, avevo già impostato margin e padding a 0 ed il problema resta.
Per avere il solito comportamento tra IE e FF (almeno in parte) devo impostare l'altezza di 2px in più rispetto alle dimensioni dell'immagine di backgroung (considerando che ho il bordo si 1px negli elementi). E comunque mi rimane incomprensibile il problema del bordo dx dell'ultimo elemento.

PS. Se elimino il line-height perdo l'allineamento verticale del testo nei menu items.

Grazie
A. V.

Augusto Profilo | Newbie

Grazie per le risposte; ho però risolto così:

display: block non va messo a livello di menu item ma a livello del link. Quindi:

.StaticMenuItem
{
/* display: block;*/
background-image: url('...');
/* altro */
}

a.StaticMenuItem
{
display: block;
}


In questo modo il rendering della tabella che contiene il menu con l'immagine di sfondo è fatto correttamente (bordi compresi) ed il testo del link non ha sfondo.


A. V.
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5