Buongiorno a tutti, sono nuovamente io. Questa volta scrivo perché ho trovato la soluzione da solo, e credo potrebbe servire ad altre persone. Quello che ho fatto non so spiegarlo, da un punto di vista tecnico credo non sia corretto, ma non viene segnalato dal W3C come errore. Posto di seguito i codici con la seguente precisazione:
La pagina i-materiali.php è uguale per tutti i browser, la differenza è nel CSS, più precisamente l'ID
#spaziatore esiste solamente nel CSS dedicato a Internet Explorer e Opera.
PORZIONE HTML
</head>
<body>
<div id="pagina">
<div id="contenuti">
<div id="header"><a href="index.php" id="titolo"></a></div>
<div id="materiale">
<div class="materiale-sx"><div class="dettagli">
<img src="_img/i-materiali/1.jpg" alt="parquet" />
<h1> PARQUET </h1>
<p>testo</p>
</div></div>
<div class="materiale-dx"></div>
<div class="materiale-sx"></div>
<div class="materiale-dx"></div>
<div class="materiale-sx"></div>
<div class="materiale-dx"></div>
<div id="spaziatore"><br /></div>
</div>
<a href="lo-stabile.php" id="tasto1"><br/>LO STABILE</a>
<a href="i-materiali.php" id="tasto2"><br/>I MATERIALI</a>
<a href="unita-abitative.php" id="tasto3"><br/>UNITA' ABITATIVE</a>
<a href="dove-siamo.php" id="tasto4"><br/>DOVE SIAMO</a>
<a href="contatti.php" id="tasto5"><br/>CONTATTI</a>
</div>
</div>
</body>
</html>
PORZIONE CSS (dello stile dedicato a INTERNET EXPLORER e OPERA)
/*---------------------------------------- Materiali ----------------------------------------*/
#materiale {
width: 876px;
height: 536px;
background:
#f4f3f0;
border: solid 2px
#000;
overflow: auto;
/*--- ANGOLI ARROTONDATI ---*/
text-align: center;
padding: 10px 10px 10px 10px;
border-radius: 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
behavior: url(ie-css3.htc);
/*--- OMBRA ESTERNA ---*/
-webkit-box-shadow: 10px 10px 5px;
-moz-box-shadow: 10px 10px 5px;
box-shadow: 10px 10px 15px;
}
{
width: 876px;
heiht: 40px;
float: right;
}
.materiale-sx {
width: 400px;
height: 200px;
border: solid 1px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
float: left;
/*--- SFONDO SFUMATO ---*/
linear-gradient(top,
#666 0%,
#999 100%);
background-image: -o-linear-gradient(top, 0%, 100%);
background-image: -moz-linear-gradient(top, 0%, 100%);
background-image: -webkit-linear-gradient(top, 0%, 100%);
background-image: -ms-linear-gradient(top, 0%, 100%);
/*--- SFONDO SFUMATO I.E. ---*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#666666', endColorstr='#999999');
//per ie 5.5 e successivi
filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
//per ie 8
-ms-filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
/*--- ANGOLI ARROTONDATI ---*/
text-align: center;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
behavior: url(ie-css3.htc);
/*--- OMBRA ESTERNA ---*/
-webkit-box-shadow: 5px 5px 5px;
-moz-box-shadow: 5px 5px 5px;
box-shadow: 5px 5px 10px;
}
.materiale-dx {
width: 400px;
height: 200px;
border: solid 1px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
float: right;
/*--- SFONDO SFUMATO ---*/
linear-gradient(top, 0%, 100%);
background-image: -o-linear-gradient(top, 0%, 100%);
background-image: -moz-linear-gradient(top, 0%, 100%);
background-image: -webkit-linear-gradient(top, 0%, 100%);
background-image: -ms-linear-gradient(top, 0%, 100%);
/*--- SFONDO SFUMATO I.E. ---*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#666666', endColorstr='#999999');
//per ie 5.5 e successivi
filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
//per ie 8
-ms-filter: progid:DXImageTransform.Microsoft.filtername(GradientType=0, startColorstr='#666666', endColorstr='#999999');
/*--- ANGOLI ARROTONDATI ---*/
text-align: center;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
behavior: url(ie-css3.htc);
/*--- OMBRA ESTERNA ---*/
-webkit-box-shadow: 5px 5px 5px;
-moz-box-shadow: 5px 5px 5px;
box-shadow: 5px 5px 10px;
}
div.dettagli {
width: 400px;
height: 200px;
text-align: left;
}
div.dettagli h1, div.dettagli p {
color:
#FFF;
line-height: 1.2em;
text-align: justify;
margin: 0 0 0 7px;
padding: 0;
}
div.dettagli h1 {
font-weight: bold;
}
div.dettagli img {
width: 126px;
height: 126px;
float: left;
margin: 7px;
}