IE7 vs Firefox differenza menu e container

S

sevenumber

Nuovo Utente
5 Apr 2007
10
0
0
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
 
S

sevenumber

Nuovo Utente
5 Apr 2007
10
0
0
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?
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
S IE7 vs Firefox - posizionamento HTML e CSS 2
J ToolbarStudio - make IE & Firefox toolbars (IE7 compatible) Webdesign e Grafica 0
Bluedr4gon Problema di importa AJAX con IE7 Ajax 5
G Problema con upload immagini e IE7 PHP 6
matteoraggi Drupal: problemi di visualizzazione tema marinelli su IE7 e 8 CMS (Content Management System) 4
S Visualizzazione instabile con ie7 HTML e CSS 2
C visualizzaizone non corretta in IE7 HTML e CSS 0
M Problema di visualizzazione Lightbox in IE7 e Safari Javascript 3
borgo italia ancora ie6 ie7 ff HTML e CSS 3
A Problema pagina AJAX con IE7 Ajax 0
L form login sbagliato in ie7 HTML e CSS 5
D problema IE7: bisogna aspettare 5sec. per fare submit di una form PHP 13
D Problemi css Ie7 HTML e CSS 0
R Activex ie7 e flash Flash 2
I Pulsanti E Ie7 Flash 9
SolidSnake4 hack per ie7 HTML e CSS 4
M IE7 non apre schermo intero Windows e Software 0
M problema con scrolling news ie7/6 Javascript 0
M Preferiti per IE7 FF NS e Opera in un colpo Snippet Javascript 0
Z Aiuto! Problemi con menu in IE7 Javascript 2
sbobby IE6 diverso da IE7!!! HTML e CSS 2
T Internet Explorer 7 Release Candidate 1 in standalone mode(IE7) HTML e CSS 3
F firefox problema http Linux e Software 0
D Firefox con proxy (SELENIUM) Windows e Software 0
G Server NVR offline con Firefox 22.0 IP Cam e Videosorveglianza 3
trattorino [PHP] [HTML] redirect iniezione su firefox PHP 5
D [WordPress] Reindirizzamento funziona su Chrome ma non su Firefox WordPress 0
S [HTML] Problemi con Blueimp image gallery su Chrome e Firefox HTML e CSS 2
Rikk73 onScroll non funziona su firefox su mac jQuery 4
M Dimensioni diverse degli input text tra Firefox per Linux e Windows HTML e CSS 3
C Problema javascript su chrome e firefox Javascript 2
F @font-face firefox HTML e CSS 3
P Div visibile con ie ma non con firefox e chrome HTML e CSS 7
asevenx problema visualizzazione slider con firefox HTML e CSS 3
Marco_88 Problemi layout con firefox HTML e CSS 3
A Perchè su chrome e safari funziona tutto e su firefox e ie no?!!!? Presentati al Forum 0
G Compatibilità Firefox Javascript 0
G Problema Firefox 32.0.3 e Sun Java Windows e Software 2
L Visualizzazione Firefox HTML e CSS 1
Shyson Firefox 29 non prende a.visited HTML e CSS 0
D Verifica plug-in aggiornati di Firefox non vede gli aggiornamenti effettivi Windows e Software 0
F [RISOLTO] .bind() jquery non funziona su firefox jQuery 3
T JQuery non funziona su firefox jQuery 2
P box like facebook vuoto con firefox Javascript 0
G problema con firefox Javascript 1
Y Firefox, Opera e IE non leggono il .css! HTML e CSS 2
S Css che funziona solo su firefox e altri: Chrome no. HTML e CSS 1
F problemi visualizzazione firefox HTML e CSS 7
J Aiuto problemone firefox. HTML e CSS 4
F Problema elenco puntato firefox HTML e CSS 0

Discussioni simili

Alto Basso