Div UL LI immagine e Bug IE9

[esseAemme]

Ciao a tutto il forum

Scrivo perchè ho creato una lista con un'immagine, che su Firefox, Chrome funziona correttamente ma non su IE9.

Questo è il foglio HTML

<div id="homedxNews">
	<div id="homedxNewsTitle">
	News
	</div>

	<div id="homedxNewsElenco">	
		<ul id="homedxNewsElenco">
			<li id="homedxNewsElenco">	 Prima voce in elenco
			<li id="homedxNewsElenco">		Seconda voce in elenco	
			<li id="homedxNewsElenco">		Terza voce in elenco 		
			<li id="homedxNewsElenco">		Quarta voce in elenco	
		[/list]	
	</div>	
</div>

Questo è il foglio di stile:

div#homedxNews		{	width: 250px; height: 180px; margin-top: 8px; padding: 0px;
						/*border-top: solid 2px #074b8a;	border-bottom: solid 1px #074b8a;*/
					}
div#homedxNewsTitle	
	{					width: 248px; height: 30px; background-image: url('../img/news_home.jpg'); background-repeat: no-repeat; 
						padding: 8px 0px 0px 10px; margin: 0px 0px -6px 2px; font-weight: bold; font-family: verdana, arial, sans-serif;
						font-size: 12px; color:#FFFFFF; text-align: left; vertical-align: middle; 
						/*border-top: solid 2px #eeeeee; border-bottom: solid 5px #555555;*/
	}
div#homedxNewsElenco	
	{					width: 250px; height: 180px; background-image: url('../img/sf_news.jpg'); background-repeat: no-repeat; 
						padding: 0px 1px 0px 1px; margin: -6px 0px 0px 2px; font-weight: normal; font-family: verdana, arial, sans-serif; 
						font-size: 12px; color:#074b8a; text-align: left; vertical-align: middle;
						/*border-top: solid 2px #074b8a; border-bottom: solid 1px #074b8a;*/
	}	
div#homedxNewsElenco ul
	{
			list-style-type: none;
			list-style-position: outside;
			line-height: 1.8em;
			font-family: verdana, arial, sans-serif;
			font-weight: normal;
			font-size: 14px;
			text-align: left;
			color: #074B8A;
			margin: -6px 0px 0px 34px;
			padding-left: 0px;
			/*border-top: solid 5px #074b8a;*/
	}
div#homedxNewsElenco li
	{
			list-style-image: url('../img/advDot.gif'); 
			padding-left: 4px;
			margin-top: -3px;
		}

Vi allego l'immagine 1 che è il risultato che vorrei ottenere, dove su FIREFOX e Chrome va,
e l'immagine 2 di IE9 dove
1. l'immagine di fondo bordata blu con angoli arrotondati si schiaccia bellamente sotto l'immagine arancione;
2. i punti di elenco vanno molto a destra e si appiccica al testo del li.

Come posso fare?

[esseAemme]

allego l'immagine corretta come dovrebbe essere

[Mich_]

definisci esplicitamente sia margin che padding:
infatti qualche browser ha un margin-left predefinito nei[*], qualche altro ha il padding predefinito.

Se usi il padding, metti il margin a zero (o viceversa)

Altro attributo che ti puo` servire: list-style-position

[esseAemme]

Ciao Mich,

Originariamente inviato da Mich_
definisci esplicitamente sia margin che padding:
infatti qualche browser ha un margin-left predefinito nei[*], qualche altro ha il padding predefinito.

Se usi il padding, metti il margin a zero (o viceversa)
Altro attributo che ti puo` servire: list-style-position

l'attributo list-style-position era già dichiarato come outside

Dunque:

Il mio problema si presenta sull'elenco puntato. Pertanto ignoro il margine che è indicato nel div che contiene l'elenco.



E passo a considerare solo la sezione UL e LI dell'ID homedxNewsElenco:

div#homedxNewsElenco ul
	{
		list-style-type: none;
		list-style-position: outside;
		line-height: 1.8em;
		font-family: verdana, arial, sans-serif;
		font-weight: normal;
		font-size: 14px;
		text-align: left;
		color: #074B8A;
		margin: 0px 0px 0px 25px;
		padding-left: 10px;
	}

div#homedxNewsElenco li
	{
		list-style-image: url('../img/advDot.gif'); 
		padding-left: 4px;
		margin-left: 0px;
		margin-top: -3px;
		}

Solo che anche in questo modo non cambia. Non cambia nè in IE nè firefox nè Chrome.

Domanda:
1) è sul UL o LI che vado a posizionare lo spazio a sinistra dell'immagine che fa da punto elenco?

2) è UL che gestisce lo spazio a sinistra del testo in elenco?


Dato che IE9 ignora bellamente quello che gli dico, devo usare come punto d'elenco un'immagine in background?

Questo è il link con la guida: http://css.maxdesign.com.au/listamatic/vertical05.htm

Grazie per i suggerimenti che potrai darmi
Samantha

[Mich_]

Che io sappia e` nel[*] che vanno definite le misure di padding e margin per posizonare il punto-elenco

Mi sembra strano che nel <ul> usi sia un margin-left che un padding-left.
Prova a spostare qualcosa nel[*] anziche` nel <ul>

E usa una DTD strict: e` il modo migliore per fare in modo che IE si comporti (quasi) come i brwoser standard.


Usare l'immagine di bg puo` risolvere qualche problema, ma ne puo` creare altri: ad esempio gli sfondi non vengono stampati salvo dirlo esplicitamente nel deamon di stampa (quindi lo deve fare l'utente, non si puo` programmarlo).

[esseAemme]

Ciao Mich_
ho risettato tutto a zero, margin e padding.

Ho visto che se applico margini a :

div#homedxNewsElenco -> mi sposta l'immagine di sfondo

Invece applicato qui lavora nello stesso indentico modo: sposta il punto d'elenco e il testo contemporaneamente.
div#homedxNewsElenco ul
div#homedxNewsElenco li

Non riesco a capire come fare per spaziare il testo dal punto d'elenco...

[esseAemme]

No ci sono,

il margin sposta punto elenco & testo
il padding sposta il testo