background-color che fa spostare elemento

[Eugene]

Buongiorno

Si è verificato un strano fenomeno: ho un link testuale al quale ho assegnato un colore di sfondo.

Al passaggio del mouse, vorrei far cambiare questo colore, ma inspiegabilmente IE sposta l'intero elemento.

Questo l'esempio di quello che dico.

Dovete scorrere la pagina fino a "approfondimenti" dove si trovano "elementi naturali" ed "elementi antropici".

Come si può notare il box arancione diventa bianco al passaggio del mouse, ma se passiamo sopra il tastino inferiore si provoca lo spostamento sopra citato.

Come al solito, questo problema si verifica solo con IE.

Questo lo stile associato al link:

div#navigation .link2 {
width: 125px;
height: 15px;
text-decoration: none;
background-color: #F9DC6C;
padding-left: 20px;
margin-left: 40px;
display: block;
color: #154D87;
font-size: 90%;
font-weight: normal;
margin-bottom: 2px;
}

div#navigation .link2:hover {
text-decoration: none;
width: 125px;
height: 15px;
background-color: #FFFFFF;
color: #000000;
font-size: 90%;
}

Se elimino il background-color da :hover o se lo lascio con lo stesso valore della modalità normale, il problema è risolto.

So che ci sono diverse soluzioni alternative (come ad esempio mettere un'immagine di sfondo arancione per uno stato e bianca per l'altro) ma la mia testardaggine mi porta a voler capire perchè così non debba funzionare.

Grazie.

[panta1978]

Originariamente inviato da Eugene
Come al solito, questo problema si verifica solo con IE.

Questo lo stile associato al link:

div#navigation .link2 {
width: 125px;
height: 15px;
text-decoration: none;
background-color: #F9DC6C;
padding-left: 20px;
margin-left: 40px;
display: block;
color: #154D87;
font-size: 90%;
font-weight: normal;
margin-bottom: 2px;
}

div#navigation .link2:hover {
text-decoration: none;
width: 125px;
height: 15px;
background-color: #FFFFFF;
color: #000000;
font-size: 90%;
}

Se elimino il background-color da :hover o se lo lascio con lo stesso valore della modalità normale, il problema è risolto.

So che ci sono diverse soluzioni alternative (come ad esempio mettere un'immagine di sfondo arancione per uno stato e bianca per l'altro) ma la mia testardaggine mi porta a voler capire perchè così non debba funzionare.

Grazie.

Purtroppo ho qui con me solo Firefox Opera e IE7 (che si comporta bene). Non ho la possibilità di fare dei test, ma sono pronto a scommettere che la colpa è dell'errata interprestazione dell'elemento width di IE<7. Io proverei ad inserire questo codice prima di </head> (sfortunatamente non posso testare, quindi vado alla cieca):

<!--[if lte IE 6]>
<style type="text/css"> 
div#navigation .link2:hover {width:185px}
</style>
<![endif]-->

[gra-fichetto]

Il codice CSS (style_navigation.css) per IE6:

div#navigation .menu2{
	background-image: url(../images/top_approfondimenti.gif);
	background-repeat: no-repeat;
	padding-top: 40px;
	margin-top: 30px;
	min-height: 50px;
	height: auto !important;
	height: 50px;
	width: 190px;
}
a.link1 {
	width: 135px;
	min-height: 20px;
	height: auto !important;
	height: 20px;
	text-decoration: none;
	padding-left: 10px;
	margin: 7px 0 0 40px;
	display: block;
	font-size: 100%;
	border-bottom: 1px solid #FFFFFF;
}

a.link1:hover {
	text-decoration: underline;
	color: #000000;
	font-size: 100%;
}

a.link2 {
	width: 125px;
	height: 15px;
	text-decoration: none;
	background-color: #F9DC6C;
	padding-left: 20px;
	margin-left: 40px;
	display: block;
	color: #154D87;
	font-size: 90%;
	font-weight: normal;
	border-top: 2px solid #007828;
	border-bottom: 2px solid #007828;

}

a.link2:hover {

	background-color: #FFFFFF;
	color: #000000;

}

In pratica ho eliminato il margin-bottom ed inserito al suo posto un border con lo stesso colore di sfondo.
Usare le liste no?

[Eugene]

Originariamente inviato da gra-fichetto
In pratica ho eliminato il margin-bottom ed inserito al suo posto un border con lo stesso colore di sfondo.
Usare le liste no?

Ho provato ma il problema sussiste.
Le liste non posso usarle perchè è prevista la possibilità che sia presente un ennesimo sottomenù, quindi le due voci (elementi naturali - elementi antropici) potrebbero non essere più consecutive ma separate da un'altra serie di link.

A meno che non sia possibile inserire una lista all'interno di una lista, cosa che non ho provato a fare.

Più tardi provvedo.

Per rispondere a panta1978, non mi è ben chiaro il codice da se consigliato, ma tuttavia non credo mi sia possibile inserire del codice css all'interno della pagina per motivi di validazione e accessibilità.

Comunque grazie per l'aiuto.

[panta1978]

Originariamente inviato da Eugene
Per rispondere a panta1978, non mi è ben chiaro il codice da se consigliato, ma tuttavia non credo mi sia possibile inserire del codice css all'interno della pagina per motivi di validazione e accessibilità.

Comunque grazie per l'aiuto.

Il codice da me fornitoti non inficia assolutamente l'accessibilità e la validazione della pagina. Si tratta sostanzialmente di un commento condizionale, volto a fornire una serie di comandi CSS visibili solo a versioni di IE fino alla 6 (lte 6 sta per less than or equal 6, minore o uguale a 6). Se ne è già parlato tanto nel forum, se fai una ricerca trovi molti dettagli.

In alternativa puoi fare anche così:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="layout_IE.css" />
<![endif]-->

Poi ti crei un foglio di stile chiamato layout_IE.css nel quale inserisci il seguente codice:

div#navigation .link2:hover {width:185px}

[gra-fichetto]

Ho provato ma il problema sussiste.

Ho salvato la tua pagina in locale con i relativi fogli di stile.
Con le modifiche che ti ho proposto, sulla versione IE 6 non avviene nessun spostamento.