IE7 vs Firefox differenza menu e container

sevenumber · 10 Mag 2007

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"> <a href="index.php?id=4" onfocus="blurLink(this);"  >Consorzio</a> </div><div class="menu_x_level_no"> <a href="index.php?id=3" onfocus="blurLink(this);"  >Associati</a> </div><div class="menu_x_level_no"> <a href="index.php?id=2" onfocus="blurLink(this);"  >Zona</a> </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

sevenumber · 11 Mag 2007

ho corretto il mio template aggiornandolo del doctype e limitando i tag ripetitivi, questo il codice:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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 */
}
.ripristino-float { 
	clear: both; 
	height: 0px;
}
/* GENERAL fonts */
* {
	padding: 0px 0px;
	margin: 0px 0px;
	border: 0px;
	font-family: verdana, arial;
	font-size: 10px;
	font-weight: normal;
}
hr { 
	display:none
}
/* CONTAINER */
div#container { 
	margin: 0px auto;
	border: #999 1px solid;
	width: 990px!important; /* Dimensioni per browser standard compliant */
	width/**/: 992px; /* Dimensioni per Explorer */
	position: relative;
	text-align: left;
}
/* HEADER */
div#header_box { 
	height: 100px;
}
/* logo */
div#header_logo { 
	margin: 10px 0px 0px 30px;
	width: 190px;
	height: 90px;
	float: left;
	background-color: #FFFF99;
	/*background: url(../images/logo.jpg) 0px 0px no-repeat;*/
}
/* horizontal menu */
div#menu_x { 
	margin: 10px 0px 0px 60px;
	width: 700px;
	height: 90px;
	float: left;
	background-color: #FF3300;
}
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: 60px;
	color: #666;
	font-size: 10px;
	text-transform: uppercase;
	background-color: #99FFFF;
	/*background: url(../images/label.jpg) no-repeat 20px 40px;*/
	display: inline;
}
div.menu_x_level_no {
	padding: 60px 0px 8px 30px;
}
div.menu_x_level_act {
	padding: 60px 0px 16px 30px;
}
div.menu_x_level_no a, div.menu_x_level_act a, div.menu_x_level_no a:hover {
	padding: 0px 0px 3px 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 { 
	height: 217px;
	background-color: #FFCC33;
	/*background: url(../images/bg_header.jpg) 0 0 repeat;*/
}
/* MAIN */
div#main_box { 
	margin: 0px auto;
	height: 200px;
	clear: both;
}
/* left column */
div#left_box { 
	margin: 10px 0px;
	width: 200px;
	float: left;
	background-color: #00CC33;
}
/* right column */
div#right_content { 
	margin: 10px 0px;
	width: 780px;
	float: right;
}
/* FOOTER */
div#bottom_box { 
	padding: 10px 0px;
	clear: both;
	height: 0px!important; /* Dimensioni per browser standard compliant */
	height/**/: 20px; /* Dimensioni per Explorer */
	background-color: #CCC;
}
div#bottom_box P { 
	color: #FFF;
	font-size: 10px;
	text-align: center;
}
</style>

</head>
<body>

<div id="container">

<div id="header_box">

<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"> <a href="index.php?id=4" onfocus="blurLink(this);"  >Consorzio</a> </div><div class="menu_x_level_no"> <a href="index.php?id=3" onfocus="blurLink(this);"  >Associati</a> </div><div class="menu_x_level_no"> <a href="index.php?id=2" onfocus="blurLink(this);"  >Zona</a> </div>
</div>

<div class="ripristino-float"></div>

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

</div>

<hr />
<div class="ripristino-float"></div>

<!--###main_box### begin -->
<div id="main_box">

<div id="left_box">
NEWS		
</div>

<div id="right_content">

</div>

</div>
<!--###main_box### end -->

<hr />

<div id="bottom_box">
<!--###bottom_box### begin --> 
<p>FOOTER</p>
<!--###bottom_box### ends -->
</div>

</div>

</body>
</html>

domande:

1 - con FF il menu orizzontale (home, consorzio, ecc) perchè parte dal top mentre con IE7 viene inglobato nell'area rossa (div#menu_x)? quest'ultima è la soluzione che vorrei anche con FF ma non riesco

2- il menu (div.menu_x_level_no/ act) non prende l'altezza che desidero (height: 60px

sia in ff che ie7

3- perchè le NEWS (div#left_box) in verde vengono inglobate al'alrea gialla (<div id="header_content">)? ho utilizzato il <div class="ripristino-float"></div> ma non mi ripristina il float (con entrambi i browser)

suggerimenti?

Cerca

Cerca

IE7 vs Firefox differenza menu e container

sevenumber

Nuovo Utente

sevenumber

Nuovo Utente

Discussioni simili