Scusate ma qualcuno di voi sa dirmi come mai una semplice immagine dentro un collegamento ipertestuale deve avere una sorta di spazio tra l'immagine e il bordo del link di circa 2 px?
Eppure ho scritto un codice semplicissimo:
E' un comportamento stranissimo che non so come evitare...codice:
Qualcuno di voi ha indicazioni da darmi?
Non riesco a capire a quale bordo superfluo ti riferisci, io eseguendo il tuo codice non ne vedo
A quel bordino rosso che a me si vede sia con IE8, sia con FF 3.6, sia con Opera 11, sia con Chrome 9, sia con Safari 5.
Allora smanettando un pochino ho cercato di capire come mai riscontro questo problema che, ad onor del vero, sino ad oggi non avevo mai notato.
E l'unica cosa che ho modificato è il Doctype passando da XHTML a HTML5.
Così facendo, una semplice <img> in un <a> ha un padding inferiore di circa 2px.
I codici provati per fare le prove sono semplicissimi e sono i seguenti:
XHTML 1.0
E in questo caso il comportamento non da problemi.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Documento senza titolo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body></div> </body> </html>
HTML5
E in questo caso si vede un bordino rosso al di sotto dell'immagine.codice:<!DOCTYPE html> <head> <title>Documento senza titolo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body>
Nessuno sa come aiutarmi?
codice:
Ti ringrazio per la tua disponibilità.
Ho provato le modifiche da te suggerite però non mi sembra ci siano miglioramenti.
In ogni caso rimarrebbe un dubbio concettuale, ovvero perchè dovrei trasformare un elemento inline in blocco per non vedere quel bordino.
Non so se a questo punto sia il caso di chiedere lo spostamento nel forum HTML5 perchè alla fine è lì il problema.
Ulteriori aiuti?
Il problema per IE è che ha dato delle dimensioni tue all'immagine se provi con le dimensioni originali dell'immagine ti accorgerai che tutto funziona regolarmente.Originariamente inviato da ignorantone
Ti ringrazio per la tua disponibilità.
Ho provato le modifiche da te suggerite però non mi sembra ci siano miglioramenti.
In ogni caso rimarrebbe un dubbio concettuale, ovvero perchè dovrei trasformare un elemento inline in blocco per non vedere quel bordino.
Non so se a questo punto sia il caso di chiedere lo spostamento nel forum HTML5 perchè alla fine è lì il problema.
Ulteriori aiuti?
A me però funziona bene anche con il codice che ti ho passato
Ecco come lo vedo io con IE e il mio codice
Io il bordino lo vedo con IE, FF, Opera, Chrome e Safari.
E, come ho cercato di spiegare, lo vedo solo usando il DOCTYPE di HTML5.
Anche tu hai usato quello per ottenere il risultato da te postato?
era scorretto il comportamento con il doctype transitional che porta il browser in quirksmode.
il doctype html5, e i doctype STRICT portano invece il browser in standard mode uniformando il comportamento su tutti i browser principali, non è quindi un problema di HTML5 ma tipo di doctype
il problema è già stato discusso nel forum, ( http://forum.html.it/forum/showthrea...5#post13098825 ) e come già suggerito, ti basta dare display block (o float: left/right;) all'immagine per eliminare il padding
Vuoi aiutare la riforestazione responsabile?
Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)
Permessi di invio
Rispondi quotando