Visualizzazione differente con vari browser

B

Brogelli

Nuovo Utente
11 Ott 2015
4
0
0
Salve.

Sto imparando a scrivere pagine web utilizzando anche i css, e per esercitarmi ho "copiato" il curriculum europeo standard (che ho in formato PDF).

Il problema che mi ritrovo adesso è perché questa pagina che ho creato si visualizza in modo completamente diverso utilizzando vari browser come: Explorer/Edge, Firefox o chrome o altri.
Si può fare con i css questa cosa?

In particolare lo si vede dalle spaziature (padding) che ci sono negli elenchi puntati.
In realtà non sono elenchi puntati perché fare un elenco puntato allineato a destra non mi riesce, quindi l'ho messo nell'immagine di sfondo (se qualcuno sa come fare...:)).

Comunque qui sotto riporto il codice...ho fatto un copia-incolla da quello originale dato che ho tolto i miei dati personali...quindi non mi serve che controlliate il codice...

AH IL FOGLIO DI STILE LO DOVETE METTERE IN UNA CARTELLA DI NOME CSS E L'IMMAGINE IN UNA CARTELLA DI NOME IMMAGINI...OVVIAMENTE TUTTO MINUSCOLO...

Grazie....spero di essere stato chiaro.

CODICE HTML:
Codice: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">

<html>

	<head>		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title> Curriculum vitae </title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			div.colonna792 {
			background-image: url(immagini/image.png);
			background-repeat: no-repeat;
			width:792;
			height:2370;
		</style>
	</head>
	
	<body>
	
		<body link="#1560bd" alink="#1560bd" vlink="#1560bd">
		
		<div class="colonna792">
		
		<table>
				
<!-- Prima pagina -->
			<tr>
				<td align="right" width="243px"> <p id="p1"> FORMATO EUROPEO <br> PER IL CURRICULUM <br> VITAE </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			
	<!-- Informazioni personali -->
			<tr>
				<td align="right" width="243px"> <p id="pinf-pers"> <b> INFORMAZIONI PERSONALI </b> </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p2"> Nome </p> </td>
				<td width="32px"> </td>
				<td> <p id="p2">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p2"> Indirizzo </p> </td>
				<td width="32px"> </td>
				<td> <p id="p2">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p2"> Telefono </p> </td>
				<td width="32px"> </td>
				<td> <p id="p2">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p2"> E-mail </p> </td>
				<td width="32px"> </td>
				<td> <p id="p2">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p2"> Nazionalità </p> </td>
				<td width="32px"> </td>
				<td> <p id="p2">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p3"> Data di nascita </p> </td>
				<td width="32px"> </td>
				<td> <p id="p3">  </p> </td>
			</tr>
			
	<!-- Esperienza lavorativa 1 -->
			<tr>
				<td align="right" width="243px"> <p id="pesp"> <b> ESPERIENZA LAVORATIVA </b> </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Date (da - a) </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Nome e indirizzo del <br> datore di lavoro </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Tipo di azienda o settore </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Tipo di impiego </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p5"> Principali mansioni e <br> responsabilità </p> </td>
				<td width="32px"> </td>
				<td> <p id="p5">  </p> </td>
			</tr>
			
	<!-- Esperienza lavorativa 2 -->
			<tr>
				<td align="right" width="243px"> <p id="pesp"> <b> ESPERIENZA LAVORATIVA </b> </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Date (da - a) </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Nome e indirizzo del <br> datore di lavoro </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Tipo di azienda o settore </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Tipo di impiego </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p5"> Principali mansioni e <br> responsabilità </p> </td>
				<td width="32px"> </td>
				<td> <p id="p5">  </p> </td>
			</tr>

	<!-- Istruzione e formazione -->
			<tr>
				<td align="right" width="243px"> <p id="pesp"> <b> ISTRUZIONE E FORMAZIONE </b> </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Date (da - a) </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Nome e tipo di istituto di <br> istruzione o formazione </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p6"> Principali materie / abilità </p> </td>
				<td width="32px"> </td>
				<td> <p id="p6">  </p> </td>
			</tr>
		</table>
		
		<table>
		
<!-- Seconda pagina -->
			<tr>
				<td align="right" width="243px"> <p id="p7"> professionali oggetto dello <br> studio </p> </td>
				<td width="32px"> </td>
				<td> <p id="p7">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Qualifica conseguita </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p17"> Livello nella classificazione <br> nazionale (se pertinente) </p> </td>
				<td width="32px"> </td>
				<td> <p id="p17">  </p> </td>
			</tr>
			
	<!-- Qualifica conseguita -->
			<tr>
				<td align="right" width="243px"> <p id="pesp"> <b> CORSO DI FORMAZIONE </b> </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Date (da - a) </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p8"> Qualifica conseguita </p> </td>
				<td width="32px"> </td>
				<td> <p id="p8">  </p> </td>
			</tr>
			
	<!-- Capacità e competenze personali -->
			<tr>
				<td align="right" width="243px"> <p id="pcap-com"> <b> CAPACITÀ E COMPETENZE <br> PERSONALI </b> </p> </td>
				<td width="32px"> </td>
				<td> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p9"> MADRELINGUA </p> </td>
				<td width="32px"> </td>
				<td> <p id="p10">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p9"> ALTRA LINGUA </p> </td>
				<td width="32px"> </td>
				<td> <p id="p16">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Capacità di lettura </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p4"> Capacità di scrittura </p> </td>
				<td width="32px"> </td>
				<td> <p id="p4">  </p> </td>
			</tr>
			<tr>
				<td align="right" width="243px"> <p id="p11"> Capacità di espressione orale </p> </td>
				<td width="32px"> </td>
				<td> <p id="p11">  </p> </td>
			</tr>
			
	<!-- Capacità e competenze relazionali -->
			<tr>
				<td align="right" width="243px"> <p id="pcap-com1"> CAPACITÀ E COMPETENZE <br> RELAZIONALI </p> </td>
				<td width="32px"> </td>
				<td> <p id="p12">  </p> </td>
			</tr>
			
	<!-- Capacità e competenze organizzative -->
			<tr>
				<td align="right" width="243px"> <p id="pcap-com1"> CAPACITÀ E COMPETENZE <br> ORGANIZZATIVE </p> </td>
				<td width="32px"> </td>
				<td> <p id="p12">  </p> </td>
			</tr>
			
	<!-- Capacità e competenze tecniche -->
			<tr>
				<td align="right" width="243px"> <p id="pcap-com2"> CAPACITÀ E COMPETENZE <br> TECNICHE </p> </td>
				<td width="32px"> </td>
				<td> <p id="p13">  </p> </td>
			</tr>
			
	<!-- Patente o patenti -->
			<tr>
				<td align="right" width="243px"> <p id="pcap-com1"> PATENTE O PATENTI </p> </td>
				<td width="32px"> </td>
				<td> <p id="p12">  </p> </td>
			</tr>			
				
		</table> <!-- FINE TABELLA -->
		
	<!-- Dati personali -->
		<p id="p14"> Autorizzo il trattamento dei miei dati personali, ai sensi del D.lgs. 196 del 30 giugno 2003 <br> <br> <br> </p>
		
		</div> <!-- class:colonna792 -->
	</body>
	
</html>

E POI IL CSS:
Codice: 
	body {
		font: 16px/100% Arial;
		background-color: #4f4f4f;
		margin: 4px 0px 4px 0px;
		}

	div.colonna792 {
		width:792;
		height:2370;
		background-color:#ffffff;
		margin:0 auto;
		padding: 70 0;
		}
		
	table {
		width: 792px;
		border: 0px solid black;
		}

	td {
		border: 0px solid black;
		vertical-align: top;
		}
		
	#p1 {
		font:16px/135% Arial, sans-serif;
		padding-bottom:76;
		}

	#p2 {
		font:14px/100% Arial, sans-serif;
		padding-bottom:20;
		}

	#p3 {
		font:14px/100% Arial, sans-serif;
		padding-bottom:40;
		}

	#p4 {
		font:14px/160% Arial, sans-serif;
		padding-bottom:0;
		}
		
	#p5 {
		font:14px/180% Arial, sans-serif;
		padding-bottom:45;
		}
		
	#p6 {
		font:14px/180% Arial, sans-serif;
		padding-bottom:140;
		}
		
	#p7 {
		font:14px/180% Arial, sans-serif;
		padding-bottom:66;
		}
	
	#p8 {
		font:14px/180% Arial, sans-serif;
		padding-bottom:27;
		}
		
	#p9 {
		font:12px/100% Arial, sans-serif;
		padding-bottom:18;
		}
		
	#p10 {
		font:14px/100% Arial, sans-serif;
		padding-bottom:18;
		}
		
	#p11 {
		font:14px/180% Arial, sans-serif;
		padding-bottom:40;
		}
		
	#p12 {
		font:14px/160% Arial, sans-serif;
		padding-bottom:30;
		}
		
	#p13 {
		font:14px/160% Arial, sans-serif;
		padding-bottom:22;
		}
		
	#p14 {
		font:12px/150% Arial, sans-serif;
		padding: 0 0 0 60;
		}
		
	#p15 {
		font:16px/150% Arial, sans-serif;
		padding: 0 0 0 0;
		text-align:center;
		}
		
	#p16 {
		font:14px/100% Arial, sans-serif;
		padding-bottom:36;
		}
			
	#p17 {
		font:14px/180% Arial, sans-serif;
		padding-bottom:20;
		}
			
	#pinf-pers {
		font:12px/100% Arial, sans-serif;
		padding-bottom:32;
		}

	#pesp {
		font:12px/100% Arial, sans-serif;
		padding-bottom:19;
		}
	
	#pcap-com {
		font:12px/150% Arial, sans-serif;
		padding-bottom:46;
		}
		
	#pcap-com1 {
		font:12px/150% Arial, sans-serif;
		padding-bottom:38;
		}
	
	#pcap-com2 {
		font:12px/150% Arial, sans-serif;
		padding-bottom:76;
		}
image.png
 
Fare un sito cross browser non è una cosa da principianti! Potresti seguire una delle tante guide che ci sono in rete per il cross browser, ma io ti consiglio vivamente: prima di pensare a cose così complicate impara bene l'uso dell'HTML e CSS poi farai cose un po piò soffisticate
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

D
  • Bloccata
protezione cartelle: blocco visualizzazione/scaricamento contenuto, ma abilitazione utilizzo dati da parte di file .php presenti sul sito
Risposte
1
Visite
3K
Web Server
dastur67
D
A
Visualizzazione due tabelle
Risposte
1
Visite
1K
PHP
Giffissimo
G
F
Problemi visualizzazione mappa Android studio
Risposte
0
Visite
2K
Sviluppo app per Android
Francesco75
F
M
Visualizzazione a video risultati query php
Risposte
0
Visite
519
PHP
Mollichina
M
M
Errore visualizzazione meta tag title e description
Risposte
1
Visite
1K
SEO e Posizionamento
enzo78
E
D
Visualizzazione pagina basata sul valore di un campo del database
Risposte
2
Visite
1K
PHP
bubino8
bubino8
F
Visualizzazione motore di ricerca
Risposte
2
Visite
1K
SEO e Posizionamento
francescomi
F
T
cms con visualizzazione mind map
Risposte
0
Visite
936
CMS (Content Management System)
test.0.zero
T
B
margini e padding nella visualizzazione mobile
Risposte
6
Visite
2K
HTML e CSS
Max 1
Max 1
A
Errore visualizzazione selezione testo
Risposte
0
Visite
1K
Photoshop
Ale89
A
R
Visualizzazione barra superiore
Risposte
0
Visite
2K
Google Search Console
Riccardo Contu
R
Beppe2
Visualizzazione sottotitoli video
Risposte
2
Visite
2K
HTML e CSS
MarcoGrazia
MarcoGrazia
F
Problemi di visualizzazione di un sito su più browser
Risposte
0
Visite
3K
WordPress
Francesco#66
F
S
Problemi di visualizzazione form contatti sito web
Risposte
2
Visite
1K
HTML e CSS
Simone Menegoni
S
L
risolto visualizzazione e ordinamento dati
Risposte
1
Visite
1K
PHP
luigithen
L
Y
Problema visualizzazione PDF generato da fpdf
Risposte
1
Visite
1K
PHP
Yaryz
Y
gandalf1959
Youtube e possibilità di visualizzazione delle playlist
Risposte
0
Visite
1K
HTML e CSS
gandalf1959
gandalf1959
P
Cambiare visualizzazione con JS
Risposte
1
Visite
580
Javascript
Max 1
Max 1
L
Mancata visualizzazione di icone su button
Risposte
0
Visite
2K
PHP
Luca Ambrosini
L
F
[PHP] Visualizzazione video
Risposte
3
Visite
1K
PHP
macus_adi
macus_adi
Alto Basso