List style, differenze in FF e IE6

[99caos]

Ho semplificato il codice e vi posto il link:

http://www.artmachine.it/tmp/prova.htm

ecco il codice Xhtml:

<div id="box-info">
	<ul>
		[*]<span>Info</span>
		[*]<span>Dati</span>
		[*]<span>Persone</span>
	[/list]
</div>

ecco il css:

#box-info {
	width: 100px;
	float: right;
	background-color: #FF9900;
	border-top: 1px solid #f90;
	border-bottom: 1px solid #f90;
}
#box-info ul{
	margin:0;
	padding: 0;
	padding-left: 1em;
	list-style-image: url(freccia.gif);
	text-indent: 5px;
}
#box-info span {
	display:block;
	font-variant: small-caps;
	font-weight: bold;
	color: #FEEACD;
	background-color: #ff6633;
	height: 100%;
	width: 75px;
	margin: 2px 1px 1px 5px;
}

il IE6 va tutto bene
In FF invece le freccie mi sballano tutta la configurazione.

PS:
sapreste dirmi perchè il validatore xHtml mi dice che c'è un problema con il tag </head> ?

[99caos]

nessuno conosce le proprietà di lyst-stile?

[awd]

regola i margini del LI

[99caos]

ma se li regolo per FF poi mi si sballa per IE6

[awd]

se regoli con una dimensione quella rimane per entrambi (più o meno)

[99caos]

Assolutamente no.

Ecco come ho risolto:

Codice xHtml:

<div id="box-info">
 <ul>[*]<span>
    [img]freccia.gif[/img]
    Info</span>[*]<span>
    [img]freccia.gif[/img]
    Persone</span>[/list]
</div>

Codice CSS:

#box-info {
	width: 100px;
	float: right;
	background-color: #FF9900;
	border-top: 1px solid #f90;
	border-bottom: 1px solid #f90;
}
#box-info ul{
	margin:0;padding: 0;
	list-style: none;
}
#box-info span {
	display:block;
	font-variant: small-caps;
	font-weight: bold;
	color: #FEEACD;
	background-color: #ff6633;
	width: 75px;
	margin: 2px 1px 1px 0;
	margin-left: auto;
	text-indent: -7px;
}
#box-info span img{
	position: relative;
	left: -15px;
}

In pratica ho eliminato list-style e ho inserito una gif manualmente per ogni[*] alla quale ho dato -15px sulla sinistra.

Non mi piace come soluzione.
Non è nella filosofia dei Css ma non ho trovato di meglio.

[darkmavis]

Beh, ti devi regolare con i margini e il padding, che vanno impostati sia per l'<ul> che per il[*]

#box-info ul{
	margin:0;padding: 0;
	list-style: none;
}
#box-info li{
	margin:0;padding: 0;
	list-style-image: url(freccia.gif);
}

se poi continuano a non essere uguali prova con qualche hacking, ad esempio facendo così

#box-info > li{
	margin:0;padding: 0;
	list-style-image: url(freccia.gif);
}

assegnerai le proprietà al tag[*] solo per i browser non IE