Far visualizzare bene con IE?

**harleybobba** · 13-12-2010, 14:35

Ho creato un website che con chrome si vede benissimo, però con IE si vede male.. Questo è il sito: http://habbinto.altervista.org/ristorante/index.php

I codici sono:

HTML:

codice:

<html> 
<head> 
<title>Ristorante Cafè Mar - Pizzeria</title> 
<link href="css.css" rel="stylesheet" type="text/css"> 
</head> 
<body>
<div class="maintop"></div>
<div class="maincenter">
<div class="banner"></div> 
 
<div style="margin-left: 145px;"> 
[img]img/sinistra.png[/img][img]img/home.png[/img][img]img/foto.png[/img][img]img/dovesiamo.png[/img][img]img/contattaci.png[/img][img]img/destra.png[/img] 
</div> 
 
 
<div style="text-align: center; overflow: auto; height: 250px; margin-top: 55px; margin-left: 65px; margin-right: 65px;"><font face="Informal Roman" size="5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</font></div>  






<center><font size="1" color="blue">Copyright 20<? echo(date("y")); ?> &copy . All rights reserved.</font></center>
</div>
<div class="mainbottom"></div>
</body> 
</html>

CSS:

codice:

body {
background-image: url(img/bg.jpg);
}
 
.banner{
background-image: url(img/banner.png);
height: 108px;
width: 896px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
 
.top{
background-image: url(img/top.png);
height: 18px;
width: 899px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
 
.center{
background-image: url(img/center.png);
height: auto;
width: 899px;
margin-left: auto;
margin-right: auto;
}
 
.bottom{
background-image: url(img/bottom.png);
height: 18px;
width: 899px;
margin-left: auto;
margin-right: auto;
}

.maintop{
background-image: url(img/maintop.png);
height: 18px;
width: 965px;
margin-left: auto;
margin-right: auto;
}
 
.maincenter{
background-image: url(img/maincenter.png);
height: auto;
width: 965px;
margin-left: auto;
margin-right: auto;
}
 
.mainbottom{
background-image: url(img/mainbottom.png);
height: 18px;
width: 965px;
margin-left: auto;
margin-right: auto;
}

Come risolvo?

**myotis** · 13-12-2010, 14:48

Ciao,

in attesa che qualcuno più esperto di me ti risponda ti posso confermare che anche con FireFox si visualizza correttamente.
Il problema a cui probabilmente fai riferimento è l'allineamento orizzontale del div principale che contiene il testo, in IE viene visualizzato non al centro ma troppo a sinistra.

E' probabilmente dovuto al fatto che i vari browser interpretano il codice HTML in modo leggermente diverso l'uno dall'altro, in particolare per quanto riguarda le dimensioni e i margini degli elementi.

Ripeto, non sono sufficientemente esperto da risolverti il problema nel migliore dei modi, ma hai provato a posizionare il div "globale" con un posizionamento assoluto anzichè usare margin-top, -bottom ecc. ?

**harleybobba** · 13-12-2010, 15:11

mm no, pensavo di specificare il margine sinistro invece di usare "auto", almeno anche IE suppongo lo posizionerà correttamente

**Mich_** · 13-12-2010, 16:20

IE interpreta in modo retrocompatibile (quirks mode) se non si definisce la DTD o se la DTD e` di tipo transitional.
Ma IE dal 6 in poi si sta adeguando allo standard se si usa una DTD Strict.

Esempi di stringhe corrette per definire la DTD si trovano (ad esempio) in http://www.w3schools.com/tags/tag_doctype.asp

**harleybobba** · 13-12-2010, 17:59

quindi devo questo:

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

o questo:

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

?

**Mich_** · 13-12-2010, 18:11

Esatto.
Meglio il secondo (XHTML 1.0 Strict), perche` riconosciuto bene anche da IE6.

Pero` anche il linguagiio usato (la sintassi HTML) poi deve seguire la DTD.

Per verificare la sintassi un aiuto lo psoono dare i validatori:
validatore HTML
validatore CSS

**harleybobba** · 13-12-2010, 18:17

Ok grazie col doctype si visualizza bene.. Tranne per il menu' che si vede diciamo fatto a "table", anche se la table non c'è :S Come risolvo quell' errore?

**Mich_** · 13-12-2010, 18:26

Non so cosa vuoi dire con "fatto a table".
Comunque ci sono errori di sintassi (attributi non compatibili con la DTD).

E il menu e` realizzato mediante JS, cosa che e` anti-accessibile e inutile. Con i CSS si riesce a realizzare la stessa cosa in maniere piu` veloce (nel tuo si nota un ritardo la prima volta che si passa sulle voci). Vedi ad esempio: Bottoni con rollover

Ma un menu, e` meglio se lo cerchi tra i menu pronti. Vedi tra i "link utili". A me piace il sito di CSSplay

**harleybobba** · 13-12-2010, 20:06

Ottimo grazie mille!! Risolto tutto

Discussione: Far visualizzare bene con IE?

Strumenti discussione

Ricerca discussione

Visualizza

Far visualizzare bene con IE?

Permessi di invio