Salve a tutti!
Volevo chiedere consiglio circa un problema che mi è sorto poco fa. Ho costruito un layout interamente in css, posizionando i vari div tramite float e margini, il tutto con Dreamweaver CS4. Visualizzando il tutto con IE8, la pagina si vede magnificamente, persino il W3C Validator mi ha dato per buoni i codici...
Il problema è che con le precedenti versioni di IE, con Firefox e Opera, è un disastro totale. Ho pensato quindi che possa essere sorto qualche problema di compatibilità nel css, ma non riesco a risolverlo.
Questo è uno screen di come deve risultare la pagina, le scritte sono posizionate nei 4 punti cerchiati in cui vorrei che vi fossero dei div:
http://img3.imageshack.us/img3/5700/screenxqs.jpg
La struttura html è la seguente:
Infine il Css:<div class="box">
<div class="menu">Qui ci va il menu.</div>
<div class="contenuti">Qui ci va l'include!</div>
<div class="shoutbox">Qui ci va la shoutbox.</div>
<div class="partners">Qui ci vanno gli affiliati.</div>
</div>
@charset "utf-8";
body {
background-attachment: scroll;
background-image: url(pattern.jpg);
background-repeat: repeat;
margin: 0px;
height: 100%;
}
.box {
position:absolute;
top:50%;
left:50%;
margin:-400px 0 0 -536px;
background-image:url(box.jpg);
background-repeat:no-repeat;
height: 982px;
width: 1073px;
}
.menu {
font-family: "Trebuchet MS", Georgia, Times, serif;
font-size: 76%;
color: #999;
letter-spacing: normal;
text-align: justify;
float:left;
margin-top:582px;
margin-left:82px;
width:160px;
height:300px;
z-index:3;
}
.contenuti {
font-family: "Trebuchet MS", Georgia, Times, serif;
font-size: 76%;
color: #999;
letter-spacing: normal;
text-align: justify;
margin-top:540px;
margin-left:43px;
width:548px;
height:360px;
z-index:1;
float:left;
}
.shoutbox {
height: 350px;
width: 210px;
margin-top:555px;
margin-left:850px;
}
.partners {
height: 31px;
width: 620px;
margin-top:28px;
margin-left:285px;
z-index:0;
}
Rispondi quotando
