padding su a:hover img

**max103** · 04-11-2009, 13:22

ho un padding di 1px su a:link

codice:

a, a:link, a:visited{
	color:#560707;
	text-decoration:underline;
	padding:1px; 
}
a:hover{
	background-color:#bb0808;
	text-decoration:none;
	color: #FFF;
}

sui link va bene, ma su a:hover img mi crea una "sottolineatura" bruttissima che non riesco a togliere
esempio su: <qui img viene con il bordo su a:hover>

ho provato a toglierlo con:

codice:

a:hover img{
	border:0;
	padding:0;
}

ma niente da fare il bordo sulle immagini rimane sempre

se tolgo quel padding:1px da a:link va via anche dalle immagini

come si può risolvere?

**Mich_** · 04-11-2009, 13:26

La sottolineatura dei link e` un comportamento che si trova in molti brwoser.

La si gestisce attraverso l'attributo
text-decoration

Devi scriverlo esplicitamente sia nella pseudoclasse :link che nella :hover, dato che i default dei brwoser possono trattare separatamente le due condizioni.

**max103** · 04-11-2009, 14:15

non credo sia la sottolineatura di text-decoration

quanto proprio un padding che eredita da a:link (1px)
ma che non si riesce a togliere

guarda l'img allegata (ho esasperato a 5px il padding solo per evidenziare il difetto colorato in bordeaux)

**max103** · 04-11-2009, 14:55

ti allego un esempio completo con il problema

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>a:hover img</title>
<style type="text/css">
<!--
a {
	padding: 1px;
	text-decoration:underline;
}
a:hover{
	background-color:#F00;
	}
a:hover img{
	text-decoration:none;
	}
-->
</style>
</head>

<body>


link normale</p>


</p>
</body>
</html>

**mucu** · 04-11-2009, 14:57

secondo me non si tratta della sottolineatura o padding, ma del line-height
mettilo a 1 e dai anche un float (mi riferisco al link)

codice:

a, a:link, a:visited{
	color:#560707;
	text-decoration:underline;
	padding:1px;
	line-height: 1px;
	float: left;
}

**max103** · 04-11-2009, 15:13

se lo provi sull'esempio che ho postato
ti accorgi che non cambia nulla

è il padding ereditato da a
che non si annulla quando nel tag a c'è un'immagine [...]

**mucu** · 04-11-2009, 16:39

hai messo un codice diverso ma la sostanza non cambia
il colore è dato dallo sfondo
se non lo vuoi lo devi togliere
se vuoi il colore di sfondo nei link testuali ma non lo vuoi nei link d'immagine devi fare due classi differenti e applicarle ai link

se assegni il padding al link non ha senso dire "img padding: 0"

**max103** · 04-11-2009, 17:03

com'è la giusta sintassi?

codice:

a.miaclasse, a.miaclasse:link, a. miaclasse:visited {
	padding:0px;
}

oppure

codice:

a .miaclasse, a:link .miaclasse, a:visited .miaclasse {
	padding:0px;
}

sembrerebbe funzionino entrambe ?!

questo è il link
img

**mucu** · 04-11-2009, 17:15

io ti avrei suggerito la prima ipotesi (è quella comune), ma guardando la seconda penso che sia geniale solo che bisogna testarla per vedere se tutti i browser la leggono bene

c'ho ripensato non va bene usa la prima

**Mich_** · 04-11-2009, 17:49

Originariamente inviato da max103
com'è la giusta sintassi?

codice:

a.miaclasse, a.miaclasse:link, a. miaclasse:visited {
	padding:0px;
}

oppure

codice:

a .miaclasse, a:link .miaclasse, a:visited .miaclasse {
	padding:0px;
}

sembrerebbe funzionino entrambe ?!

questo è il link
img

Ci sono errori di sintassi in ambedue. Gli spazi prima del punto o dei duepunti sono da togliere (per attribuire lo stile al codice HTML postato).

Comunque la versione corretta e` la prima: la seconda funziona forse in qualche browser, ma non e` corretta secondo le specifiche e non funziona dappertutto.

Discussione: padding su a:hover img

Strumenti discussione

Ricerca discussione

Visualizza

padding su a:hover img

Permessi di invio