Salve e tutti.. vi scrivo perché ho un problema di visualizzazione del sito che sto facendo per un'azienda. Ho usato i css per il foglio di stile e xhtml per la pagina. entrambi i codici mi sono stati validati dalle utility del w3c.
in allegato ho messo l'immagine di visualizazione dei 2 browser internet explorer 7 e firefox 2 della pagina incriminata.
qui di sotto trovate i codici css e xhtml delle pagine.
se qualcuno avesse un'idea di consiglio mi farebbe un grosso piacere! Grazie mille
CSS:
/**************************
SEZIONE TAG STANDARD
**************************/
body {
margin:0 0 0 0;
padding:0 0 0 0;
background-color:rgb(255,255,255);
border:solid 3px #3E84AE;
font-family:verdana,arial,sans-serif;
width:99.4%;
}
/***********************************************
SEZIONE CLASSI PER I DIV DI LAYOUT PAGINA
***********************************************/
.content {
height:100%;
margin:0 0 0 0;
padding:0 0 0 0;
width:100%;
}
.headercontent {
height:115px;
width:100%;
}
.headerborder {
background:url(images/topangle.gif) no-repeat #3E84AE;
background-position:bottom right;
height:115px;
float:left;
width:63%;
}
.headerlogo {
background:url(images/hsc.bmp) no-repeat;
background-position:top right;
float:right;
height:115px;
width:390px;
}
.topcontent {
height:30px;
width:100%;
}
.topmenu {
background: #3E84AE;
height:30px;
width:51%;
}
.topmenuborder {
height:30px;
width:47%;
}
.nav {border:none; float:right;}
.nav ul {list-style-type:none;}
.nav ul li {float:left; position:relative; z-index:1000; border-right:solid 1px #AFAFAF;}
.nav ul li ul {display:none; border:none; margin-left:-30px; padding:0 30px 30px 30px;}
.nav ul li a {display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:#646464;}
.nav ul li:hover {width:auto;}
.nav ul li:hover a {background-color:#D2D2D2; text-decoration:none;}
.nav ul li:hover ul {display:block; position:absolute; z-index:998; left:0px;}
.nav ul li:hover ul li ul {display:none;}
.nav ul li:hover ul li a {display:block; width:10em; height:auto; border-left:solid 1px #AFAFAF; border-bottom: solid 1px #AFAFAF; background-color:#EDEDED; font-weight:normal; color:#323232;}
.nav ul li:hover ul li a:hover {background-color:#D2D2D2; text-decoration:none;}
.angleborder {
background:url(images/lefttopangle.gif) no-repeat;
background-position:top left;
border-left:16px solid #3E84AE;
height:50px;
width:60px;
}
.leftcontent {
float:left;
margin:0 0 0 0;
padding:0 0 0 0;
width:116px;
}
.left {
border-left:16px solid #3E84AE;
float:left;
margin:0 0 0 0;
padding:0 0 0 5px;
width:100px;
}
.leftbottom {
background:url(images/leftbottomangle.gif) no-repeat;
background-position:top left;
clear:left;
height:30px;
margin:0 0 0 0;
position:relative;
padding:0 0 0 0;
width:16px;
}
.page {
float:left;
margin:0 0 0 0;
width:80%;
}
.right {
float:right;
margin:0 0 0 0;
width:100px;
}
.footer {
background:url(images/footerangle.gif) no-repeat #3E84AE;
background-position:top left;
clear:both;
color:white;
font-size:70%;
left:18%;
height:14px;
padding:1px;
position: relative;
width:81.8%;
}
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagina 1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="content">
<div class="headercontent">
<div class="headerborder">
</div>
<div class="headerlogo">
</div>
</div>
<div class="topcontent">
<div class="topmenu">
<div class="nav">
<ul>[*]Azienda
<ul>[*]Header-1[*]Header-2[/list]
[/list]
<ul>[*]Prodotti
<ul>[*]Layout-1[*]Layout-2[/list]
[/list]
<ul>[*]Soluzioni
<ul>[*]Header-1[*]Header-2[/list]
[/list]
<ul>[*]Soluzioni
<ul>[*]Header-1[*]Header-2[/list]
[/list]
<ul>[*]Servizi
<ul>[*]Header-1[*]Header-2[/list]
[/list]
</div>
</div>
<div class="topmenuborder">
</div>
</div>
<div class="angleborder">
</div>
<div class="leftcontent">
<div class="left">
left
</p>
</p>
</p>
</p>
</p>
<hr width="80%" align="left" />
</p>
</div>
<div class="leftbottom">
</div>
</div>
<div class="page">
page
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
<hr width="80%" align="left" />
</p>
</div>
<div class="right">
right
</p>
</p>
</p>
</p>
</p>
<hr width="80%" align="left" />
</p>
</div>
<div class="footer" align="right">
</div>
</div>
</body>
</html>