<a> IE7 e immagini in background

[serialkiller]

Ho riscontrato su IE7 un particolare comportamento sui background nei tag <a>.

Se il CSS in questione è del tipo:

.pippo {background: url(../immagini/icon_external.gif) no-repeat right top;padding:0 20px 1px 0}

abbinato ad un link testuale, se il testo linkato è lungo a sufficenza per andare a capo, l'immagine di background rimane sulla prima righa e si sovrappone al testo ???

idem facendo una cosa tipo:

a[href$='.doc'], a[href$='.rtf'] {
	padding: 5px 20px 5px 0;
	background: transparent url(../icons/icon_doc.gif) no-repeat center right;
}

stesso problema su un testo disposto su più righe

Sapreste aiutarmi ?

Grazie

[Mich_]

Non so che senso ha, inserire un background in un elemento inline.
Se e` solo un colore non c'e` problema, ma con un'immagine si creano quegli effetti che noti.

Puoi trasformare l'elemento link in blocco (display:block, ma questo puo` dare effetti collaterali ancora peggiori.
Oppure, se proprio vuoi uno sfondo multicolore, puoi usare uno sfondo piccolo, che si ripeta.

In pratica sto dicendo che stai forzando delle cose che intrinsecamente non possono funzionare. L'abilita` del programmatore Web e` (anche) nell'integrare la teconologia e la grafica, in modo da dominarle, non voler fare una cosa "perche` l'ha pensata il grafico" e pretender di renderla in quel modo: per quelle cose ci sono strumenti diversi da HTML e CSS (ad esempio Flash, Smil o .PDF).

[serialkiller]

Originariamente inviato da Mich_
Non so che senso ha, inserire un background in un elemento inline.
Se e` solo un colore non c'e` problema, ma con un'immagine si creano quegli effetti che noti.

Puoi trasformare l'elemento link in blocco (display:block, ma questo puo` dare effetti collaterali ancora peggiori.
Oppure, se proprio vuoi uno sfondo multicolore, puoi usare uno sfondo piccolo, che si ripeta.

In pratica sto dicendo che stai forzando delle cose che intrinsecamente non possono funzionare. L'abilita` del programmatore Web e` (anche) nell'integrare la teconologia e la grafica, in modo da dominarle, non voler fare una cosa "perche` l'ha pensata il grafico" e pretender di renderla in quel modo: per quelle cose ci sono strumenti diversi da HTML e CSS (ad esempio Flash, Smil o .PDF).

Sono pienamente concorde, ma probabilmente non mi sono spiegato, quello che vorrei fare io è praticamente quello che vedi qui -> http://www.pooliestudios.com/projects/iconize/

Sono cosciente che su IE 6 e inferiori non funziona, ma non essendo una cosa fondamentale, va bene anche così per quanto riguarda le icone del tipo di file, un po' meno invece per i link che aprono pagine esterne, che vorrei segnalare con la classica "iconcina", peccato che "solo su IE" se il link è troppo lungo e quindi viene disposto su 2 righe, l'icona rimane sulla prima riga e si sovrappone al testo, anche trasformando i vari link in blocchi, non ottengo un granchè, nel senso che l'icona si pianta tutta a dx a prescindere se il link è composto da una lettera o da mille, mentre come da css, dovrebbe rimanere alla dx di tot px dell'ultimo carattere.Ovviamente su Firefox funziona tutto tranquillamente.

[Mich_]

Adesso ho capito ...
Effettivamente e` un bel problema ...

Hai provato cosa succede su altri browser (Opera, Safari, ...)? Non sono marginali, e come va in quelli e` sintomatico per discriminare e` un problema di IE o se e` generalizzato.
Sto dicendo che se una cosa cosi` e` un baco di un particoalre browser, puoi mettere un avviso specifico per i visitatori con quel browser, e poi si arrangino: non e` l'unica scelta, e puo` darsi che se notano problemi si decidano a cambiare browser (in fondo e` una piccola cosa, che non pregiudica l'accessibilita` ma solo l'usabilita`: se un browser non favorisce l'usabilita`, meglio cambiarlo)

Per i link "esterni" ricorda di mettere anche la scritta esplicita e/o nel title: a mio parere il significato di una icona non sempre e` compreso (puo` essere un valido aiuto, ma se quacuno non lo comprende - o non scarica le immagini - puo` essere un grosso limite).

[serialkiller]

Per l'avviso testuale, no problem, sia via js, sia per degradare tramite php

Al momento i test li ho fatti solo su IE7 - Firefox 2.0.0.3 - Opera 9, su IE 6 e inferiori è risaputo che non funziona, per quanto riguarda invece Safari ed affini, non ho ancora testato, è un problema che è nato ieri, quindi non saprei, anche se nella stragrande maggioranza, se funziona su FF e Opera, mediamente grossi problemi su Safari non ci sono, ma ovviamente va testato.

Sul sito di esempio che ho linkato, a fondo pagina recita la scritta:

Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & Internet Explorer 7 (6 doesn't work)

ma a mio parere "doesn't work on 7 too" se il testo è su più righe

Stesso problema con il primo metodo

[Mich_]

ma a mio parere "doesn't work on 7 too" se il testo è su più righe

Mi sa che loro lo hanno provato sulle liste, dove non e` molto comune andare a capo.

Il tuo "test sul campo" affronta invece un problema reale, magari parziale (come e` parziale il loro).
Secondo me andrebbe segnalato a loro, presentando anche una pagina (o un codice) dove il problema si presenta: se sono seri (come appare) ne tengon conto nella prossima revisione.

[serialkiller]

Originariamente inviato da Mich_
Mi sa che loro lo hanno provato sulle liste, dove non e` molto comune andare a capo.

Il tuo "test sul campo" affronta invece un problema reale, magari parziale (come e` parziale il loro).
Secondo me andrebbe segnalato a loro, presentando anche una pagina (o un codice) dove il problema si presenta: se sono seri (come appare) ne tengon conto nella prossima revisione.

La segnalazione la faccio sicuramente, ora mi chiedo:

Il problema sulle icone "tipo file" la posso aggirare con php, esplodo il nome del file, ricavo l'estensione e incollo in coda la rispettiva icona, certo comprometto la velocità di esecuzione della pagina, ma non vedo altro modo per renderlo compatibile per tutte le versioni di IE che non interpretano in maniera corretta i css, trovo buona cosa far sapere all'utente che tipo di file sta per aprire/scaricare, rimane pero' il medesimo problema sulla classe "pippo" che non usa tecniche css non digerite da IE ed affini. Caspita, se dico di tenere un padding alla destra del tag a, abbinadogli un immagine di bg, cos'ha questo che non va ? Rispettare il padding lo rispetta, perchè passando sul link, allo stato hover ho un cambio di bg, e si nota il padding, ma la maledetta iconcina rimane piantata sotto l'ultima lettera della prima riga

NB: per quanto riguarda l'uso delle liste, se guardi verso il fondo pagina, dove ci sono più estensioni su ogni[*], sono sicuro che se ne viene aggiunta una in coda, causando il rientro, in IE succede il patatrac

e secondo me lo sanno anche loro guarda caso stanno tutte giuste giuste su una riga

[serialkiller]

Ho mandato la segnalazione ad Alexander Kaiser, vediamo se e quando risponderà

[serialkiller]

Al momento non ho ancora avuto nessuna risposta, spero che la fiducia data "se sono seri", non finisca nel vuoto, riporto comunque il post all'attenzione di chiunque avesse soluzioni da testare.

Per completezza posto una pagina di esempio da testare su IE7, sul 6 non ho ancora avuto modo di fare prove, per causa di forza maggiore


PAGINA DI ESEMPIO

Grazie