Altezza pagina web diversa su Chrome e su IExplorer

**PaulStanley** · 09-02-2017, 13:31

Ciao a tutti,
non sono nuovo del forum ma ho sempre postato pochissimo...
ho appena creato la homepage di un sito nuovo, in cui c'è un box sopra ad un'immagine di sfondo, e ho impostato l'altezza del box a 637 px.

Se lo visualizzo su Chrome viene perfetto, su Internet Explorer invece è tutto visualizzato più piccolo e il box arriva fino a circa metà dello schermo, poi appare il resto dell'immagine che ho utilizzato come sfondo.

Per chiarezza allego l'html:

codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html >
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta name="Keywords" content="#" />
      <meta name="Description" content="#" />
      <link href="stile_La_Spina.css" rel="stylesheet" type="text/css" />
      <title>xxxxxxxxxxxx</title>
   </head>
   <body class=sfondo_home>
      <div id=box>
         <div id=menu>
            <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="chi_sono.html">Chi Sono</a></li>
               <li><a href="cosa_faccio.html">Cosa Faccio</a></li>
               <li><a href="dove_sono.html">Dove Sono</a></li>
               <li><a href="contatti.html">Contatti</a></li>
            </ul>
         </div>
         <div id=splash>
            xxxxxxxxx
         </div>
         <div id=minisplash>
            xxxxxxxxx
         </div>
         <div id=footer>
            xxxxxx
         </div>
      </div>
   </body>
</html>

e il css:

codice:

body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	left: 0px;
	top: 0px;
	font-family: Arial;
	font-size: 14px;
}

p {
	width: 925px;
	padding-left: 10px;
	padding-right: 10px;
	float: center;
	text-align: justify;
	font-size: 12px;
	color: #40e0d0;
}

#box {
	width: 950px;
	height: 637px;
	border-left: 1px solid #40e0d0;
	border-right: 1px solid #40e0d0;
	overflow: hidden;
	position: relative;
	background-color: #293133;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

#logo {
	width: 180px;
	height: 180px;
	position: absolute;
	border: 0px;
}

#splash {
	width: 950px;
	height: 80px;
	position: absolute;
	top: 90px;
	left: 25px;
	right: 25px;
	font-family: Bernard MT Condensed, Lucida Calligraphy, Arial Black;
	font-size: 45px;
	color: #00a0e0;
	text-align: center;
	line-height: 90px;
}

#minisplash {
	width: 950px;
	height: 50px;
	position: absolute;
	top: 100px;
	left: 25px;
	right: 25px;
	font-family: Bernard MT Condensed, Lucida Calligraphy, Arial Black;
	font-size: 20px;
	color: #00a0e0;
	text-align: center;
	line-height: 180px;
}

#menu {
	position: absolute;
	top: 0px;
	left: 25px;
	right: 25px;
	float: left;
	width: 950px;
	height: 100px;
	text-align: center;
	line-height: 45px;
}

#menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#menu li {
	position: relative;
	float: left;
	width: 190px;
	text-align: center;
	list-style-type: none;
}

#content {
	width: 950px;
	height: 400px;
	position: absolute;
	top: 200px;
}

#footer {
	width: 950px;
	height: 50px;
	position: absolute;
	top: 615px;
	text-align: center;
	color: #00a0e0;
	font-size: 10px;
}

.sfondo_home {
	background-image: url(sfondo_home1.jpg);
}

.sfondo {
	background-image: url(sfondo.jpg);
}

a {
	color: #00a0e0;
	background-color: #293133;
	text-decoration: none;
}

a:hover {
	color: #40e0d0;
	background-color: #293133;
	font-weight: bold;
	text-decoration: underline;
}

Grazie a chi potrà darmi qualche suggerimento.

**KillerWorm** · 09-02-2017, 14:25

Ciao e bentornato.

[Mod]
Premessa: quando si posta del codice sul forum è opportuno utilizzare gli appositi tag di formattazione (vedi regolamento di sezione), altrimenti viene difficile seguire il filo del discorso nel post, soprattutto se c'è tanto codice come nel tuo caso. Al momento ho provveduto io. Meglio ancora, se la pagina è accessibile pubblicamente online, sarebbe più utile fornirne il link così da poter vedere il problema direttamente. Grazie per l'attenzione.

Riguardo il tuo problema non riesco a riprodurlo. Specifica eventualmente quale versione di IE stai usando.

Mi viene però il dubbio che non dipenda molto semplicemente dallo zoom del tuo browser. Prova eventualmente a verificare.
Apri IE e lancia la pagina in questione. Sul menu dovresti avere una voce "Zoom" che deve essere impostata al 100%. Nel caso, dovrebbe essere possibile impostare lo zoom da tastiera premendo Ctrl+0 per ripristinarlo al 100% oppure le combinazioni "CTRL +" e "CTRL -" che lo aumentano e diminuiscono rispettivamente.

Riguardo il codice html, trattandosi di un sito nuovo come hai indicato, ti consiglierei di usare HTML5 piuttosto che 4.01 Transitional.

Ad oggi il supporto di HTML5 è piuttosto stabile su tutti i browser pressoché moderni. Non c'è motivo di utilizzare ancora vecchie versioni di HTML se non in casi specifici.

**PaulStanley** · 09-02-2017, 15:30

Grazie per la risposta e per i suggerimenti; il sito non è ancora online, perciò non ho un link da fornire.

Uso IE versione 11, proverò a usare lo zoom, riguardo HTML5 non sono ancora abbastanza padrone delle nuove specifiche per poterlo usare, e il sito ha bisogno di essere messo online in tempi piuttosto brevi.

Grazie ancora

**SoloWiFi** · 10-02-2017, 09:12

dimensiona in ems invece che in pixel

Discussione: Altezza pagina web diversa su Chrome e su IExplorer

Strumenti discussione

Ricerca discussione

Visualizza

Altezza pagina web diversa su Chrome e su IExplorer

Permessi di invio