IE e pagina ricaricata

[alfred444]

ho un problema con IE8. altre versioni non posso provarle.

ho la seguente pagina:

http://www.***.org/formask2.php

in IE la visualizzo correttamente come in altri browser, ma quando eseguo l'invio del form, in IE i CSS impazziscono, mi spostano il div container a sinistra e fanno altri danni, mentre in altri browser (FF, chrome, opera) tutto si ripresenta come alla prima visualizzazione.


fate pure un invio di prova.. vale più di mille parole..

dove sta la magagna? grazie

[alfred444]

per comodità vi metto codice

html

<div class="container">
<form id="contactform" class="rounded" onsubmit="if((checkrequired(this)==false)||(checkE mail()==false)){ return false;}" action="<? echo $_SERVER['PHP_SELF']; ?>"
method="post" enctype="multipart/form-data" >

<div style="font-decoration:underline;margin: 0 0 -2em 3em;">
&lt;&lt; Torna alla Homepage
</div>




<h3>Chiedi al bibliotecario!</h3>
<div style="margin-top:-10px;margin-bottom:20px;font-size:12px;">(Ask a Librarian!)</div>


<div class="field">
<label for="domanda">Cosa vuoi sapere?*
(max 500 caratteri):</label>
<textarea name="requireddomanda" value="500" rows="2" cols="15" id="domanda" class="input textarea" onkeyup="contatore(this.form)"></textarea>
<p class="hint">Inserire la domanda</p>
</div>



<div class="field">
<label for="fonti" style="font-weight:normal;">Quali fonti hai già consultato?
(max 500 caratteri)</label>
<textarea name="fonti" value="500" rows="3" cols="20" id="fonti" class="input textarea" onkeyup="contatore(this.form)"></textarea>
<p class="hint">Inserire la fonti già consultate</p>
</div>

<fieldset>

<legend style="font-weight:normal; font-family: Arial, Verdana;
/* text-shadow: 2px 2px 2px #ccc; */ ombra testo
display: block;
float: left;
margin-right:10px;
text-align: right;
width: 170px;
line-height: 18px;
font-size: 15px;
text-decoration:underline;">Tipo di ricerca:</legend>




<div class="field" style="margin-top:10px;">
<input type="radio" name="tiporicerca" id="radiocur" value="curiosita" checked="checked" class="input1"/>
<label for="radiocur" style="font-weight:normal;">Curiosità</label>

</div>


<div class="field">
<input type="radio" name="tiporicerca" id="radioprim" value="scuola_primaria" class="input1"/>
<label for="radioprim" style="font-weight:normal;">Scuola primaria
</label>

</div>

<div class="field">
<input type="radio" name="tiporicerca" id="radiosecinf" value="scuola_secondaria_inferiore" class="input1"/>
<label for="radiosecinf" style="font-weight:normal;">Scuola sec. inferiore
</label>

</div>

<div class="field">
<input type="radio" name="tiporicerca" id="radiosecsup" value="scuola_secondaria_superiore" class="input1"/>
<label for="radiosecsup" style="font-weight:normal;">Scuola sec. superiore
</label>

</div>

<div class="field">
<input type="radio" name="tiporicerca" id="radiouni" value="universita" class="input1"/>
<label for="radiouni" style="font-weight:normal;">Università
</label>

</div>

</fieldset>

<div class="field" style="margin-top:20px;">
<label for="nome" >Nome e Cognome:*</label>
<input type="text" name="requirednome" size="30" class="input" id="nome"/>
<p class="hint">Inserire Nome e Cognome</p>
</div>


<div class="field">
<label for="mail">Email per ricevere risposta:*</label>
<input class="input" type="text" name="requiredda" size="30" id="mail"/>
<p class="hint">Inserire il proprio indirizzo email</p>
</div>



<div style="font-weight:normal; font-family: Arial, Verdana;
/* text-shadow: 2px 2px 2px #ccc; */ ombra testo
display: inline-block;
float: left;
margin-right:10px;
text-align: right;
width: 170px;
line-height: 18px;
font-size: 15px;
font-weight: bold; margin: 0.5em 0 0.5em 3em;font-style:italic">* campi obbligatori</div>

<input type="submit" name="submit" value="Invia messaggio" class="button" style="margin: 0 0 0 3em;"/>


</form>


</div>


css



* { margin: 0; padding: 0; }
body {font-family: Verdana, Arial; font-size: 0.8em; line-height: 18px;color:#416271; }
a { text-decoration: none; }
.container{margin: auto; margin-top:50px;width: auto; background: #fff;}
h3 { margin-bottom: 15px; font-size: 22px; text-shadow: 2px 2px 2px #ccc; }

#contactform {

width: 500px;
padding: 20px;
background: #F5EFEE;
overflow:auto;
margin:auto;

border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;

}

.field{margin-bottom:7px;}

label {
font-family: Arial, Verdana;
/* text-shadow: 2px 2px 2px #ccc; */ ombra testo
display: inline-block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 170px;
line-height: 18px;
font-size: 15px;
}

.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #000000;
}

.input:focus{
background-color:#E7E8E7;
}

.textarea {
/* height:150px; */
}

.hint{
display:none;
}

.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.6);

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

.button{
float: right;
margin:10px 55px 10px 0;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
cursorointer;
color: #fff;

text-align: center;
text-shadow: 0 -1px 1px #297B19;

/* Background gradient */
background: #419419;
background: -moz-linear-gradient(top, #419419 0%, #69CD19 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#419419), to(#69CD19));

/* Border style */
border: 1px solid #419419;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

/* Box shadow */
-moz-box-shadow: inset 0 1px 0 0 #419419;
-webkit-box-shadow: inset 0 1px 0 0 #419419;
box-shadow: inset 0 1px 0 0 #419419;

}

.button:hover {
background: #54D045;
cursor: pointer;
}




grazie