Problema con lo sfondo di un'immagine con collegamento

[Uninvited]

Ok, è un po' più complicato di ciò che suggerisce il titolo...

Ho inserito un'immagine di sfondo per i collegamenti ipertestuali, in modo che apparisse una sfera affianco ai link e che ruotasse passando il mouse sulla scritta.

A:link
{
color: #2772B2;
text-decoration: underline;
background-image: url(sfera.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 12px;
margin-right: 0px;
}

Questo è il risultato (la scritta in blu è un link):


Il problema è che usando anche immagini come collegamento, la sfera appare anche affianco ad esse! Non sono riuscita ad eliminarla in alcun modo, cosa posso fare per levarla e lasciare l'immagine sola?

[LùcazStrict]

puoi usare delle classi per i collegamenti che richiedono la sfera.

A.classe_sfera:link
{
color: #2772B2;
text-decoration: underline;
background-image: url(sfera.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 12px;
margin-right: 0px;
}

[Uninvited]

Originariamente inviato da LùcazStrict
puoi usare delle classi per i collegamenti che richiedono la sfera.

A.classe_sfera:link
{
color: #2772B2;
text-decoration: underline;
background-image: url(sfera.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 12px;
margin-right: 0px;
}

Ci ho pensato però a questo punto dovrei modificare ogni pagina... Non c'è alcun modo per fare il contrario, cioè assegnare una classe che elimini lo sfondo (visto che viene automaticamente applicato anche alle immagini purché fungano da collegamento)?

[fcaldera]

Originariamente inviato da Uninvited
Ci ho pensato però a questo punto dovrei modificare ogni pagina... Non c'è alcun modo per fare il contrario, cioè assegnare una classe che elimini lo sfondo (visto che viene automaticamente applicato anche alle immagini purché fungano da collegamento)?

a.nosfera {
background: none;
padding-left: 0;
}

[Uninvited]

Originariamente inviato da fcaldera
a.nosfera {
background: none;
padding-left: 0;
}

Inizio a chiedermi se non sono io a sbagliare il codice!
Ho messo questa parte che mi hai scritto nel CSS, senza cambiarla. Nella pagina in cui compare l'immagine invece ho scritto:

<div class="nosfera">
[img]immagine.png[/img]
</div>

Però la sfera continua a comparire... Sono io a sbagliare vero?

[LùcazStrict]

Originariamente inviato da Uninvited
Inizio a chiedermi se non sono io a sbagliare il codice!
Ho messo questa parte che mi hai scritto nel CSS, senza cambiarla. Nella pagina in cui compare l'immagine invece ho scritto:

<div class="nosfera">
[img]immagine.png[/img]
</div>

Però la sfera continua a comparire... Sono io a sbagliare vero?

direi di si, perchè richiami la classe di A che hai assegnato a un div. quindi:
o assegni la classe nosfera a A e non al div che lo contiene, o modifichi il css in:

div.nosfera a{
background: none;
padding-left: 0;
}

[Uninvited]

Originariamente inviato da LùcazStrict
direi di si, perchè richiami la classe di A che hai assegnato a un div. quindi:
o assegni la classe nosfera a A e non al div che lo contiene, o modifichi il css in:

div.nosfera a{
background: none;
padding-left: 0;
}

Ce l'ho fatta e funziona benissimo, grazie per l'aiuto! In realtà avevo deciso di metterlo ad un div perché usando semplicemente a.nosfera non funzionava, ho dovuto mettere a:link.nosfera perché funzionasse come class nei link.

[LùcazStrict]

perfetto!!

cmq in effetti non capisco come mai ogni tanto bisogna anche specificare la pseudo-classe... mah!!