Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 8 su 8
  1. 10-05-2007, 12:34 #1
    sevenumber
    sevenumber non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2005
    Messaggi
    96

    IE7 vs Firefox differenza menu e container

    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
    Rispondi quotando Rispondi quotando
  2. 10-05-2007, 13:44 #2
    Myaku
    Myaku non è in linea
    Moderatrice di Grafica, Cerco e offro lavoro L'avatar di Myaku
    Registrato dal
    Nov 2006
    Messaggi
    10,349
    Guarda, non ho esaminato tutto il codice da te postato, ma ti dico fin d'ora che molto probabilmente quello che legge il css nella maniera corretta è Firefox.
    Sarebbe bene progettare un css che sia a posto per Firefox (nella maggior parte dei casi non avrai problemi neanche con altri browser quali Opera, versioni recenti di Netscape e Safari), e poi passare a correggere gli errori che hai su IE. Il browser di Bill ha la brutta tendenza a fare un po' a modo suo.

    Cyà
    TI SERVE UN GRAPHIC DESIGNER?

    BEHANCE
    Rispondi quotando Rispondi quotando
  3. 10-05-2007, 14:58 #3
    sevenumber
    sevenumber non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2005
    Messaggi
    96
    d'accordissimo con te, ho tolto i riferimenti ad altri browser ma il risultato è lo stesso...

    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; 
	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;
	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;
	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>
    Rispondi quotando Rispondi quotando
  4. 10-05-2007, 15:01 #4
    Mich_
    Mich_ non è in linea
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Tieni presente che per defualt il <body> e l'<html> sono il piu` piccolo possibile (e in questo FF e` corretto, mentre IE no).
    Per cui per poter centrare un blocco, devi definire
    width: 100%
    sia in html che in body.

    Invece il problema che il contenitore si ferma prima, e` dato da un non corretto comportamento dei float in FF (e altri browser). Per far funzionare correttamente, devi "chiudere" la serie di float con un opportuno blocco contenente il clear (il blocco puo` anche essere invisibile, tipo:
    <p style="font-size:0; clear:both;"> </p>
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati
    Rispondi quotando Rispondi quotando
  5. 10-05-2007, 15:21 #5
    sevenumber
    sevenumber non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2005
    Messaggi
    96
    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 */
}
.ripristino-float { clear:both; overflow:hidden; margin-bottom:12px; padding:0; }
/* 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; 
	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;
	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;
	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 class="ripristino-float"></div>
<div id="header_content">
HEADER CONTENT
</div>


</div>   

</div>

<hr />

</div>

</body>
</html>
    il contenitore anche con questa modifica non riesce a racchiudere tutti i DIV ed il menu continua a non visualizzarsi cm con IE

    cm mai?
    Rispondi quotando Rispondi quotando
  6. 10-05-2007, 15:29 #6
    Mich_
    Mich_ non è in linea
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non usare segni matematici dentro i nomi.
    E un blocco vuoto puo` venir ignorato dal browser: mettici almeno uno spazio.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati
    Rispondi quotando Rispondi quotando
  7. 10-05-2007, 15:34 #7
    sevenumber
    sevenumber non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2005
    Messaggi
    96
    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 */
}
.ripristino-float { clear:both; overflow:hidden; margin-bottom:12px; padding:0; }
/* 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; 
	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_1 { 
	padding: 0px 0px;
	margin: 10px 0px 0px 60px;
	width: 700px;
	float: right;
}
div.menu_1_level_no, div.menu_1_level_act {
	border-left: 1px #CCC solid;
	width: 139px;
	height: 40px;
	color: #666;
	font-size: 10px;
	text-transform: uppercase;
	background: url(../images/label.jpg) no-repeat 20px 40px;
	display: inline;
}
div.menu_1_level_no {
	padding: 60px 0px 8px 30px;
	margin: 0px 0px;
}
div.menu_1_level_act {
	padding: 60px 0px 16px 30px;
	margin: 0px 0px;
}
div.menu_1_level_no a, div.menu_1_level_act a, div.menu_1_level_no a:hover {
	padding: 0px 0px 3px 0px;
	margin: 0px 0px;
	height: 17px;
	color: #666;
	text-decoration: none;
}
div.menu_1_level_no a, div.menu_1_level_act a {
 	border-bottom: #CCCCCC 3px solid;
}
div.menu_1_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_1">
<div class="menu_1_level_act">Home page</div><div class="menu_1_level_no"> Consorzio </div><div class="menu_1_level_no"> Associati </div><div class="menu_1_level_no"> Zona </div>
</div>
<div class="ripristino-float"></div>
<div id="header_content">
HEADER CONTENT
</div>


</div>   

</div>

<hr />

</div>

</body>
</html>
    segni matematici tolti ma non vedo cambiamenti
    Rispondi quotando Rispondi quotando
  8. 11-05-2007, 11:04 #8
    sevenumber
    sevenumber non è in linea
    Utente di HTML.it
    Registrato dal
    Dec 2005
    Messaggi
    96
    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"> Consorzio </div><div class="menu_x_level_no"> Associati </div><div class="menu_x_level_no"> Zona </div>
</div>

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

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

</div>

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


<div id="main_box">

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

<div id="right_content">

</div>

</div>


<hr />

<div id="bottom_box">
 


FOOTER</p>

</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?
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.