Regole applicate solo su IE (no Firefox e Opera)

[pictor]

Probabilmente sono rimbecillito io ma non capisco perchè queste regole vengano applicate solo su IE, mentre non c'è verso di applicarle su FireFox ed Opera

	#stepContainter	{	width: 100%; text-align: center;	}
	#steps { position:relative; width: 824px; margin: auto; text-align:center;}
	
	div#steps div#step1,
	div#steps div#step2,
	div#steps div#step3,
	div#steps div#step4,
	div#steps div#step5,
	div#steps div#step6, {
		position: absolute;
		top: 120px;
		font-size: 1em;
	}
	
	#step1 { left: 5px; }
	#step2 { left: 177px; }
	#step3 { left: 300px; }
	#step4 { left: 473px; }
	#step5 { left: 600px; }
	#step6 { left: 768px; }

Il codice HTML è questo:

<div id="stepContainter">
<div id="steps">
	[img]img/Step_creazione_Pass/StepBar_1.png[/img]
    <div id="step1">Selezione pass</div>

    <div id="step2">Anagrafica</div>
    <div id="step3">Riepilogo anagrafica</div>
    <div id="step4">Pagamento</div>
    <div id="step5">Riepilogo pagamento</div>
    <div id="step6">Riepilogo stampa</div>
</div>
</div>

Avete idea? Cominciare la mattinata così è stressante!

[Mich_]

Ci sono un po' di contraddizioni.
steps { position:relative; margin: auto; }
Non ha senso definire i margini automatici se il posizionamento e` relativo o assoluto

#steps { position:relative; }
Questo e` relativo al body, non a #stepContainter, dato che quest'ultimo ha posizionamento statico.

#step1 { left: 5px; }
left puo` essere usato solo in un blocco con posionamento assoluto o relativo


Cosi` ad occhio direi che hai sbagliato approccio.
Ti conviene abbandonare i posizionamenti, ed usare invece il float per affiancare i blocchi.
Inoltre anche la semantca e` sbagliata: per una lista si devono usare i tag <ul> e[*] (o altri tipi di lista).

Trovi esempi di menu orizzontali tra i "link utili", realizzati mediante CSS e senza posizionamenti.

[pictor]

Originariamente inviato da Mich_
Ci sono un po' di contraddizioni.
steps { position:relative; margin: auto; }
Non ha senso definire i margini automatici se il posizionamento e` relativo o assoluto

Non serve a centrare il div nel caso io non specifichi top/left/right/bottom?
Cioè se non specifico uno dei 4 sopra cosa cambia rispetto al position:static?

Comunque ho aggiunto il position:relative per avere i sottoblocchi #stepN posizionati in modo assoluto rispetto a #steps.

#steps { position:relative; }
Questo e` relativo al body, non a #stepContainter, dato che quest'ultimo ha posizionamento statico.

Non è absolute che te lo posiziona rispetto al body? (a meno che il contenitore non sia impostato a relative ovviamente)

Relative ho sempre pensato che posizionasse relativamente al contenitore; no?

#step1 { left: 5px; }
left puo` essere usato solo in un blocco con posionamento assoluto o relativo

#step1 (e #step2, #step3, etc.) non sono posizionati in modo assoluto? :master:

Cosi` ad occhio direi che hai sbagliato approccio.
Ti conviene abbandonare i posizionamenti, ed usare invece il float per affiancare i blocchi.
Inoltre anche la semantca e` sbagliata: per una lista si devono usare i tag <ul> e[*] (o altri tipi di lista).

Trovi esempi di menu orizzontali tra i "link utili", realizzati mediante CSS e senza posizionamenti.

Non è un menu che sto cercando di creare, e non posso usare i float.

Devo posizionare i diversi blocchi 'stepN' sopra un'immagine, in diverse zone (non necessariamente legate tra loro).

il "div#steps div#stepN" è scrivibile anche solo come "#stepN".
Avevo aggiunto dei selettori per vedere se era un problema di priorità delle regole.


EDIT:

E comunque non riesco a spiegarmi perchè non vengano prese le regole sugli step nei browser compliant (se provo ad aggiungere bordi o sfondo non appariono agli #stepN )

[Mich_]

Mi sa che hai un po' di confusione sui posizionamenti.
Ti consiglio di leggere questi articoli, rivedere il tuo layout e poi tornare:
I posizionamenti assoluti
Capire i posizionamenti relativi

A volte un errore di sintassi impedisce l'interpretazione del resto del documento CSS.
Prova a fare una validazione del codice HTML e del codice CSS:
validatore HTML
validatore CSS

[pictor]

Ghgh non so come ho fatto ad andare avanti sin'ora senza capire i posizionamenti relativi

Avevo completamente travisato come funzionassero (il bello è che le regole hanno sempre più o meno funzionato per come ci ragionavo io!! ).

Ora mi leggo anche l' absolute, anche se quello credo di averlo capito meglio

[pictor]

Ok, letti e compresi (spero per l'ultima volta!! )

Ti riformulo le domande

Originariamente inviato da Mich_
steps { position:relative; margin: auto; }
Non ha senso definire i margini automatici se il posizionamento è relativo o assoluto

... perchè?

position:relative non rimuove dal flusso della pagina, quindi margin:auto dovrebbe avere comunque la funzione di centratura per il div; sbaglio?

#steps { position:relative; }
Questo è relativo al body, non a #stepContainter, dato che quest'ultimo ha posizionamento statico.

Forse se scrivevo position:absolute, no?
position:relative non è posizionato relativamente a sè stesso (e comunque sempre rispetto alla posizione che avrebbe nel flusso della pagina)?

#step1 { left: 5px; }
left puo` essere usato solo in un blocco con posionamento assoluto o relativo

Che mi pare di aver messo.


Grazie dell'aiuto.... vediamo se riesco a chiarirmi finalmente i dubbi sul posizionamento

[Mich_]

margin: auto;
l'effetto e` di posizionare il blocco in maniera automatica lasciando lo stesso spazio a destra e a sinistra (sopra e sotto NON funziona allo stesso modo - in IE non funziona)

position:relative;
il posizionamento non segue le regole dello statico, ma puoi definire lo spostamento vert e laterale

Le due cose sono mutuamente escludentesi, quindi.

Per centrare un blocco posizionato si usa:
width: XXpx;
left: 50%
margin-left: -Xpx; /* meno la meta` di XX */

----
#steps { position:relative; }
E` relativo al blocco che lo contiene che sia posizionato absolute o relative; #stepContainter e` posizionato statico (per lo meno io non ho visto l'attributo position), quindi viene "saltato"


----

Che mi pare di aver messo.

Hai ragione. Non l'avevo visto.
Cercavo qualcosa del tipo:
#steps div{ position: absolute; }
che invece non ho visto; hai preferito descrivere tutti i blocchi uno per uno.

[pictor]

Originariamente inviato da Mich_
margin: auto;
l'effetto e` di posizionare il blocco in maniera automatica lasciando lo stesso spazio a destra e a sinistra (sopra e sotto NON funziona allo stesso modo - in IE non funziona)

Ok, però non è sbagliato il fatto di assegnare dei margini automatici ad un blocco relative.
La tua obiezione era solo sull'usare margin-left/margin-right se capisco bene.

position:relative;
il posizionamento non segue le regole dello statico, ma puoi definire lo spostamento vert e laterale

Le due cose sono mutuamente escludentesi, quindi.

Da quanto mi pare di capire leggendo le guide (e per esperienza ) invece mi sembra che la posizione nel flusso della pagina (non impostando left/right/top/bottom) sia identico tra static e relative.

Giuro che non sto capendo che cosa stai cercando di dirmi. O forse intendevi senza il 'non'.

Per centrare un blocco posizionato si usa:
width: XXpx;
left: 50%
margin-left: -Xpx; /* meno la meta` di XX */

----
#steps { position:relative; }
E` relativo al blocco che lo contiene che sia posizionato absolute o relative; #stepContainter e` posizionato statico (per lo meno io non ho visto l'attributo position), quindi viene "saltato"

E quindi non è il blocco contenitore?
Mi tornerebbe se #steps fosse assoluto (e sarebbe 'assoluto' rispetto al primo padre 'relativo' o 'assoluto', come da regole) ma non ho letto da nessuna parte che sia vero anche se fosse 'relative'.
Mi indichi dov'è scritto che non riesco a trovarlo?

Andiamo per affermazioni che sennò qua mi confondo sempre di più:
- position:relative non rimuove dal flusso della pagina il blocco
- se impostato a relative, left/right/bottom/top spostano il blocco rispetto alla posizione che avrebbe nel normale flusso della pagina (che di base è la stessa di uno static)
- in questo senso intendo 'relativo a sè stesso' (left/right/etc. non spostano rispetto al contenitore), anche se la posizione nel flusso della pagina dipende sempre dal contenitore (che però sono convinto sia #stepContainer)

Non mi torna questo:
- #stepContainer viene saltato in quanto statico

Mi puoi fare un esempio in cui quello che dici si può vedere a livello visuale? Perchè per quanto ne so lo salterebbe solo se #steps fosse assoluto.

----
Hai ragione. Non l'avevo visto.
Cercavo qualcosa del tipo:
#steps div{ position: absolute; }
che invece non ho visto; hai preferito descrivere tutti i blocchi uno per uno.

Giusto, è più adeguato

Scusami se ti stresso ma voglio capire alla bene il modello. E' già la 2/3° volta da quando studio CSS che ci torno e non lo capisco mai!
E ti tocca fare la cavia istruttore!

Grazie

[Mich_]

Comincio a non capirci piu` niente.
Ho parlato di incongruenze (la parola usata era contraddizioni), non di errori CSS.

Ok, però non è sbagliato il fatto di assegnare dei margini automatici ad un blocco relative.

Non e` sbagliato, ma non so a cosa possa servire.

mi sembra che la posizione nel flusso della pagina sia identico tra static e relative.

Si`, ma l'uso che puoi fare dei margini e` diverso.

Non ha senso spostare un blocco relativo di una quantita` "automatica". Ha senso spostarlo di una quantita` definita. E non ha senso definire margini opposti (vedi nell'articolo sui posiz relativi, seconda pagina, a meta`):

In conclusione, sarà chiaro al lettore che con il posizionamento relativo andrebbero specificati al massimo uno o due valori tra top, left, bottom e right: specificarne tre o quattro non avrebbe senso.

Io lo interpreto nel senso che ho detto sopra.

Se hai ancora dubbi, ti consiglio di mandare un messaggio privato all'autore (e` iscritto al forum, anche se non si fa vedere spesso; quando interviene e` sempre molto chiaro; credo che un pvt lo legga entro un paio di giorni). Oppure cerca i suoi interventi (link in alto - ricerca per autore).

[pictor]

Ok, thanks Mich.
Molto utile come al solito