Il titolo non è molto azzeccato ma non sapevo come descrivere il mio problema con altre parole
. Dunque io ho creato un DIV che centra la pagina e ci ho messo uno sfondo. Sopra a quest'ultimo ho messo due div: la sidebar e i contenuti. Su IE si vede tutto bene ma su firefox non si vede il background del div contenitore che centra. Il mio codice è:
codice:
body {
margin: 0 auto;
padding: 0px;
text-align: center;
background-color: #405a00;
background-image:url(img/back-body.jpg);
}
/*Paragrafo e titoli*/
#box-contenuti p {
background-color: trasparent;
font-family: Georgia;
color: #182400;
padding-left: 6px;
padding-right: 6px;
margin: 0 auto;
size: 9px;
}
#foot p {
background-color: trasparent;
font-family: Georgia;
color: #182400;
padding-left: 213px;
padding-right: 16px;
margin: 0 auto;
size: 9px;
}
a:link {
background-color: trasparent;
font-family: Georgia;
color: #182400;
margin: 0 auto;
size: 9px;
text-decoration: none;
}
a:hover {
background-color: trasparent;
font-family: Georgia;
color: #507900;
margin: 0 auto;
size: 9px;
text-decoration: none;
}
a:visited {
background-color: trasparent;
font-family: Georgia;
color: #182400;
margin: 0 auto;
size: 9px;
text-decoration: none;
}
p {
background-color: trasparent;
font-family: Georgia;
color: #182400;
padding: 6px;
margin: 0 auto;
size: 9px;
line-height: 13px;
white-space: 0PX;
}
h1 {
background-color: trasparent;
color: #4d000d;
font-weight:normal;
font-family: Georgia;
size: 66px;
margin: 0 auto;
border: 0px;
padding-left: 223px;
padding-top: 27px;
padding-bottom: 0px;
padding-right: 0px;
}
h2 {
background-color: trasparent;
color: #2b4100;
font-weight: normal;
font-family: Georgia;
size: 48px;
padding: 6px;
}
h3 {
background-color: trasparent;
color: #2b4100;
font-weight: normal;
font-family: Georgia;
size: 36px;
padding: 6px;
}
/*div e box*/
#box {
background-image:url(img/head-back.png);
background-color: trasparent;
background-repeat: repeat-x;
text-align: center;
margin: 0 auto;
padding: 0px;
border:0px;
}
#container {
border: 0px;
padding: 0px;
margin: 0 auto;
background-color: trasparent;
width: 770px;
text-align:left;
}
#header {
border: 0px;
margin: 0 auto;
padding: 0px;
background-color: trasparent;
background-image:url(img/head-back-box.png);
height: 128px;
}
#box-contenuti {
border: 0px;
margin: 0 auto;
padding: 0px;
background-color: trasparent;
background-image: url(img/back-contenuti.png);
background-repeat: repeat-y;
width: 770px;
text-align:center;
}
#container-foot {
border: 0px;
margin: 0 auto;
padding: 0px;
background-color: trasparent;
width: 770px;
text-align:center;
height: 66px;
}
#sidebar {
margin: 0 auto;
padding: 0px;
float: left;
width: 207px;
text-align:left;
height: 100%;
}
#contenuti {
margin: 0 auto;
padding: 0px;
float: right;
width: 563px;
text-align: left;
height: 100%;
}
#foot {
width: 770px;
margin: 0 auto;
padding: 0px;
clear: right;
background-color: trasparent;
background-image:url(img/footer.png);
background-repeat:no-repeat;
text-align: left;
}
e questo è l'HTML
codice:
<html>
<head>
<title>V2412R</title>
<link rel="stylesheet" href="v2412r.css" type="text/css" />
</head>
<body>
<div id="box">
<div id="container">
<div id="header">
<h1>Tiro con l'arco</h1>
</div>
<div id="box-contenuti">
<div id="sidebar">
Qui sidebar</p>
</p>
</p>
</div>
<div id="contenuti">
<h3>Qui titolo H2</h3>
Qui testo normale</p>
</p>
</div>
</div>
</div>
<div id="foot">
<p align="center">By Darkubec</p>
</div>
</div>
</body>
</html>
Chi mi può aiutare? Ho sbagliato qualcosa? Grazie anticipate per l'aiuto