Ho creato questo layout:



codice:
<!DOCTYPE html
 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Home page</title>
 <meta name="generator" content="TYPO3 4.1 CMS" />

<style type="text/css">
body {
    text-align: center;   /*centra in IE 5.x */
}
/* GENERAL fonts */
p, span, ol, ul, div, h1, h2 {
 padding: 0px 0px;
 margin: 0px 0px;
 font-family: verdana, arial;
 font-size: 12px;
 font-weight: normal;
}
hr { 
 display:none
}
/* CONTAINER */
div#container { 
 padding: 0px 0px;
 margin: 0px auto;
 border: #999 2px solid;
 width: 990px!important; /* Dimensioni per browser standard compliant */
 width/**/: 994px; /* Dimensioni per Explorer */
 text-align: left;
}
/* HEADER */
div#header_box { 
 padding: 0px 0px;
 margin: 0px 0px;
 height: 100px;
}
div#header { 
 padding: 0px 0px;
 margin: 0px 0px;
}
/* logo */
div#header_logo { 
 padding: 0px 0px;
 margin: 10px 0px 0px 30px;
 width: 190px;
 height: 90px;
 float: left;
 background-color: #0066CC;
}
/* horizontal menu */
div#menu_x { 
 padding: 0px 0px;
 margin: 10px 0px 0px 60px;
 width: 700px;
 float: right;
}
div.menu_x_level_no, div.menu_x_level_act {
 border-left: 1px #CCC solid;
 width: 139px!important; /* Dimensioni per browser standard compliant */
 width/**/: 140px; /* Dimensioni per Explorer */
 height: 40px;
 color: #666;
 font-size: 10px;
 text-transform: uppercase;
 background: url(../images/label.jpg) no-repeat 20px 40px;
 display: inline;
}
div.menu_x_level_no {
 padding: 60px 0px 8px 30px;
 margin: 0px 0px;
}
div.menu_x_level_act {
 padding: 60px 0px 16px 30px;
 margin: 0px 0px;
}
div.menu_x_level_no a, div.menu_x_level_act a, div.menu_x_level_no a:hover {
 padding: 0px 0px 3px 0px;
 margin: 0px 0px;
 height: 17px!important; /* Dimensioni per browser standard compliant */
 height/**/: 20px; /* Dimensioni per Explorer */
 color: #666;
 text-decoration: none;
}
div.menu_x_level_no a, div.menu_x_level_act a {
  border-bottom: #CCCCCC 3px solid;
}
div.menu_x_level_no a:hover {
 border-bottom: #FF6600 3px solid;
}
/* content */
div#header_content { 
 padding: 0px 0px;
 margin: 0px 0px;
 height: 217px;
 clear: both;
 background-color: #FFCC00;
}

</style>

</head>
<body>

<div id="container">

<div id="header_box">

<div id="header">

<div id="header_logo">
LOGO
</div>

<div id="menu_x">
<div class="menu_x_level_act">Home page</div><div class="menu_x_level_no"> Consorzio </div><div class="menu_x_level_no"> Associati </div><div class="menu_x_level_no"> Zona </div>
</div>

<div id="header_content">
HEADER CONTENT
</div>


</div>   

</div>

<hr />

</div>

</body>
</html>


con IE7 č tutto ok mentre con Firefox riscontro questi problemi:



1 - il bordo del DIV Container non raggruppa tutti i DIV

2 - il menu orizzontale non prende ne la larghezze nč l'altezza giusta



avete qualche suggerimento?



ciao

Sevenumber