overflow in IE e FIREFOX

**carlo55** · 02-01-2008, 15:19

Cari amici, sono circa quindici giorni il mio approccio ai CSS e con vari esempi e i vari tutorial di HTML.IT sono riuscito a realizzare una pagina che di seguito elenco, però ho una difficoltà di vissualizzazione in IE7 tutto bene in FIREFOX la parte centrale dove elenco i documenti (<div id="rightcolumn">) si allunga e non riesco ad farla visualizzare come IE7
Chiedo a voi un aiuto e spero di essere riuscito a farmi capire e di seguito elenco il CSS e la agina HTML
Nella speranza di non aver fatto errori un augurio di buon anno e grazie
Carlo

CSS

codice:

/*----inizio per la parte di sopra--- */
/*----elimino lo spazio tra la finestra e la pagina---- */
html, body
{
margin: 0; padding: 0
}
/* centra in IE5.x */
body
{
background : url(../immag/fondo.gif);
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}   

#contenitore
{
margin: 0 auto;   /* centra negli altri browser */
text-align: left;   /* ripristina l'allineamento */  
width : 750px;
}

#banner 
{
background-image : url(../immag/banner_550X98.gif);
background-repeat : no-repeat;
margin : 0 25px 0 25px;
height : 100px;
}
/*-------------------------------------------------------------fine per la parte di sopra--- */

/*----inizio per la parte del menù superiore--- */
#nav
	{
	line-height:20px;
	padding:2px 8px 2px 7px;
	margin: 5px auto;
	width:750px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	}

#nav a
	{
	color: #ffffff;
	background-color:#6699FF;
	font-weight:bold;
	text-decoration:none;
	padding:2px 8px 2px 7px;
	border:1px solid #3366FF;
	}

#nav a:hover
	{
	color:#ffffff;
	background-color:#3366FF;
	text-decoration:none;
	padding:2px 8px 2px 7px;
	}
	
#nav .selected 
	{
	color:#ffffff;
	background-color:#3366FF;
	text-decoration:none;
	padding:2px 8px 2px 7px;
	border:2px solid #f90;
	}
/*-------------------------------------------------------------fine per la parte del menù superiore--- */

/*----inizio per la parte centrale--- */
#conten_centro
	{
	width:750px;
	height: 324px;
	margin:10px auto;
	text-align:left;
	}

#navigation
	{
	width:130px;
	margin-left:-750px;
	float:left;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px; 
	}

#extra
	{
	width:180px;
	margin-left:-180px;
	float:left;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px; 
	}
	
#wrapper
	{
	float:left;
	width:100%;
	}
	
#cont_centro
	{
	width:400px;
	margin: 0 150px;
	}
/*-------------------------------------------------------------fine per la parte centrale--- */

/*----inizio per la parte menù di sinistra--- */
#spazio
{
height : 1.5em;
}

#box1
	{
	PADDING-LEFT: 20px; 
	PADDING-BOTTOM: 2px; 
	PADDING-TOP: 2px; 
	FONT-WEIGHT: bold; 
	MARGIN: 0px; 
	BACKGROUND: url(../immag/sf_box_1.gif) no-repeat; 
	COLOR: #033; 
	TEXT-ALIGN: left
	}
	
#box2 
	{
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 5px;
	PADDING-TOP: 0px; 
	PADDING-RIGHT: 0px;
	MARGIN: 0px;
	BACKGROUND: url(../immag/sf_box_1_1.gif);	
	BORDER-LEFT: #f90 1px solid; 
	BORDER-BOTTOM: #f90 1px solid;
	BORDER-TOP: #f90 1px solid;
	BORDER-RIGHT: #f90 1px solid; 
	TEXT-ALIGN: left
	}

ul 
	{
	PADDING-LEFT: 0px; 
	PADDING-BOTTOM: 0px; 
	PADDING-TOP: 0px;
	PADDING-RIGHT: 0px; 
	MARGIN: 5px 0px 0px; 
	}

li 
	{
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	PADDING-TOP: 0px; 
	PADDING-RIGHT: 0px; 
	MARGIN: 3px 0px 0px 5px;  
	LIST-STYLE-POSITION: outside; 
	LINE-HEIGHT: 15px; 
	LIST-STYLE-TYPE: none; 
	TEXT-ALIGN: left
	}	

li a 
	{
	TEXT-DECORATION: none
	}

li a:visited 
	{
	TEXT-DECORATION: none
	}

li a:hover 
	{
	TEXT-DECORATION: none
	}
/*-------------------------------------------------------------fine per la parte menù di sinistra--- */

/*----inizio per la parte iframe--- */
#rightcolumn
	{
	background: rgb(220,220,220);
	border: 1px solid black;
	color: black;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	FONT-SIZE: 12px; 
	height: 324px;
	overflow: scroll;
	padding: 14px 10px 14px 10px;
	text-align: left;
	}
.righttitle
	{
	background: rgb(210,210,210);
	font-weight:bold;
	display: block;
	width: 100%;
	}	}/*-------------------------------------------------------------fine per la parte iframe--- */

Pagina html

codice:

<html>
<head>
<link href="stile/prova_5_globale.css" rel="stylesheet" type="text/css" />
<title>prova_5_globale</title>
</head>
<body>

<div id="contenitore">

	<div id="banner"></div>
	

</div>	
	

<div id="nav">
<a class="selected">Inizio</a>
Link aaaa
Link bb
Link Cccccccccc Ccccccc
Link d Dddddddd Ddddddd
Link Eeeee
Link
</div>	
	
<div id="conten_centro">
	<div id="wrapper">
		<div id="cont_centro">
			<div id="rightcolumn">
			<span class="righttitle">Documento 1 n. 31-2007 del 11 dicembre 2007</span>

			http://Lorem ipsum dolor sit amet, c...odo consequat..


			<span class="righttitle">Documento 1 n. 31-2007 del 11 dicembre 2007</span>

			http://Lorem ipsum dolor sit amet, c...ipiscing elit..


			<span class="righttitle">Documento 1 n. 31-2007 del 11 dicembre 2007</span>

			http://Lorem ipsum dolor sit amet, c...odo consequat.


			<span class="righttitle">Documento 1 n. 31-2007 del 11 dicembre 2007</span>

			http://Lorem ipsum dolor sit amet, c...ipiscing elit.


			<span class="righttitle">Documento 1 n. 31-2007 del 11 dicembre 2007</span>

			http://Lorem ipsum dolor sit amet, c...odo consequat.


			<span class="righttitle">Documento 1 n. 31-2007 del 11 dicembre 2007</span>

			http://Lorem ipsum dolor sit amet, c...odo consequat.

    
			</div>
		</div>
	</div>
	<div id="navigation">
	<div id="box1">Documenti 1</div>
		<div id="box2">
		<ul>
		[*]Documento 1 
		[*]Documento 1 
		[*]Documento 1
		
		[/list]
		</div>
		<div id="spazio"></div>
		<div id="box1">Documenti 2</div>
		<div id="box2">
		<ul>
		[*]Documenti 2 
		[*]Documenti 2 
		[*]Documenti 2 
		[*]Documenti 2
		
		[/list]
		</div>
		<div id="spazio"></div>
		<div id="box1">Documenti 3</div>
		<div id="box2">
		<ul>
		[*]Documenti 3
		
		[/list]
		</div>
		<div id="spazio"></div>
		<div id="box1">Documenti 4</div>
		<div id="box2">
		<ul>
		[*]Documenti 4
		
		[/list]
		</div>
	</div>
	<div id="extra">
	ID EXTRA Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	</div>
</div>
</body>
</html>

**carlo55** · 02-01-2008, 20:17

up

Dimenticavo ho validato il CSS e non mi ha segnalato nessun errore
Grazie Carlo

**Mich_** · 07-01-2008, 11:24

In quale linguaggio scrivi?
Perche` vedo inconsistenze nel codice HTML: sembra realizzato con cura e razionalita`, ma manca il DOCTYPE e ci sono alcune cose che non sono semanticamente corrette, ne` seguono le regole dell'XHTML Strict.

Prova a validare anche il codice HTML.

**carlo55** · 07-01-2008, 11:47

Ti ringrazio per l'intervento; essa è una pagina che sto provando in locale per avere scienza e conoscenza per i CSS.
Quanto da te segnalato saranno incluse nel momento in cui riuscirò a capirci qualcosa.
Buona gironata Carlo

**Mich_** · 07-01-2008, 11:57

Non ha molto senso testare i CSS su un codice HTML non corretto.

I browser rispondono ai CSS anche in base:
- al DOCTYPE
- al codice HTML

Ribadisco il consiglio di validare ANCHE l'HTML

Discussione: overflow in IE e FIREFOX

Strumenti discussione

Ricerca discussione

Visualizza

overflow in IE e FIREFOX

aiuto per cortesia

Grazie

Permessi di invio