Differenze interpretazione codice css browser

**Pokenet** · 15-08-2010, 23:18

Salve Forum di HTML.IT, scrivo qui perchè sono davvero disperato..

Io ho un sito, con un Layout strutturato in DIV, e CSS, e mi sono ritrovato con un problema... In pratica, su Google Chrome tutto OK, Internet Explorer quasi tutto ok (Footer, ovvero il pezzo con scritto "Affiliati" spostato tutto in basso e l'immagine del bordino destra scomparso).. Mentre su FireFox, Opera (Non ho testato altri Browser) si vede tutto completamente scombussolato.. Provate voi stessi, vi lascio il link del sito, e del codice CSS.
HomePage: www.trypokenet.altervista.org/homepage.php
CSS: www.trypokenet.altervista.org/main.css

Spero che riusciate ad aiutarmi, perchè non so più che fare...

Grazie in anticipo

**Pokenet** · 16-08-2010, 03:57

Ah, leggendo qua e la, qualche post, ho letto che potrebbe essere perchè nella pagina html non è impostato un doctype... Il fatto, è che io sono completamente all'oscuro di cosa serva un doctype, e come bisognerebbe usarlo..

**Mich_** · 16-08-2010, 11:45

Originariamente inviato da Pokenet
Ah, leggendo qua e la, qualche post, ho letto che potrebbe essere perchè nella pagina html non è impostato un doctype... Il fatto, è che io sono completamente all'oscuro di cosa serva un doctype, e come bisognerebbe usarlo..

Ad esempio: http://www.w3schools.com/tags/tag_doctype.asp
ma ci sono anche altri posti.

Inoltre, per una spiegazione didattica: http://basic.html.it/guide/leggi/51/guida-html/ capitoli 3 e 59 (ma se non conosci le basi sara` difficile capire il 59, per cui ti consiglio di leggere tutta la parte introduttiva - capitoli 1 - 10)

**Pokenet** · 16-08-2010, 22:17

Ok, grazie Mich, ora ho un idea chiara di cosa sia un doctype, ma questo non mi ha aiutato ad uscire da questa situazione!

Ho provato ad impostare ad inizio pagina questa stringa:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>

(E anche tutte le altre, riguardanti l'html)
Ma niente... sempre stesso problema.. Non è che qualche buon anima potrebbe controllare il codice CSS, e quello HTML, che elenco a inizio post? Le sarei infinitamente grato.
Ringrazio in anticipo

**Mich_** · 17-08-2010, 08:54

Non ho visto il DOCTYPE nella tua pagina (quella citata nel primo link).
Invece ho visto molte formattazioni HTML, che possono andare in conflitto con i CSS (browser diversi risolvono i conflitti in modo diverso).

E perche` parti con una DTD vecchia?
Una pagina fatta oggi andrebbe realizzata in XHTML 1.0 Strict, in modo da essere compatibile con la maggior parte dei browser in circolazione. (Tra un anno magari si potra` usare HTML5, ma credo che il supporto sia troppo scarso per poterlo consigliare oggi)

Quando hai inserito il DOCTYPE corretto, fa' uso degli strumenti di validazione HTML e CSS (vedi riferimenti tra i "link utili"): sono molto meglio di qualsiasi umano per riconoscere gli errori di sintassi, e finche` ci sono errori di sintassi, e` difficile scoprire gli altri.

**ResianTaxidrive** · 17-08-2010, 15:58

Ciao Mich_, perchè sconsigli l'utilizzo di una doctype diversa dal HTML 4?

Io uso sempre una HTML 4 Strict e sto attenta a produrre codice ben formato e validato; quali vantaggi avrei da XHTML?

**Mich_** · 17-08-2010, 16:13

Il problema fondamentale (e pratico ) e` IE6: con la XHTML 1.0 Strict sono automaticamente risolti almeno meta` dei problemi, (quelli del box-model in primis).

E comunque non conviene usare una DTD vecchia, che potrebbe non venir supportata dai browser di prossima generazione.
La XHTML 1.0 Strict e` quella che al momento ha il supporto maggiore (che io sappia).

I browser piu` recenti supportano anche HTML 5 (che peraltro ancora non e` standard ufficiale), ma non quelli un po' datati, per cui a mio parere e` ancora un po' presto per usarla (salvo per esperimenti, che sono naturalmente sempre ben visti).

Nota: questi son pareri personali. Una DTD strict e` comunque una buona cosa, mentre io escluderei le DTD transitional per le pag nuove (non hanno bisogno di definizioni transitorie, che servono invece per adattare le pag vecchie senza doverle riscrivere)

**Pokenet** · 17-08-2010, 19:41

Ho impostato la strict, come consigliato da Mich, ora però, ho gli stessi problemi anche su Google Chrome, dove prima si vedeva tutto perfettamente

Mentre su Opera, Firefox sembra essersi "aggiustato" anche se minimamente...

Avete ulteriori consigli da darmi?

**Pokenet** · 17-08-2010, 19:54

Penso di aver trovato il problema:
In pratica, in tutti i browser (eccetto Google Chrome) mi mette questa immagine: http://www.trypokenet.altervista.org...uotodestro.png con il relativo codice CSS:

codice:

#Spazio_Vuoto_Destro { 
      margin: 0;
      width: 34px;
      height: 1899px;
      float:left;
      background-image: url(images/layout/spaziovuotodestro.png);
}

sotto, le altre immagini e non affianco alle altre, Non so se mi avete capito...
Comunque, se mi avete capito... come risolvo?

P.S: Ho anche notato, che su Opera non mi prende i font impostati dal css, cosa che invece su Google Chrome, funziona alla grande o.o

**sea_green** · 17-08-2010, 21:48

Nella tua pagina hai messo questa dichiarazione

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Mentre andrebbe questa:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nel tuo c'è un SYSTEM di troppo...magari è quello che ti da problemi!

Una volta che avrai sistemato il DOCTYPE puoi controllare il codice HTML automaticamente qui e quello CSS qui

Non risolve tutti i problemi, ma spesso aiuta...

Discussione: Differenze interpretazione codice css browser

Strumenti discussione

Ricerca discussione

Visualizza

Differenze interpretazione codice css browser

Permessi di invio