imperfezioni nella visualizzazione della pagina con firefox

[xabila]

Salve,

vi chiedo consiglio velocemente, per un problema che spero sia da poco, ma ditemi voi... In breve se visualizzo il sito con firefox ci sono delle lievi divergenze nel posizionamento degli elementi nella pagina, in genere tendenzialmente verso l'alto, come posso ovviare a questo problema? E' notoriamente dato da un problema di semantica? O è magari un fatto comune che richiede determinate specifiche per ovviare al problema?

Vi ringrazio in anticipo per l'eventuale aiuto e colgo l'occasione per porgere al forum tutto i miei omaggi,

Francesco M.

[xabila]

Vorrei precisare un aspetto, in breve la divergenza tra firefox e gli altri browser mi insorge dal momento che prendo in considerazione il margine o superiore o inferiore del div contenitore e/o della pagina, tendenzialmente firefox nelle sue coordinate verticali tende ad avere un paio di centimetri di scarto rispetto agl'altri browser...a voi risulta come problematica? O provato a modificare un poco qua e la ma il problema persiste, penso, magari se impostassi meglio i valori position/absolute/relative potrebbe migliorare...

...ma la base del sito si struttura su un div posizionato centralmente con una larghezza definita i quali elementi interni prendono in presupposto i suoi margini per collocarsi quindi senza neanche necessitare di definire una position nei fogli di stile agli elementi...

[KillerWorm]

Ciao.

Risposta breve:
Mostra il codice html e css, oppure posta il link alla pagina pubblica.

Risposta dettagliata:
Il problema può dipendere da svariati fattori. La tua richiesta, anche con le precisazioni, resta generica se non mostri il codice html o il css in questione. Hai una pagina pubblica da mostrare?

E' notoriamente dato da un problema di semantica? O è magari un fatto comune che richiede determinate specifiche per ovviare al problema?

Non capisco il tuo riferimento alla "semantica"? Che c'entra!?

Più in generale è possibile dire che ogni browser interpreti a proprio modo il markup html e le regole css, pur restando sempre nei limiti dettati delle specifiche standard. Per questo motivo gli sviluppatori spesso fanno uso di hack, trick, workaround e altre invenzioni di vario genere in modo da ottenere un risultato il più possibile cross-browser. Questo avviene soprattutto quando si vuole ottenere un codice retro-compatibile che sia fruibile adeguatamente anche con browser datati (i quali spesso non si attengono ai moderni standard per ovvie ragioni cronologiche). Non penso si tratti del tuo caso.

Ad ogni modo, la maggior parte delle situazioni in cui si presentano differenze di visualizzazione (sostanziali o anche minime) tra i vari browser, è dovuta ad errori nel codice html o nel css, che sono propriamente di tipo umano.
In questi casi, infatti, il browser di turno, andrà a cercare di "aggiustare" tali errori, ottenendo quindi un'impaginazione lasciata alla libera interpretazione del browser stesso.

O provato a modificare un poco qua e la ma il problema persiste

Non so perché ma ho il sospetto, anzi ne sono quasi convinto, che anche nel tuo caso si tratti di un qualche errore di scrittura del codice. Mi sbaglierò?
Se non fosse così bisognerebbe comunque capire quale'è il codice (html e/o css) che genera il problema che descrivi.

Per questo motivo è impossibile darti aiuto se non si vede il codice in questione. Meglio se posti un link alla pagina pubblica dove si presenta il problema.

[xabila]

Salve, ti ringrazio per la risposta, tolto il fatto che non comprendo cosa ci sia da specificare nella parola semantica essendo puramente italiana e riadattabile a più contesti e concetti, in breve possiamo definire la semantica come la scienza che studia il significato o il concetto legato a parole e frasi e per tanto:

è un problema noto per essere legato ad un errata "traduzione" del concetto di uno o più elementi inerenti alla specifica "lingua" in uso?

Detto così penso sia più corretta e stabile come frase, ma penso in oltre modo che potesse anche essere deducibile, ma magari mi sbaglio.

Per quanto è concerno invece al : ho provato a modificare qua e la il codice
Ovviamente mi riferisco a modifiche apportate con il dovuto senno e la giusta ponderazione, tendenzialmente alla struttura principale dei contenitori.

Per il codice HTML/CSS sarebbe un poco un problema essendo particolarmente lungo da pubblicare ed al momento non presente nella rete, quindi riporto nel prossimo commento che seguirà tra pochi secondi, un esempio costruito al volo ma che riproduce (anche se più in piccolo) il problema riscontrato.

Comunque sia grazie di cuore anche solo per esserti adoperato nel rispondermi.

Concludo specificando che i disegni presenti nell'esempio sono puramente casuali e reperiti sul web, per tanto si dichiara l'interesse a non violare nessun possibile diritto d'appartenenza degli stessi.

[xabila]

<html>
<head>

<link href= "esempio.css" rel= "stylesheet" type= "text/css">



</head>


<body>


<div id = "contenitore">


<header id = "slide">
<img height = "341" width = "878" src = "http://cinefestivais.com.br/site2014/wp-content/uploads/2014/09/castillo0.png" class = "logo" alt = "logo">
</header>


<div id = "sinistro">
<section id = "news">

<h1>PROVA</h1>
<hr>
<article>


<header>
<h4>
<a href= "#" rel= "bookmark"> NEWS #1 </a> by <a href= "#"> rosso fiorentino </a>
</h4>

<a href= "#" rel= "bookmark">
<img height = "175" width = "700" src = "http://images.vg247.com/current//2014/01/Dark_souls_2_into_the_light_comic.jpg" class = "logo" alt = "logo">
</a>


</header>

<p>prova prova prova prova prova</p>

<a class = "ciao" href = "#" > Read more .. </a>


</article>
</div>


<div id = "destro">


<section id = "artista">


<img height = "400" width = "300" src = "" class = "logo" alt = "logo">


<h1>Rosso Fiorentino</h1>
<p>Rosso fiorentino è un pittore manierista</p>



</section>


<aside>

<h1>Archives Events</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>


</div>


<footer>
<small> ciao ciao ciao ciao </small>
</footer>


</body>


</html>

[xabila]

#contenitore {
width: 980px;
background-color: white;
margin: 0 auto;
padding: 0;

}


#slide {
margin: 0;
padding: 0;
margin-left: 51px;
height: 341px;
width: 878px;
box-shadow:1px 1px 5px #000;
}

#sinistra {
width: 700px;
}
.ciao {

padding: 3px;
text-decoration: none;
font-weight: regular;
background: black;
color: white;
font-size: 12px;
position: relative;
bottom: 8px;
left: 625px;
}


#destro {
width: 320px;
margin-top: -300px;
margin-left: 750px;
border: solid;
}

[KillerWorm]

Cerco di risponderti seguendo un certo ordine di punti:

1. Mettiamo da parte il discorso sulla semantica, altrimenti non ne usciamo più.
2. Quando posti del codice sul forum sarebbe opportuno usare gli appositi tag di formattazione, in modo da rendere più comprensibile il codice e l'intera discussione. Vedi regolamento di sezione.
3. Il codice html che hai postato presenta diversi errori (tra cui mancata apertura/chiusura di tag) che compromettono la validazione del codice stesso e possono incidere sulla corretta visualizzazione, nonché mostrare la pagina in modo differente tra i diversi browser (ciò che ho accennato sul precedente post). Consiglio di usare uno strumento di validazione in modo da poter rilevare eventuali errori o avvertenze e correggere opportunamente il codice. Come servizio online puoi usare validator.w3.org/nu/.
4. Nel documento html è sempre bene specificare un DTD. L'omissione di questa dichiarazione può incidere sul modo in cui la pagina viene presentata e quindi sulla disposizione degli elementi. Per di più, la presentazione della pagina può differire a seconda del browser in cui viene mostrata. Come sopra, consiglio di verificare attraverso un validatore.
5. Il codice css che hai postato presenta un errore. Il valore regular non è un valore valido per la proprietà font-weight. Possibile che non incida direttamente sul problema in questione ma non è escluso. Consiglio, anche in questo caso, di verificare sempre la correttezza del proprio codice attraverso gli appositi strumenti di validazione. Online puoi usare jigsaw.w3.org/css-validator/.
6. Ho provato il tuo codice, correggendo opportunamente gli errori, ma non vedo sostanziali differenze. Attualmente ho testato con FF41, CH46, IE9 su Vista. Noto solo la diversità del font utilizzato, che di default (non avendolo tu specificato nel css) risulta diverso tra i vari browser, e che potrebbe in effetti comportare delle differenze (relativamente minime) dovute al diverso spazio occupato dai testi stessi. Ci sono poi altre minimissime differenze, come il bordo attorno all'immagine usata dentro il tag <a> (visibile su IE), che però non credo abbiano parte più di tanto nell'argomento in questione.

Ora, le differenze che noto sono al massimo di 1 o 2 pixel (che probabilmente sono dovuti proprio alla differenza del font o delle relative proprietà del font), ma tu hai accennato a centimetri.

Da ciò che ho provato (il codice che hai postato e che ho corretto perché fosse valido), non vedo questa differenza di centimetri. Non riesco a seguire quindi ciò che hai indicato.
Non so se sia stato un tuo errore nello scrivere centimetri anziché pixel.
Non so se gli errori, nel codice che hai postato, siano solo errori di trascrizione di ciò che hai riportato qui sul forum, oppure siano errori effettivi che hai sul tuo codice originale e che possano quindi essere rilevanti secondo l'argomento in questione.
Non si capisce a quali elementi, in particolare, ti stia riferendo.

Ad ogni modo sarebbe bene definire meglio il font (o i font) nel css. Specificando quindi opportunamente anche i vari relativi valori (size, line-height, family, ecc.) in modo da uniformare la presentazione della pagina sui vari browser.

Inoltre, così come per il font, molte proprietà hanno dei valori di default che possono differire da browser a browser. Se queste proprietà non sono definite sul css allora il browser userà, appunto, i valori di default. In questo caso è prevedibile che la presentazione della pagina possa risultare differente tra i vari browser.

Per concludere:
in genere, proprio per questi motivi, si fa uso di un file css (generalmente chiamato reset.css) in modo che siano "inizializzate" opportunamente tutte le varie proprietà così da rendere, la presentazione della pagina, uguale su tutti i browser.

[xabila]

.

Come già specificato questo è un codice costruito su due piedi e velocemente con un idea di struttura analoga alla mia pagina avente l'unico scopo di darti un idea generica, sul file originale non sono presenti Tag aperti così come sono dichiarate le opportune intestazioni di pagina.

In ogni modo proverò a convalidare il codice con gli strumenti da te segnalati, si sa mai che salti fuori una svista che phpStorm non mi segnala. Comunque valuterò anche la possibilità dei font per quanto sia qualcosa che preferisco sempre svolgere alla fine con la dovuta calma e ponderazione.

Comunque su l'esempio pubblicato l'errore di visualizzazione è pressoché minimo e presente sul margine alto del lato sinistro, ovviamente in un progetto di dimensioni maggiori questo sgravo aumenta in proporzione. (ci provo sempre a pubblicare il codice con il dovuto Tag ma crea sempre una gran confusione)

Solo due chiarimenti mi interesserebbero, parli di parametri che andrebbero specificati per evitare valori di defaul, generalmente a quali ti riferisci? A valori come lo spessore di un bordo o più a valori tipo il padding per dire...

...ma tolto tutto non ho ben afferrato il concetto del file css.reset quale dovrebbe mai essere il suo contenuto?

P.s mi scuso per errori o illeggibilità ma scrivo dal telefono.

[xabila]

Ho provato a fare un controllo con i siti da te indicati, sia per il file html sia per i file css ma non mi ha segnalato nessun tipo di errore se non inezie tipo un valore obsoleto nel tag <hr>

A questo punto credo proprio che il problema sia dato da uno dei due aspetti da te esposti come possibilità:

-1- La mancanza di assegnazione di un font (anche nel lavoro effettivo non gli ho ancora assegnati) al quale provvederò il prima possibile per verificare che sia più o meno dovuto a quello.

-2- La mancanza di definizione di parametri standard nelle css, ma qui attendo magari una tua risposta per comprendere meglio a cosa ti definisci e valutare di conseguenza se ci sono mancanze effettive nel mio lavoro

In ogni modo grazie ancora per la disponibilità dimostrata!

[KillerWorm]

Solo due chiarimenti mi interesserebbero, parli di parametri che andrebbero specificati per evitare valori di defaul, generalmente a quali ti riferisci? A valori come lo spessore di un bordo o più a valori tipo il padding per dire...

...ma tolto tutto non ho ben afferrato il concetto del file css.reset quale dovrebbe mai essere il suo contenuto?

Perdonami, non è per non risponderti ma basterebbe qualche semplice ricerca.
Vedi ad esempio http://www.html.it/pag/18944/reset-c...t-del-browser/

Per maggiori informazioni puoi cliccare su reset.css nel mio precedente post.

A questo punto credo che il problema principale sia dovuto proprio alla mancanza di definizione di queste varie proprietà, tra cui font, che altrimenti sarebbero prese con i valori di default, spesso differenti da browser a browser, come indicato precedentemente.

Per il momento ti consiglio quindi di eseguire qualche prova con uno dei vari reset.css che puoi trovare facilmente online. Verifica quindi se la situazione migliora o quantomeno se la presentazione della pagina risulta uguale sui diversi browser. Probabile che, per ottenere l'impostazione desiderata, dovrai poi aggiustare, nel tuo css, alcuni di quei valori (margin, padding, ecc.) che saranno stati azzerati dal reset.css.

Buon proseguimento.