ciao, voglio ottenere una pagina che si ridimensioni automaticamente a seconda della risoluzione che si adotti, su IE è ok ma su firefox il bottom che dovrebbe essere come il top, invece prende il colore del container. mi sapete dire il perchè??
posto css e pagina.
css:
Codice PHP:
html,body{
margin: 0;
padding: 0;
height: 100%;
background-color:#FFFF00
}
div#container{
width:900px;
background-color:#ffffff;
font:Geneva, Arial, Helvetica, sans-serif;
height:100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding:0px;
}
div#top{
background-color:#000000;
width:100%;
height:20%;
margin:auto;
}
div#center{
float:left;
background-color:#ffffff;
width:100%;
height:60%;
}
div#bottom{
background-color:#000000;
width:100%;
height:20%;
margin:auto;
}
/* APERTURA STRUTTURA DEL CENTER */
div#testata{
float:left;
background-color:#FF0000;
width:100%;
height:15%;
}
div#corpo{
float:left;
background-color:#0000FF;
width:100%;
height:70%;
}
div#footer{
float:left;
background-color:#FF0000;
width:100%;
height:15%;
}
/* CHIUSURA STRUTTURA DEL CENTER */
pagina.php
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SITO.it</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top">TOP</div>
<div id="center">
<div id="testata">TESTATA della pagina</div>
<div id="corpo">CORPO della pagina</div>
<div id="footer">FOOTER della pagina</div>
</div>
<div id="bottom">BOTTOM</div>
</div>
</body>
</html>