background

[serialkiller]

'sera a tutti,

non capisco perchè non mi funziona questo css in IE

a .img_al {text-decoration:none;}

a:visited .img_al {text-decoration:none;padding-left: 12px;background: url(../immagini/visited.png) no-repeat center left;}

a:hover .img_al {text-decoration:none;}

quindi..

<a href="http://pippo....">

</a>

in Firefox fuziona, cliccndo su una immagine link, mi mette alla sua sinistra l'immagine "visited.png", in IE no

se sostituisco il codice con:

<a href="http://pippo....">
<p class="img_al">a</p>
</a>

funziona

che ho combinato ?

[serialkiller]

c'è, ma rimane sotto all'immagine del link, non vede il padding !

cosa posso fare per risolvere ?

[Mich_]

Ci sono attributi che non sono applicabili alle immagini; in particolare background ha senso solo se l'immagine e` trasparente (con le gif si puo` fare).

Puoi applicare il background al tag a, e dare un minimo di margine all'immagine, ....(oppure dare sfogo alla fantasia).

Altra possibilita`:
usare lo sfondo dell'oggetto a, e non inserire l'immagine come oggetto (in tal caso occorre inserire un testo, che si puo` rendere invisibile con i CSS, altrimenti che non ha i CSS abilitati non vede nulla).

[serialkiller]

'giorno Mich_,

ho preso spunto da http://pro.html.it/articoli/id_669/i...pag_3/pag.html

ho provato come postato in precedenza, abbinando l'hover al tag <img> e funziona solo con FF.

Il tag <img> è contenuto in un div al quale è abbinata la classe "icona_liste", ho provato quindi ad abbinare lo stato hover ad essa, ed in questo caso non funziona + nemmeno con FF.

La stranezza la riscontro se abbino le 2 classi:

a:visited .img_al, .icona_liste {.....

in questo modo sembra funzionare su IE mentre su FF, come è giusto (almeno secondo me), ne mostra 2 afiancate, essendo img_al dentro a icona_liste.

non ci capisco + nulla

[Mich_]

Mi sono perso ... non e` che potresti cercare di riassumere?

Pero` qualche traccia te la lascio, cosi` fai un po' di prove.

In qualche versione di IE non piace la sottolineatura (carattere underscore) nei nomi di classi e/o id.

La virgola separa due (gruppi di) delimitatori. Non ha nessun altro significato. Quindi scrivere:
a:visited .img_al, .icona_liste {.....}
oppure:
a:visited .img_al {.....}
.icona_liste {.....}
(con il contenuto delle graffe uguale)
non cambia assolutamente nulla (salvo bachi del browser).

Attenzione anche alla sintassi: nei CSS una virgola di troppo o mancante dentro le graffe puo` inibire l'interpretazione di quanto segue.

[serialkiller]

Originariamente inviato da Mich_
Mi sono perso ... non e` che potresti cercare di riassumere?

Pero` qualche traccia te la lascio, cosi` fai un po' di prove.

In qualche versione di IE non piace la sottolineatura (carattere underscore) nei nomi di classi e/o id.

La virgola separa due (gruppi di) delimitatori. Non ha nessun altro significato. Quindi scrivere:
a:visited .img_al, .icona_liste {.....}
oppure:
a:visited .img_al {.....}
.icona_liste {.....}
(con il contenuto delle graffe uguale)
non cambia assolutamente nulla (salvo bachi del browser).

Attenzione anche alla sintassi: nei CSS una virgola di troppo o mancante dentro le graffe puo` inibire l'interpretazione di quanto segue.

Incomincio a perdermi anche io

riassuntino:

come dicevo in precedenza, sto cercando di utilizzare la tecnica link visited, trovata su pro.html

prendiamo esattamente l'immagine usata in quell'esempio.

Per quanto riguarda i link testuali, non si presenta nessun problema, se non quelli elencati alla fine dell'articolo in questione, ma che non mi riguardano, perchè non stiamo parlando di link testuali, ma di immagini che fungono da link (almeno così ho capito).

Fatto questo preludio, io mi ritrovo una situazione del tipo:

<div class="icona_liste">

[img]immagine...[/img]

</div>

quindi la mia "immagine" che premuta mi porta al link desiderto.

la classe "img_al" e "icona_liste" sono così strutturate:

a:visited .img_al {text-decoration:none;padding-left: 12px;background: url(../immagini/visited.png) no-repeat center left;}

.icona_liste {float:right;height:22px;}

questo mi porta ad avere la mia "immagine" con la sua spunta a sinistra, una volta che il link "immagine" è stato visitato.

Questo funziona su Firefox in modo perfetto, in IE invece, l'immagine di spunta, si posiziona sotto all'immagine famigerata, quindi non si vede....in prtica non è sensibile al padding-left.

spero di essermi spiegato un po' meglio

[Mich_]

E` noto che c'e` differenza nel box-model di IE e degli altri.
In particolare il padding e` trattato in modo diverso:
in IE il padding fa parte del width
in quelli standard il padding e` esterno al width.

Comunque comincia a semplificare:
il text-decoration non ha senso in un'immagine: toglilo, almeno nelle prove (eviti di fare confusione a te e a chi ti legge)

Poi elimina l'underscore nel nome: come ti dicevo qualche IE lo prende come errore di sintassi.

Comunque in quel caso non ti serve: non credo che avrai immagini dentro il link da trattare in modo diverso, e se proprio puoi definire la classe al link. Quindi:
a:visited img {padding-left: 12px;background: url(../immagini/visited.png) no-repeat center left;}

E puoi sempre mettere lo sfondo al link, anziche` all'immagine:
a:visited {padding-left: 12px; background: url(../immagini/visited.png) no-repeat center left;}

(forse devi pero` definire il link come display:block

Spero di non aver creato piu` confusione che altro.

[serialkiller]

hai ragione, nel css ho lasciato parti che non servono, le ho tolte

ho provato assegnando a:visited alla classe "icona_liste"

che ho modificato in questo modo:

.icona_liste {float:right;height:22px;width:28px;text-align:right;}

in questo modo ottengo uno spazio dedicato all'immagine "icona" + ampio dello spazio che sarebbe necessario + un allineamento a dx del contenuto, così da lasciare spazio all'immagine di spunta.

funzionare funziona con Firefox, Opera e con IE...diciamo che funziona, ma per vedere la spunta, bisona fare un refresh o spostarsi di pagina, tornando cè la spunta

ora provo a levare l'underscore, magari miglior la cosa...spero

[Mich_]

per il problema del refresh:
probabilmente non hai l'immagine caricata.
Puoi fare un preload con JS, oppure usare un'immagine "doppia" che sposti a seconda di cosa vuoi visualizzare. E` un trucco molto usato con i CSS, e trovi esempi nel forum, o in tanti altri siti.

[serialkiller]

Originariamente inviato da Mich_
per il problema del refresh:
probabilmente non hai l'immagine caricata.
Puoi fare un preload con JS, oppure usare un'immagine "doppia" che sposti a seconda di cosa vuoi visualizzare. E` un trucco molto usato con i CSS, e trovi esempi nel forum, o in tanti altri siti.

per la tecnica di spostamento ok la uso nel menù infatti

non mi sembra però un problema di caricamento, perche se ne ho 3 in una pagina, per me è caricata, quindi quando premo la quarta non dovrebbe caricare nulla...credo, e in FF non succede anche se ho la cache disabilitata