Stessa pagina web, visualizzazione differente se statica o dinamica

**dampyr** · 05-04-2020, 17.49.56

Salve, vorrei venire a capo di un problema ricorrente che finora avevo sempre risolto modificando i valori degli attributi CSS, ma che non ritengo la via professionalmente migliore...

Sto rifacendo il layout di un mio sito, attualmente statico e non responsive, rendendolo dinamico e responsive. Sono partito da un file html nel quale ho organizzato i vari div rendendoli responsive, e l'ho poi reso dinamico introducendo gli opportuni require di PHP per avere un menù identico per tutte le pagine, un unico footer, ecc...
Entrambe le pagine afferiscono agli stessi fogli di stile, eppure è immediato notare delle differenze:
Questa la pagina statica esattamente come la desidero http://pugniespinaci.altervista.org/modello.html
Questa la pagina PHP col medesimo sorgente assemblato con i require http://pugniespinaci.altervista.org/index-provv.php

Come mai il div "main", a parità di margin-top: 86px, nella pagina PHP è più in basso facendo apparire quello spazio vuoto tra esso e il blocco nav?
Come mai i due div affiancati più in basso si disallineano?

L'unica differenza la rilevo in modalità Ispeziona: nel codice della pagina PHP ci sono due strane stringhe, 65279 precedute da &# e virgolettate, e tutti i meta tag finiscono nel body anziché nell'head nonostante nei sorgenti sia tutto corretto (vedere per credere).

**mzanella** · 05-04-2020, 18.13.11

Direi che ti sei risposto da solo: il contenuto HTML generato nella seconda pagina è diverso da quello della prima.
Molto probabilmente c'è qualche errore nel codice PHP.

**dampyr** · 05-04-2020, 19.17.21

Come posso indagare a riguardo? Il codice si altera in fase di interpretazione da parte del browser, ma il sorgente sta bene, come risalgo alla causa?

**mzanella** · 05-04-2020, 20.50.31

Il codice si altera in fase di interpretazione da parte del browser

Impossibile, il codice PHP viene interpretato solo lato server. Al browser arriva soltanto l'output, ovvero il codice HTML prodotto dal PHP.

il sorgente sta bene

Evidentemente non tanto!

Come posso indagare a riguardo?

Debug del codice PHP. Controllalo pezzo per pezzo, per esempio hai già osservato come alcuni tag che dovrebbero figurare dentro a head compaiano invece nel body: esamina il codice PHP responsabile della generazione di <head>.

Se hai problemi puoi sempre riportare qui il codice e possiamo dargli un'occhiata.

**dampyr** · 06-04-2020, 12.18.13

Aggiornamento: ho aperto le pagine componenti il file php mediante i require dall'editor di Altervista, e all'inizio di ogni prima riga compare un pallino rosso, assente nell'editor offline che uso per compilare (Notepad++) anche visualizzando i caratteri nascosti. Rimossi tali pallini, il sito inizia a vedersi meglio e i meta tag stanno nell'head.
Resta da capire il disallineamento dei due div nel centro della pagina...

Si sa qualcosa di quei pallini rossi che l'editor di Altervista visualizza e che si ripercuotono sul risultato visivo?

Al browser arriva soltanto l'output, ovvero il codice HTML prodotto dal PHP.

Lo so, ma rimane strano che se il sorgente della pagina web è HTML restituito dal server in output, ci siano discordanze tra il codice presente in Visualizza sorgente e quello in Ispeziona.

**mzanella** · 06-04-2020, 12.40.59

Si sa qualcosa di quei pallini rossi che l'editor di Altervista visualizza e che si ripercuotono sul risultato visivo?

Probabilmente rappresentano caratteri non stampabili che sono finiti nel sorgente.

Lo so, ma rimane strano che se il sorgente della pagina web è HTML restituito dal server in output, ci siano discordanze tra il codice presente in Visualizza sorgente e quello in Ispeziona.

Sembra strano, ma quelle che vedi non sono discordanze. Visualizzando il codice relativo al banner tramite ispeziona puoi vedere:

Codice HTML:

				<div class="col-lg-6">
&#65279 ;					<div class="row">
						<h1 class="col-12">
							BANNER
						</h1>

mentre, tramite visualizza sorgente:

Codice HTML:

				<div class="col-lg-6">
					<div class="row">
						<h1 class="col-12">
							BANNER
						</h1>
					</div>

In entrambi i casi il carattere non stampabile è presente prima del div con classe row. Solo che la schermata "ispeziona" lo enfatizza rendendolo come entità HTML, la schermata "visualizza sorgente" lo stampa così com'è (ed essendo "non stampabile" non stampa nulla...).

**darbula** · 06-04-2020, 12.47.58

Il pallino rosso iniziale significa il BOM.. imposta il tuo notepad con UTF-8 senza BOM oppure scrivi in una codifica non unicode "assenza di BOM".

**dampyr** · 06-04-2020, 16.43.12

Originalmente inviato da mzanella

Probabilmente rappresentano caratteri non stampabili che sono finiti nel sorgente.

Sembra strano, ma quelle che vedi non sono discordanze. Visualizzando il codice relativo al banner tramite ispeziona puoi vedere:

Codice HTML:

				<div class="col-lg-6">
 ;					<div class="row">
						<h1 class="col-12">
							BANNER
						</h1>

mentre, tramite visualizza sorgente:

Codice HTML:

				<div class="col-lg-6">
					<div class="row">
						<h1 class="col-12">
							BANNER
						</h1>
					</div>

In entrambi i casi il carattere non stampabile è presente prima del div con classe row. Solo che la schermata "ispeziona" lo enfatizza rendendolo come entità HTML, la schermata "visualizza sorgente" lo stampa così com'è (ed essendo "non stampabile" non stampa nulla...).

Ok, spiegazione chiarissima. :) Quei caratteri non stampabili sarebbero responsabili dello spostamento dei meta tag, come una sorta di "offset" di una parte del codice?

Originalmente inviato da darbula

Il pallino rosso iniziale significa il BOM.. imposta il tuo notepad con UTF-8 senza BOM oppure scrivi in una codifica non unicode "assenza di BOM".

Qua sta il mistero: Notepad++ è già impostato in UTF-8 senza BOM.
Mi conviene salvarmi in locale le pagine corrette dall'editor di Altervista e continuare a lavorare su quelle.

**mzanella** · 06-04-2020, 16.53.23

Quei caratteri non stampabili sarebbero responsabili dello spostamento dei meta tag, come una sorta di "offset" di una parte del codice?

All'atto pratico sì.

**darbula** · 06-04-2020, 21.47.25

Puoi provare usando chrome modalità incognito e usa questa guida per convertire in UTF-8 senza BOM https://www.hesk.com/knowledgebase/index.php?article=87
Cmq se apri un file UTF-8 con BOM in ISO-8859-1 sono rappresentabili. EF BB BF https://it.wikipedia.org/wiki/ISO/IEC_8859-1

Discussione: Stessa pagina web, visualizzazione differente se statica o dinamica

LinkBack

Strumenti discussione

Display

Stessa pagina web, visualizzazione differente se statica o dinamica

Regole di scrittura