Dimensionamento em: Mozilla OK, Explorer DISASTRO

[__Yrbag83__]

Tutte le pagine del sito in questione sono dimensionate in em, se guardo le pagine su mozilla si vede tutto perfettamente, su explorer invece un disastro: caratteri rimpiccioliti, box di dimensioni senza senso e sovrapposti fra loro...insomma un disastro.

Ora io non vorrei rifare da capo tutto il layout (anche xchè x lunedì devo presentare le prime pagine...) vi viene in mente qualcosa?

Posto di seguito il css:

html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
}

body {
background-color: #fff;
color: #444;
font-size: 84%;
font-family: Verdana;
text-align: center;
}

a {
color: #000000;
text-decoration: underline;
}

a:hover {
color: #000000;
text-decoration: underline;
font-style: italic;
}

h1 { /* x la presentazione in prima pagina o titoli importanti nel body */
font-size: 22px;
font-family: Verdana;
color: #000099;
margin: 0;
padding-bottom: 8px;
font-weight: normal;
}

h2 { /* x i titoli nel body */
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
font-family: Verdana;
color: #556379;
padding: 0;
margin: 0;
list-style: none;
}

h3 {
font-size: 0.9em;
font-family: Verdana;
margin: 0;
padding-bottom: 8px;
}

h4 {
font-size: 0.8em;
font-family: Verdana;
color: #8CA1AA;
text-transform: uppercase;
margin: 0;
padding-bottom: 8px;
}

p {
margin: 0;
padding-bottom: 8px;
color: #000000;
line-height: 150%;
}

hr {
clear: both;
height: 1px;
border-top: solid 1px #AACCD5;
}

img {
border: none;
}



#wrapper { /* contenitore prncipale: head, body, menu, footer */
position: relative;
margin: 0 auto;
width: 68em;
text-align: left;
height: 100%;
}

#head { /* contenitore della testa: logo, slogan, toplinks */

background-color: #F0F8FA;
height: 9em;
color: #606d82;
border-bottom: 1px solid #fff;

}

#head div {
float: left;
clear: right;
height: 9em;
}

#logo {
width: 16em;
overflow: hidden;
}

#logo a {
position: relative;
left: 0.4em;
display: block;
padding: 0 0 0 0;
font-size: 18px;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none;
}

#slogan {
width: 45em;
border-left: 3px solid #FFFFFF;
}

#slogan span {
display: block;
padding: 0.7em 0 0 0.63em;
font-size: 40px;
letter-spacing: -2px;
color: #000099;
}

#toplinks {
position: relative;
right: 0;
top: 3.5em;
width: 5em;
heigth: 2em;
}

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

#toplinks li {
float: left;
display: inline;
margin-top: 4.3em;
}

#toplinks a {
display: block;
width: 1.5em;
height: 0.8em;
}

#toplinks span {
display: none;
}

#tl_home { /* bottone dei toplinks */
background-image: url(tl_home.gif);
background-repeat: no-repeat;
}

#tl_contact { /* bottone dei toplinks */
background-image: url(tl_contact.gif);
background-repeat: no-repeat;
}

#tl_sitemap { /* bottone dei toplinks */
background-image: url(tl_sitemap.gif);
background-repeat: no-repeat;
}

#tl_home a:hover {
background-image: url(tl_home-on.gif);
background-repeat: no-repeat;
}

#tl_contact a:hover {
background-image: url(tl_contact-on.gif);
background-repeat: no-repeat;
}

#tl_sitemap a:hover {
background-image: url(tl_sitemap-on.gif);
background-repeat: no-repeat;
}

#body_all { /* corpo x tutte le pagine, */
position: relative;
left: 16em;
padding-bottom: 2em;
padding-left: 2em;
float: left;
padding-top: 2em;
width: 50em;
clear: both;
height: 32em;
overflow: scroll;
background-image: url(sfondo03.gif);
background-repeat: no-repeat;
background-position: 0.9em 7em;
}

#content { /* testo all'interno del body */
float: left;
padding-right: 1em;
width: 47em;


}

#side { /* contenitore del menu */
float: left;
position: absolute;
top: 9em;
left: 0;
padding-bottom: 1em;
border-top: 3px solid #fff;
width: 16em;
background-color: #EAF4F6;
height: 34em;
}

#menu {

padding: 0;
margin: 0;
}

#menu a {
text-decoration: none;
display:block;
color: #556379;
}

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

#menu li {
margin: 0;
padding: 0;
font-size: 11px;
font-family: Verdana;
}

#menu ul li h2 {
margin-top: 0.61em;
padding: 0 0.23em 0 2.5em;
height: 1.9em;
line-height: 1.9em;
font-weight: bold;
text-transform: uppercase;
border-top: 1px solid #AACCD5;
border-bottom: 1px solid #AACCD5;
background-image: url(li1a.gif);
background-position: 1em 0.45em;
background-repeat: no-repeat;
}

#menu ul li a {
margin-top: 0.61em;
padding: 0 0.23em 0 2.5em;
height: 1.9em;
line-height: 1.9em;
font-weight: bold;
text-transform: uppercase;
border-top: 1px solid #AACCD5;
border-bottom: 1px solid #AACCD5;
background-image: url(li1a.gif);
background-position: 1em 0.45em;
background-repeat: no-repeat;
}

#menu ul li a:hover {
font-style: italic;
}

#menu ul li ul li a {
margin-top: 0;
height:1.7em;
line-height: 1.7em;
font-weight:normal;
text-transform: none;
background-image: url(li2.gif);
background-color: #DEECF0 ;
background-position: 1em 0.45em;
background-repeat: no-repeat;
border-top: 1px solid #EEF5F7;
border-bottom: 1px none #EEF5F7;
}


#menu ul li ul li a:hover {
font-style: italic;
}


#anpec { /* x il logo anpec */
overflow: hidden;
position: relative;
top: 1em;
left: 1em;
height: 6em;
}

#foot { /* footer */
clear: both;
padding: 1em;
background-color: #C2DCE3;
font-size: 12px;
line-height: 1.4em;
text-align: center;
position: absolute;
top: 48.7em;
width: 74em;
height: 2.2em;
}

#foot a {
color: #444;
}

[__Yrbag83__]

Posto anche l'html: (aiutatemi che sono disperato...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Pedagogia Clinica - Chi siamo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body>
<div id="wrapper">
<div id="head">
<div id="logo">
[img]logoprogetto.jpg[/img]
</div><div id="slogan">
<span>Studio di Pedagogia Clinica</span>
</div>

<div id="toplinks">
<ul>
<li id="tl_home">
<span>Home</span>
<li id="tl_contact">
<span>Contatti</span>
<li id="tl_sitemap">
<span>Site map</span>

[/list]
</div>
</div><div id="body_all">
<div id="content">
<h1>Chi siamo</h1>



Lo Studio di Pedagogia Clinica, situato a Cremona in Corso Vittorio Emanuele II&deg; n.24, nasce dall'esperienza e dalla collaborazione di due pedagogisti clinici:
la Dott.ssa Alessia Galli e la Dott.ssa Cristina Ubaldini, con l'intento di rispondere al vasto panorama dei bisogni della persona di ogni et&agrave;,
della coppia o del gruppo, per favorirne un'equilibrata evoluzione socio-relazionale e psico-affettiva.



L'intervento di aiuto da noi offerto &egrave; volto a far fronte a difficolt&agrave
e disagi che rendono particolarmente difficile o impediscono a un soggetto il normale dispiegarsi della sua personalit&agrave;.



Lo Studio di Pedagogia Clinica, all'interno del Progetto Il Giardino Incantato,
offre inoltre laboratori, percorsi formativi, gruppi di crescita, sostegno genitoriale e altro ancora, iniziative indirizzate
in particolar modo a Scuole di ogni ordine e grado, Enti pubblici e privati, Associazioni, Comuni, Parrocchie,
Centri Diurni... che operino in campo educativo/formativo e di prevenzione del disagio.
</p>
</div>

</div><div id="side">
<div id="menu">
<ul>
[*]
CHI SIAMO
<ul>
[*]
Alessia Galli
[*]
Cristina Ubaldini

[/list]
[*]
<h2>LA PEDAGOGIA CLINICA</h2>
<ul>
[*]
Il pedagogista clinico
[*]
Le radici
[*]
Metodi e strategie di intervento

[/list]
[*]
<h2>INTERVENTI DI AIUTO</h2>
<ul>
[*]
Per bambini e adolescenti
[*]
Per adulti
[*]
Per coppie e gruppi
[*]
Per enti e scuole

[/list]
[*]
<h2>PROGRAMMA INIZIATIVE</h2>
<ul>
[*]
Laboratori esperenziali
[*]
Percorsi formativi
[*]
Consulenza
[*]
Screening

[/list]

[/list]
</div>
<div id="anpec">[img]anpeclogo.gif[/img]</img></div>
</div><div id="foot">Studio di Pedagogia Clinica - Corso Vittorio Emanuele II, n. 24 - 26100 Cremona
Dott.ssa Alessia Galli 333-5026417 galli.alessia@libero.it - Dott.ssa Cristina Ubaldini 338-7646666 ubaldini2002@interfree.it
</div>
</div>
</body>
</html>

[malthar]

ciao,questo, se non sbaglio è il mio primo post, io ho avuto un problema simile al tuo ma con le larghezze espresse in % dei div, io ho risolto facendo 2 fogli stile e inserendo nelle pagine html un javascript che mi riconosce il browser di chi si collega e seleziona il foglio stile giusto!!

[SangueMisto]

Se devo essere sincero con ie7 fatta eccezione del foot sballato...ma che cmq si puo'sistemare....(se ce l'ho fatta io ) non vedo nessun problema....

Anche con ie 5.5 non ci sono grandi catastrofi...

I problemi li noto con opera 8.54..ma cmq cose di poco conto...

Anzi è l'unico browser dove siano attive le barre di scorrimento...
ps: ma a che servono ?

Magari sono cecato io...

[__Yrbag83__]

Originariamente inviato da malthar
ciao,questo, se non sbaglio è il mio primo post, io ho avuto un problema simile al tuo ma con le larghezze espresse in % dei div, io ho risolto facendo 2 fogli stile e inserendo nelle pagine html un javascript che mi riconosce il browser di chi si collega e seleziona il foglio stile giusto!!

Speravo di riuscire a farlo con un solo foglio di stile, cmq se non riuscissi la tengo come soluzione estrema

Se devo essere sincero con ie7 fatta eccezione del foot sballato...ma che cmq si puo'sistemare....(se ce l'ho fatta io ) non vedo nessun problema....

Anche con ie 5.5 non ci sono grandi catastrofi...

I problemi li noto con opera 8.54..ma cmq cose di poco conto...

Anzi è l'unico browser dove siano attive le barre di scorrimento...
ps: ma a che servono ?

Magari sono cecato io...

Mentre scrivo il messaggio ho "risolto" il problema...era dovuto al fatto che il notebook su cui stavo provando aveva settato ie in modo da visualizzare subito "carattere molto piccolo" così si accavallava tutto...va beh....lasciamo perdere.

Cmq le barre di scorrimento restano inattive finchè il testo non raggiunge lunghezze considerevoli dopodiche si attivano

Grazie mille a tutti!
Sono passato dalla disperazione alla felicità totale

[andrea.paiola]

per servire a IE regole CSS differenti consiglio commenti condizionali

[Mich_]

Stando ai vari consigli apparsi in queste pagine, sembra che IE6 si comproti molto meglio se gli si serve all'inizio:

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%; /* a seconda dei casi */
  width: 100%;   /* a seconda dei casi */
  font-size: 100%; /* qui non conviene usare em, ma % */
}

[__Yrbag83__]

Ok grazie a tutti!

Mi resta solo il problema del footer, che su Opera si sovrappone al testo e cmq in generale non funziona bene: x esempio mettendo font-size: 100% tutto si ridimensiona ma non il footer!

Come posso risolvere?