Problema con padding e rollover

[DeMoN3]

Salve a tutti.

Ho un menù creato con una struttura del tipo

<ul>[*]
<a>link</a>[*]
....
....[/list]

I "li", normalmente, hanno come background un file chiamato "sinistra.gif" che, quando il mouse passa sopra, deve diventare "sinistra_evidenziato.gif". Inoltre all'interno dei "li" c'è del testo che deve esser distanziato di 12px dal bordo sinistro, di 6 dal bordo superiore e di 7 dal bordo inferiore. Per fare questo ho provato ad usare sia del margin (applicato al "a"), sia del padding(applicato al "li"), ma in entrambi i casi ho questo problema:

quando passo il mouse, "sinistra_selezionato.gif" parte nello stesso punto in cui inizia il testo, ovvero 12px a destra rispetto al bordo sinistro...e ovviamente ciò non deve succedere. Se provo a eliminare il padding o il margin lo sfondo si posiziona bene, ma le scritte lo seguono...come posso risolvere? Vi posto il pezzo di css usato

<style type="text/css">
		<!--
			.menu_sinistra{
				list-style:		none;
				margin-left:	0px;
			}
			.menu_sinistra li{
				margin-top:6px;
				width:			220px;
				height:			16px;
				background:		url(img/sito_img/sinistra.gif);
				border:			1px solid #ec008c;
				text-align:		left;
				padding-left:	12px;
			}
			.menu_sinistra li a{
				color:			#ffffff;
				text-transform:	uppercase;
				font-weight:	600;
				text-decoration:none;
				margin-top:		2px;
				margin-bottom:	4px;
			}
			.menu_sinistra li a:hover, .menu_sinistra li a:focus, .menu_sinistra li a:active{
				background:		url(img/sito_img/sinistra_evidenziato.gif);
				width:			206px;
				height:			16px;
				padding-left:	0;
				margin-top:		0;
				margin-bottom:	0;
				text-decoration:none;
				
			}
		-->
	</style>

...come vedete ho dovuto azzerare anche i margini superiore e inferiore, altrimenti restava dello spazio anche tra i margini superiore e inferiore e lo sfondo "sinistra_selezionato.gif"


non so più dove sbattere la testa


allego un'immagine del problema...i primi 2 box è come dovrebbe essere (così come si vede su chrome, tra l'altro), mentre gli altri 2 box è quel che succede su explorer





Edit: dimenticavo di dire che sono stato costretto, su explorer, a togliere il margin-left: -40px; applicato al "ul" che, su chrome, serviva a metterlo a filo con lo schermo...ho risolto con un condizionale, ma se c'è un modo per evitarlo ben venga

[Prill]

Prova così

.menu_sinistra{
	list-style:none;
	margin:0;
	padding:0;
}
.menu_sinistra li{
	width:220px;
	text-align:left;
	border:1px solid #ec008c;
	margin-top:6px;
}
.menu_sinistra li a{
	display:block;
	color:#ffffff;
	text-transform:	uppercase;
	font-weight:600;
	text-decoration:none;
	background:url(img/sito_img/sinistra.gif);
	margin:2px 0 4px 0;
	padding-left:12px;
}
.menu_sinistra li a:hover, .menu_sinistra li a:focus, .menu_sinistra li a:active{
	background:	url(img/sito_img/sinistra_evidenziato.gif);
	margin:4px 0 2px 0;
	
}

non è chiaro però il margine che vuoi fra il bordo e il testo del link, le voci elenco devono essere distanziate di 6 pixel l'una dall'altra? e il testo deve spostarsi più in alto allo stato hover come sembra di capire dal tuo css?

[DeMoN3]

penso ti riferisca a quel margin:2px .... che diventa margin:4px....
effettivamente non ricordo xkè io lo abbia messo, credo per risolvere qualche problema...ma cmq non è quello il problema...
il testo deve restare fisso alla sua posizione, distanziato di 7px dal bordo superiore e di 12px dal bordo di sinistra...mentre lo sfondo deve riempire il 100% del "li" (essendo lo sfondo un'immagine, quindi, deve essere allineata tutta a sinistra, senza i 12px di margin-left)

[Prill]

.menu_sinistra{
	list-style:none;
	margin:0;
	padding:0;
}
.menu_sinistra li{
	width:220px;
	text-align:left;
	border:1px solid #ec008c;
	margin-top:6px;
}
.menu_sinistra li a{
	display:block;
	color:#ffffff;
	text-transform:	uppercase;
	font-weight:600;
	text-decoration:none;
	background:url(img/sito_img/sinistra.gif);
	padding:7px 0 0 12px;
}
.menu_sinistra li a:hover, .menu_sinistra li a:focus, .menu_sinistra li a:active{
	background:	url(img/sito_img/sinistra_evidenziato.gif);

}

le immagini di sfondo possono andare sui link, e attraverso il padding regoli lo spazio a tuo piacimento, se vuoi che il testo sia staccato anche dal bordo in basso cambia il valore del padding inferiore

[DeMoN3]

Grazie 1000, ora funziona come si deve su tutti i browser...

mi daresti 2 righe di spiegazione sulle modifiche che hai fatto, in modo che cerco di capirle e di non ripetere gli errori?

[Prill]

margini e padding su zero nell'elenco per evitare rientri, display:block sui link per far sì che occupino tutto lo spazio disponibile (non mi occorre perciò specificare la larghezza), eliminato il padding sinistro di 12 pixel sulle voci elenco (il link appariva scostato dunque più a destra e così l'immagine di sfondo sullo stato hover, non il primo sfondo che era impostato invece direttamente sulla voce elenco), settati gli spazi col padding sui link

[DeMoN3]

Grazie mille, molto chiaro.


Purtroppo però , evidentemente, ho la testa dura >.<


Ho un problema simile in un'altro pezzo di css... in questo caso in menù è orizzontale, il tutto racchiuso all'interno di un div. Con explorer funziona così com'è, mentre con chrome sono costretto a mettere un margin-left al "ul" per farlo iniziare esattamente dove voglio io...e questo, ovviamente, non piace ad explorer...


(il css è quello del plugin per jquery "superfish", un pò personalizzato)

(c'è anche un pò di codice per eventuali sottomenù)

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	25px;
	float:			left;
	margin-top:		201px;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li {
	float:			left;
	width:			145;
	text-align:		center;
	border-right:	1px solid #dd0083;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu a {
	display:		block;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
}
.sf-menu a:hover { /* visited pseudo selector so IE6 applies text colour*/
	color:			#ffffff;
	background:		#dd0083;
	text-decoration:none;
}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
	left:			0;
	top:			60px; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
.sf-menu li {
	background:		#000000;
}
.sf-menu li li {
	background:		#dd0083;
}
.sf-menu li li li {
	background:		#dd0083;
}
.sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	outline:		0;
}
.sf-menu li li:hover, .sf-menu li li.sfHover,.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
	color:			#ffffff;
	background:		#dd0083;
	outline:		0;
}

e questo è il pezzo di codice html

<div>
	<ul class="sf-menu">
		<li style="width:50px;">
			<a href="index.php">
                              1
			</a>
		
		<li style="width:50px;">
			<a href="index.php">
				2
			</a>
		
		<li style="width:50px;">
			<a href="index.php">
				3
			</a>
		
                ...
		<li style="width:50px;">
			<a href="index.php">
				N
			</a>
		
	[/list]
</div>

[Prill]

La pagina di esempio originale del menu funzionava correttamente con tutti i browser? Verificalo, perché se il problema nasce dalle tue personalizzazioni, che non so quanto in là si spingano, ti converrà ripartira dal css originale e testare dopo ogni modifica per capire quale variazione ha portato lo sfasamento

[DeMoN3]

come consigliato, ho provato a caricare il css originale del plugin e...anche lì ho questo problema =\

io posiziono l'"ul" in modo assoluto, con un

position:absolute;
	left:21px;
	top:197px;

...ma sulla sinistra resta sempre una differenza di circa 20px =\...in explorer l'"ul" inizia circa 20px più a destra

[DeMoN3]

risolto...era dovuto ad un "position:absolute" riferito al div contenitore "scordato" da qualcuno prima di me -_-


grazie lo stesso, non potevi trovare l'errore