• Home
  • Forum
  • Fare Web
  • HTML e CSS

IE7 vs Firefox differenza menu e container

  • Creatore Discussione Creatore Discussione sevenumber
  • Data di inizio Data di inizio 10 Mag 2007
S

sevenumber

Nuovo Utente
5 Apr 2007
10
0
0
  • 10 Mag 2007
  • #1
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
  • 11 Mag 2007
  • #2
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

S
IE7 vs Firefox - posizionamento
  • sevenumber
  • 5 Apr 2007
  • HTML e CSS
Risposte
2
Visite
2K
HTML e CSS 18 Apr 2007
sbobby
J
ToolbarStudio - make IE & Firefox toolbars (IE7 compatible)
  • John
  • 17 Apr 2006
  • Webdesign e Grafica
Risposte
0
Visite
2K
Webdesign e Grafica 17 Apr 2006
John
J
Problema di importa AJAX con IE7
  • Bluedr4gon
  • 15 Mag 2010
  • Ajax
Risposte
5
Visite
2K
Ajax 19 Mag 2010
Bluedr4gon
G
Problema con upload immagini e IE7
  • gianluca72
  • 31 Gen 2010
  • PHP
Risposte
6
Visite
2K
PHP 5 Feb 2010
Eliox
Drupal: problemi di visualizzazione tema marinelli su IE7 e 8
  • matteoraggi
  • 5 Nov 2009
  • CMS (Content Management System)
Risposte
4
Visite
3K
CMS (Content Management System) 30 Dic 2009
matteoraggi
S
Visualizzazione instabile con ie7
  • ^Sydney^
  • 10 Set 2009
  • HTML e CSS
Risposte
2
Visite
2K
HTML e CSS 13 Set 2009
Robby84
C
visualizzaizone non corretta in IE7
  • cuius
  • 8 Lug 2009
  • HTML e CSS
Risposte
0
Visite
2K
HTML e CSS 8 Lug 2009
cuius
C
M
Problema di visualizzazione Lightbox in IE7 e Safari
  • Mich_Torr
  • 20 Giu 2009
  • Javascript
Risposte
3
Visite
3K
Javascript 29 Giu 2009
Mich_Torr
M
ancora ie6 ie7 ff
  • borgo italia
  • 3 Dic 2008
  • HTML e CSS
Risposte
3
Visite
1K
HTML e CSS 4 Dic 2008
PoLe
A
Problema pagina AJAX con IE7
  • andry84
  • 23 Nov 2008
  • Ajax
Risposte
0
Visite
3K
Ajax 23 Nov 2008
andry84
A
L
form login sbagliato in ie7
  • liiuk78
  • 6 Nov 2008
  • HTML e CSS
Risposte
5
Visite
2K
HTML e CSS 6 Nov 2008
onsitus
D
problema IE7: bisogna aspettare 5sec. per fare submit di una form
  • dayof0
  • 23 Ott 2008
  • PHP
Risposte
13
Visite
3K
PHP 28 Ott 2008
dayof0
D
D
Problemi css Ie7
  • drblis
  • 25 Set 2008
  • HTML e CSS
Risposte
0
Visite
1K
HTML e CSS 25 Set 2008
drblis
D
R
Activex ie7 e flash
  • raflesya
  • 26 Ago 2008
  • Flash
Risposte
2
Visite
2K
Flash 27 Ago 2008
raflesya
R
I
Pulsanti E Ie7
  • indy79
  • 17 Giu 2008
  • Flash
Risposte
9
Visite
2K
Flash 18 Giu 2008
carla146
hack per ie7
  • SolidSnake4
  • 24 Apr 2008
  • HTML e CSS
Risposte
4
Visite
2K
HTML e CSS 25 Apr 2008
onsitus
M
IE7 non apre schermo intero
  • mooug
  • 11 Mar 2008
  • Windows e Software
Risposte
0
Visite
3K
Windows e Software 11 Mar 2008
mooug
M
M
problema con scrolling news ie7/6
  • marty55555
  • 26 Ott 2007
  • Javascript
Risposte
0
Visite
3K
Javascript 26 Ott 2007
marty55555
M
M
Preferiti per IE7 FF NS e Opera in un colpo
  • mooug
  • 27 Giu 2007
  • Snippet Javascript
Risposte
0
Visite
2K
Snippet Javascript 27 Giu 2007
mooug
M
Z
Aiuto! Problemi con menu in IE7
  • zed85
  • 21 Feb 2007
  • Javascript
Risposte
2
Visite
1K
Javascript 27 Feb 2007
PoLe
Condividi:
Facebook X (Twitter) LinkedIn WhatsApp e-mail Condividi Link
  • Home
  • Forum
  • Fare Web
  • HTML e CSS
  • Italiano
  • Termini e condizioni d'uso del sito
  • Policy Privacy
  • Aiuto
  • Home
Community platform by XenForo® © 2010-2024 XenForo Ltd. | Traduzione a cura di XenForo Italia
Menu
Accedi

Registrati

  • Home
  • Forum
    • Nuovi Messaggi
    • Cerca...
  • Novità
    • Featured content
    • Nuovi Messaggi
    • Ultime Attività
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?