[CSS] Lista che si sposta in IE

[salasir]

Mi spiego meglio. Se provate il codice seguente, la seconda lista non ha problemi, mentre nella prima (la pagina viene suddivisa in tre colonne con div), quando porto il cursore sui link, la riga si sposta di qualche px verso sinistra, e solo in IE; con FF rimane al suo posto. VVoVe:
Provando e riprovando ho scoperto che è la definizione di background sull'hover a provocare lo spostamento. Se lo elimino anche con IE funziona perfettamente.
CSS

ul.noindent {list-style-type: none; padding: 0px; margin: 5px 0 10px 0px; }
ul.noindent li {margin: 3px 0 0 0; }

div.split3 { float: left; width: 100%; padding: 0; margin: 0; }
div.split3 div{ float: left; width: 29%;\width: 33%;w\idth: 29%; padding: 0 2%; }

div#contenuto a { font-weight: normal; }
div#contenuto a:link { TEXT-DECORATION:underline; }
div#contenuto a:visited { TEXT-DECORATION: underline; color: #4b0082; }
div#contenuto a:hover { TEXT-DECORATION: underline; color: #444; background-color: #ff0;}
div#contenuto a:active { TEXT-DECORATION: underline; }

XHTML

	<div id="contenuto">		
	<div class="split3">
	   <div>
		<h4>Titolo</h4>
		<ul class="noindent">
			[*]Link I
			[*]Link II
		[/list]
	   </div>
	</div>
	   <div>
		<h4>Titolo</h4>
		<ul class="noindent">
			[*]Link I
			[*]Link II
		[/list]
	   </div>

	</div>

Mi sapete dire il motivo di tale comportamento e come si può evitare?

[salasir]

up

[salasir]

A nesssuno è mai capitato???

[ricman]

Originariamente inviato da salasir
Mi sapete dire il motivo di tale comportamento e come si può evitare?

Per me il tuo codice è un po' "strano". Potresti dirmi con esattezza l'effetto che vuoi ottenere?

[Xinod]

il fatto che secondo te sia il background sull' hover a generare il problema mi lascia supporre che tu stia sperimentando il guillotine bug di IE
http://positioniseverything.net/expl...uillotine.html
infatti i link, a conti fatti, si trovano in un div floatato e poi non pulito con clear

[salasir]

Mi spiace di aver generato confusione. Ripulendo il codice per lasciare solo l'esempio del problema mi è "saltato" proprio il div con il clear alla fine del box "split3".
In effetti non mi viene troncato il box. La lista viene esposta qualche px più a destra del necessario e quando si va in hover si sposta nella posizione corretta.
Che sia il background l'ho dedotto eliminandolo dal CSS: così il problema non c'è!

x ricman

Per me il tuo codice è un po' "strano". Potresti dirmi con esattezza l'effetto che vuoi ottenere?

L'effetto è quello di avere la pagina suddivisa in tre blocchi affiancati (split3) ed all'interno di ogni blocco una lista di link.
Per brevità ho indicato solo il primo blocco.
Poi il resto è solo un background sull'hover.

[thomas_anderson]

Prova ad indicare quei link con una classe separata dal contenitore, ad esempio:

a.class {
  font-weight: normal;
 }
[...]

[salasir]

Intendevi una cosa così?

a.italic {
  font-style:italic;
 }[*]Link I

Se sì, non cambia nulla!

[Nokao]

Ciao, io ho trovato un'illuminazione in questo sito:
http://www.seoconsultants.com/css/menus/vertical/

Collegato a quest'altro, fatto da un vero genio:
http://www.xs4all.nl/~peterned/csshover.html

Nel primo link troverai un menu fatto con i css, secondo i corretti standard, e reso compatibile con Internet Explorer (che ovviamente non rispetta gli standard) grazie ad un javascript, il csshover.htc.

Ciao

P.S. Sono riuscito anche a verticalizzare il menu nello stesso modo, trovi un esempio nel mio sito (versione nuova):
http://nokao.m-a-f-i-a.com/nuovo/index.htm

Lo sto finendo in questi minuti quindi se vedi cose strane abbi pazienza

[salasir]

Nokao, ti ringrazio della risposta e dei link, ma ... non sto cercando di fare un menù. Voglio realizzare tre box affiancati che contengono i link alle sezioni sottostanti divise per argomento. Una specie di mappa del sito, per intenderci. Quindi mi va bene la soluzione che ho impostato (se funzionasse correttamente anche su IE)
Vorrei solo eliminare quel fastidioso movimento di righe