Errore Visualizzazione Tabella

[Andrew80]

Ciao a tutti;
Scusate il disturbo ma sto creando una pagina veramente basica di un piccolissimo sito e mi ritrovo con questo problema.
La medesima pagina se la guardo da desktop (Google Chrome) nessun problema invece se la apro da cellulare Android (app Google Chrome) sul caricamento delle la visualizzazione è un disastro come vedete da foto in allegato.
Vi copio il codice della pagina in questione magari qualcuno sa aiutarmi.
Grazie per chiunque riesca a darmi un suggerimento.
Andrea

Per chi volesse l'indirizzo del mini sito è questo:
https://dinasty.altervista.org

[Andrew80]

Purtroppo non riesco ad allegare l'immagine che la trovate a questo link:
https://1drv.ms/u/s!AnbIfJxpPNWQj7kX...-L7LA?e=lUN8u7

[Andrew80]

A questo link potete invece trovare il file sorgente della pagina in questione:
https://1drv.ms/u/s!AnbIfJxpPNWQj7kY...lw17w?e=ztuC09

[Vincent.Zeno]

io la vedo regolarmente
il layout non è responsivo ma la pagina si vede normalmente ridimensionata

[Andrew80]

Ciao grazie della risposta.
Scusa la curiosità la stai guardando da deskop o android o iphone?
giusto per capire
grazie

[Vincent.Zeno]

mi correggo:
(su mobile android)
con protocollo http vedo regolarmente, con https non carica per problemi dns

[Andrew80]

la pagina che da l'errore non è lindex ma questa
https://dinasty.altervista.org/rose.php

[Vincent.Zeno]

la pagina che da l'errore non è l'index ma questa

da mobile (chrome su android) noto poco il problema del testo grande, lo vedo invece su desk (chrome si win) in modalità ispezione.

tuttavia non ho notato differenza nelle impostazione del css, se riesco provo ad approfondire più tardi.

[Andrew80]

Ok grazie mille aspetto tue notizie se riesce
grazie buon week end
Andrea

[KillerWorm]

Risposta breve: nel css aggiungi width:100px; per th,td


Risposta lunga:
Ciao, la cosa è abbastanza strana e mi ha incuriosito.

Su desktop win10home (con CH, FF, ED, IE11) non vedo il problema, anche usando le relative "modalità flessibili".
@Vincent cosa intendi esattamente per "modalità ispezione"?

Il problema invece mi si presenta, come indica Andrea, su android, sia con CH sia col browser integrato.

Giocando un po' ho notato un'ulteriore cosa insolita, la dimensione di quella parte di testo (che risulta più grande rispetto al resto) varia se ruoto lo schermo e ricarico la pagina.

- Apro la pagina con schermo in verticale (quel testo risulta più grande rispetto al resto)
- ruoto in orizzontale (la dimensione del testo resta come prima)
- trascino verso il basso per aggiornare la pagina
- dopo il refresh vedo che la dimensione di quel testo si è ridotta notevolmente (quasi alla pari del resto)
- ruoto di nuovo in verticale (senza aggiornare), il testo resta con quelle ultime dimensioni
- se aggiorno nuovamente, quel testo torna grande.

Su desktop, ispezionando gli elementi e il codice, non noto particolari errori o impostazioni che possano influire su tale comportamento (in effetti c'è qualcosa che influisce in modo implicito; vedi sotto).

Nel codice HTML, passandolo sul validatore, è presente qualche errore "minore" qua e là, ma non sugli elementi della tabella in questione; non mi pare possa influire, anche se consiglio comunque di provvedere a risolverli per avere un codice valido a tutti gli effetti.

Ho appena provato anche ad analizzare la pagina su CH (desktop) collegando lo smartphone via usb con "Opzioni sviluppatore" attivata.

Tutto quello che posso notare è un valore "inconsueto" per il "font-size" nel css calcolato di quei td incriminati, in cui il testo risulta grande.

Ora, ai td/th è stato applicato "font-size:medium" (che poi è anche il valore di default, per cui sarebbe inutile specificarlo) e tutti i td/th hanno un valore calcolato di "16px", come dovrebbe essere di norma, tranne quei td in cui è presente il testo grande, compreso il td sopra (che contiene solo uno slah "/"): questi presentano un valore calcolato di "45.1914px" per il font-size.

Non vedo alcun nesso logico per questo comportamento

... poi ho visto questa regola che mi ha insospettito:

th, td {
    border: medium solid #7b7b7b;
    font-family: Arial, "Times New Roman", sans-serif;
    font-size: medium;
    margin: auto;
    text-align: center;
    max-width: 100px;
    min-width: 100px;
}

e mi son chiesto, che senso ha applicare max-width:100px; e min-width:100px;
non sarebbe stato più semplice impostare solo width:100px;

evidentemente no; il layout delle tabelle è calcolato secondo un "arcano" algoritmo per cui i contenuti hanno priorità sul calcolo delle dimensioni finali, rispetto alle dimensioni impostate via css per le celle.

Suppongo che quelle due righe siano un qualche trick per forzare appunto la larghezza delle celle.
Deduco quindi che le rotelle di qualche browser si rompano in questo forzatura, producendo qualche strana inconsistenza di visualizzazione dei contenuti e quindi alterando la dimensione del testo

Ad ogni modo, provando a giocare con le proprietà css, per puro caso ho notato che aggiungendo un bel width:100px, oltre quelle proprietà max e min, fissa il problema in questione.

Non conosco il motivo e non so dare spiegazioni più precise sullo strano comportamento della dimensione del testo - con qualche veloce ricerca non ho trovato nulla a riguardo - ma posso giusto dedurre che gli omini del browser di turno vadano in confusione quando si cerca di forzare in quel modo la larghezza minima e massima delle celle senza avere un valore di base come riferimento... o qualcosa del genere.

Prova e fai sapere.



PS: quel margin:auto; non ha motivo di essere applicato a delle celle di una tabella - il mio browser dice: "margin non ha effetto sugli elementi interni di una tabella". C'è qualche ragione per cui lo hai applicato? anche questo è un qualche trick?