ul con firefox ed ie

[carlostefano]

Ciao a tutti,
come posso ottenere la stessa distanza dal bordo in una lista non ordinata sia con firefox che con ie?

Saluti,
carlostefano

[pierofix]

Io di solito inizio con l'azzerare tutti i margini e i padding, così da annullare le interpretazioni dei vari browser. Una volta fatto ciò, attribuisco i valori che preferisco. Ad esempio:

ul,
ul *
{
   margin:0; padding:0;
}
li
{
   margin-left:10%;
}

La prossima volta fai una ricerca tra le vecchie discussioni, prima di postare: l'argomento era già stato trattato parecchie volte.

[carlostefano]

Ciao Piero,
avevo guardato tra le discussioni precedenti ma francamente non ne ho trovata nessuna che mi abbia aiutato a risolvere il problema. Per quanto riguarda la tua risposta, non capisco come si possa ottenere il riusultato se prima si mettono a 0 tutti i margin e i padding ma sucessivamente si attribuisce loro un valore.

[carlostefano]

Spiego meglio qual'è il problema...

codice css

div.partnerstable ul {
margin: 0;
padding: 0;
}


div.partnerstable li {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}



Si parte da questo. Il risultato è che su IE lascia cmq uno spazio con il bordo, con Firefox invece è a filo con il bordo. Se poi attribuisco con il selettore div.partnerstable li un valore o al margin o al padding, sia con ie che con firefox questo valore viene preso in considerazione, quindi non riesco ad ottenere la stessa distanza con il bordo.

[pierofix]

Originariamente inviato da carlostefano
non capisco come si possa ottenere il riusultato se prima si mettono a 0 tutti i margin e i padding ma sucessivamente si attribuisce loro un valore.

Probabilmente non tutti i browser, di default, applicano la stessa spaziatura, pertanto attribuendo il valore zero si ottiene un punto di partenza omogeneo.

Cosa intendi tu con 'bordo'? Bordo della lista? Oppure il bordo dell'elemento contenitore?

Hai provato ad usare il codice che ti ho postato?

[carlostefano]

Ho provato a mettere tutto a 0, eppure su IE ottengo uno spazio tra gli elementi della lista e il bordo dell'elemento che lo contiene (un tag div con un'immagine di sfondo) . Boh, probabilmente deve essere qualcos'atro che crea sto bordo, non la lista visto che ha il padding ed il margin a 0. Alla fine ho risolto mettendo:

ul > li.firstsponsor, ul > li.secondsponsor {
padding-left: 25px;
}


in modo che su IE sfrutto lo spazio che c'è già e lo ricreo anche con Firefox attraverso questo hack. Mi spiace però aver adottato questa soluzione, visto che con IE7 questo selettore sarà supportato

[pierofix]

Ipotizzo.

XHTML
<div>
   <ul>[*]Ciao[*]Miao[*]Bau[/list]
</div>

CSS
div
{
   padding:10%; /* Distanza che desideri */
}
ul,
ul *
{
   margin:0; padding:0;
}

[thomas_anderson]

Piero dimentica un particolare: non tutti i browser usano gli stessi criteri con le liste. alcuni usano margin-left altri padding-left. se vuoi usare margin-left:

ul, ol {
  margin-left: 1em;
  padding-left: 0;
}

se vuoi usare padding-left:

 ul, ol {
  margin-left: 0;
  padding-left: 1em;
}

questo è il sistema migliore per evitare alcuni problemi, ad esempio con list-style-position.

[carlostefano]

Grazie per le vostre risposte...
Piero, qual è l'utilità di un selettore del tipo " ul *" ?

[thomas_anderson]

in teoria dovrebbe selezionare tutti gli elementi all'interno di ul. in pratica nessuna perchè IE fa prevalere le sue logiche di hasLayout.