Salve a tutti,
sto realizzando il template di un sito basato sui CSS (http://www.sky-software.it/prova/index2.html) , ma non riesco a renderlo compatibile con firefox; mi spiego meglio: lo sfondo del menù di sinistra (che è applicato ad un container) non viene visualizzato con firefox, ma con IE sì..
Lo sfondo è applicato in questo modo:
codice:
background:url(images/site/sf-menu-sx.gif) repeat-y left top;
Il DOCTYPE è:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Riporto il codice html e il CSS per essere più chiaro possibile:
CODICE HTML
codice:
<!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</title>
<link href="layout2.css" rel="stylesheet" type="text/css" />
</head>
<div id="container">
<div id="top">
<div class="link_top">
<ul>
[*]Punto1
[/list]
</div>
</div>
<div id="menu_top">
<div class="menu_top">12 34
</div>
</div>
<div id="container2">
<div id="navBar">
menu1 </p>
menu2 </p>
menu3 </p>
menu4 </p>
menu5 </p>
menu6 </p>
</div>
<div id="top_content">
TOP_CONTENT</p>
</div>
<div id="content">
content</p>
content</p>
content</p>
content</p>
</div>
</div>
<div id="footer">
LINK1 | LINK2
FOOTER</div>
</div>
<body>
</body>
</html>
FOGLIO DI STILE
codice:
body{
font-family: Arial,sans-serif;
background-color: #FFFFFF;
color: #333333;
font-size: 14px;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
a:visited{
color: #006699;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/************* #container styles **************/
#container{
height: 100%;
width: 950px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
}
/************* #container2 styles **************/
#container2{
height: 100%;
width: 950px;
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l' allineamento*/
background:url(images/site/sf-menu-sx.gif) repeat-y left top;
}
/************* #top styles **************/
#top {
width: 950px;
height: 120px;
background-image: url(images/site/top-sky.gif);
}
/************* #link_top styles **************/
.link_top {
float:right;
width: 160px;
padding: 35px 0px 0px 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}
.link_top ul {
list-style-image: url(images/site/punto_link_top.gif);
}
.link_top li {
padding: 2px 5px 2px 0px;
}
.link_top a {
color:#333333;
}
/************* #menu_top styles **************/
#menu_top {
text-align: center;
height: 25px;
width: 950px;
background-image:url(images/site/bar-orange.gif);
vertical-align: middle;
margin: 0px;
padding: 0px;
}
.menu_top, .menu_top_sel {
float: right;
width: 770px;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 4px;
}
.menu_top a {
display:inline;
color:#FFFFFF;
padding: 1px 10px 1px 10px;
margin: 0px;
text-decoration:none;
letter-spacing: 1px;
}
.menu_top a:hover {
display:inline;
background-color: #FFFFFF;
color: #999999;
padding: 1px 10px 1px 10px;
margin: 0px;
text-decoration:none;
letter-spacing: 1px;
}
.menu_top_sel a, .menu_top_sel a:visited {
display:inline;
background-color:#FF6801;
color:#000000;
padding: 1px 10px 1px 10px;
margin: 0px;
text-decoration:none;
letter-spacing: 1px;
}
/*********** #navBar link styles ***********/
#navBar {
font: Verdana;
float: left;
width: 180px;
height: 100%;
}
/************* #top_content styles **************/
#top_content {
padding-top: 5px;
width: 720px;
height: 180px;
float: right;
text-align: center /*ripristina l' allineamento*/
}
/************* #content styles **************/
#content {
padding-top: 5px;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
width: 720px;
height: 100%;
float: right;
text-align: left; /*ripristina l' allineamento*/
}
/************* #footer styles **************/
#footer {
border-top: 1px solid #FFFFFF;
clear:both;
color: #666666;
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
padding: 10px;
}
#footer a {
color:#666666;
text-decoration: none;
}
#footer a:hover {
color:#666666;
text-decoration: underline;
}
Rispondi quotando
