Problemi con compatibilità browser

**ubbicom** · 19-08-2010, 17:59

Ciao a tutti.

Ho fatto una paginetta in css e l'ho pubblicata sul web.
Facendo le varie prove con i browser più conosciuti questo è il risultato:

1) Internet explorer 8: nessun problema;
2) Su tutti gli altri browser Firefox, Opera, Safari e google chrome non visualizzo l'intestazione della pagina ed il piè di pagina si sovrappone alla pagina in questione.

Queste sono le porzioni del css interessate dal problema:

Intestazione:

codice:

/*------------------------------------------------topheader--------------------*/
#topheader{
		  
	width:1004px;
	height:307px	
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
	background-image: url(/casting/images/banner.jpg);
	background-repeat: no-repeat;
}

Piè di pagina CSS:

codice:

.fotter_linksarea {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #ee7e1f;
	text-decoration: none;
	margin: 0px;
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}



.fotter_link {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #ee7e1f;
	text-decoration: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
}
.fotter_link:hover {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #b22d00;
	text-decoration: none;
}
.fotter_copyrightsarea {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #401400;
	text-decoration: none;
	margin: 0px;
	float: left;
	width: 100%;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}

Piè di pagina della pagina htm:

codice:

<div class="fotter_linksarea">
    <div align="center">
    

			Inicio |
			DENUNCIA UN PROBLEMA | 
			Forum |
			Contatti  |
			Facebook  |				
			Privacy | 
			Condizioni 
					
	</div>
	</div>
	
	<div class="fotter_copyrightsarea">
		<div align="center">Copyright © 2009</div>
	</div>

Come posso risolvere?
Grazie-

**ubbicom** · 19-08-2010, 22:38

Da qui http://users3.jabry.com/ubbicom/style.css è possibile scaricare il css in questione...

Ho fatto anche una prova di validazione tramite il sito http://jigsaw.w3.org/css-validator/
ha dato tre errori di cui due per me incomprensibili...

**Mich_** · 20-08-2010, 09:03

Prima di guardare il CSS occorre che il codice HTML sia realizzato bene, sia corretto dal punto di vista sia della sintassi che della semantica.
Ed il tuo (per la parte che hai pubblicato) non lo e`:
- hai usato formattazione HTML (che mette in crisi la formattazione CSS)
- hai fatto una lista senza i tag di lista
- hai inserito elementi strutturali per operare delle separazioni

In queste condizioni e` molto difficile sistemare il CSS (impossibile realizzare una cosa uguale in tutti i browser).

Quindi per prima cosa sistema l'HTML: in pratica devi seguire le regole di una DTD strict.
Io considero che la migliore al giorno d'oggi sia XHTML 1.0 Strict, ma anche HTML 4.0 Strict puo` servire allo scopo (pero` ci sono poi piu` problemi con IE6). Poi valida il codice HTML.

**ubbicom** · 20-08-2010, 09:15

Originariamente inviato da Mich_
Prima di guardare il CSS occorre che il codice HTML sia realizzato bene, sia corretto dal punto di vista sia della sintassi che della semantica.
Ed il tuo (per la parte che hai pubblicato) non lo e`:
- hai usato formattazione HTML (che mette in crisi la formattazione CSS)
- hai fatto una lista senza i tag di lista
- hai inserito elementi strutturali per operare delle separazioni

In queste condizioni e` molto difficile sistemare il CSS (impossibile realizzare una cosa uguale in tutti i browser).

Quindi per prima cosa sistema l'HTML: in pratica devi seguire le regole di una DTD strict.
Io considero che la migliore al giorno d'oggi sia XHTML 1.0 Strict, ma anche HTML 4.0 Strict puo` servire allo scopo (pero` ci sono poi piu` problemi con IE6). Poi valida il codice HTML.

Grazie Mich_ per aver risposto-
Dove posso documentarmi per consultare le regole di una DTD strict?
Sono alquanto asciutto in materia-

**Mich_** · 20-08-2010, 09:28

Ad esempio sulla guida XHTML di HTML.it .

Ma puoi anche cambiare la DTD (vedi qui per le stringhe corrette); puoi verificare la sintassi in un reference (X)HTML (questo ad esempio); ed infine verificare tramite il validatore HTML.

**ubbicom** · 20-08-2010, 09:56

Originariamente inviato da Mich_
Ad esempio sulla guida XHTML di HTML.it .

Ma puoi anche cambiare la DTD (vedi qui per le stringhe corrette); puoi verificare la sintassi in un reference (X)HTML (questo ad esempio); ed infine verificare tramite il validatore HTML.

Ok, grazie-
Mi metto al lavoro!
Se ho problemi riposto qui--

**ubbicom** · 20-08-2010, 16:20

Allora dopo un pò di pulizia sono arrivato ad un codice html che rpesenta adesso secondo validator: 54 Errors, 30 warning(s)

Però una parte di questi errori non capisco come risolverli, ne posto alcuni:

codice:

Line 8, Column 12: there is no attribute "NAME" 
<META NAME="Keywords" CONTENT="…

Line 8, Column 31: there is no attribute "CONTENT" 
<META NAME="Keywords" CONTENT="…

Line 8, Column 340: element "META" undefined 
…" />

Line 9, Column 210: element "META" undefined 
…" />

Line 10, Column 65: element "META" undefined 
<META NAME="Author" CONTENT="postmaster@dominio.com" />

Line 12, Column 30: required attribute "type" not specified 
<script language="JavaScript">

Cosa devo fare???

**ubbicom** · 20-08-2010, 18:43

Con non poca fatica sono risucito a validare tutto l'Hmtl.

Due cose strane:

1) la stessa pagina htm lanciata in localhost visualizza correttamente l'intestazione mentre non la visualizza una volta caricata sul server;

2) il piè di pagina continua a sovrapporsi alla parte centrale della pagina in questione. anche se l'html è validato...

**ubbicom** · 20-08-2010, 21:23

Allora.... è quasi tutto risolto nel senso che è rimasto l'unico problema il piè di pagina che continua a sovrapporsi in 4 browser su 5 alla parte centrale della pagina web in questione.

1) Internet explorer 8 = tutto ok

2) Firefox 3.6.8 = piè di pagina sovrapposto ed i seguenti errori:

codice:

Avviso: Proprietà sconosciuta 'behavior'.  Dichiarazione tralasciata.
File sorgente: http://www.dominiox.com/css/style.css
Riga: 1688

3) Opera 10.61 = piè di pagina sovrapposto ed i seguenti errori:

codice:

CSS - http://www.dominiox.com/casting/css/style.css
Linked-in stylesheet
behavior is an unknown property
Line 1688:
     behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.p
  ------------^
CSS - http://www.dominiox.com/casting/css/style.css
Linked-in stylesheet
Declaration syntax error
Line 1693:
      );
  ------^
CSS - http://www.dominiox.com/casting/css/style.css
Linked-in stylesheet
behavior is an unknown property
Line 1713:
     behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.p
  ------------^
CSS - http://www.dominiox.com/casting/css/style.css
Linked-in stylesheet
Declaration syntax error
Line 1718:
      );
  ------^

4) Safari 5.0.1 = piè di pagina sovrapposto e non ho trovato la console errori

5) Google chrome 5.0.375.126 = piè di pagina sovrapposto ed i seguenti errori:

codice:

Unmatched </param> encountered.  Ignoring tag.
http://www.dominiox.com/:369Unmatched </param> encountered.  Ignoring tag.
http://www.dominiox.com/:370Unmatched </param> encountered.  Ignoring tag.
http://www.dominiox.com/:372Unmatched </embed> encountered.  Ignoring tag.
http://www.dominiox.com/:378Unmatched </param> encountered.  Ignoring tag.

Da qui http://users3.jabry.com/ubbicom/style.css è sempre possibile scaricare il css completo in questione.

Spero in un vostro aiuto risolutivo-
Grazie-

**Prill** · 21-08-2010, 17:00

Ciao Ubbicom, è possibile vedere l'intera pagina e non solo il css? Quanto a behavior è una proprietà non standard, del solo Explorer, puoi nasconderla al validatore e non farla vedere agli altri browser usando un css per Explorer inserito fra commenti condizionali.

PS: forse per il piè di pagina volevi usare footer invece di fotter

Discussione: Problemi con compatibilità browser

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con compatibilità browser

Permessi di invio