visualizzazione ie-firefox (margini, allineamento)

[danloppa]

Ho diversi problemi nella visualizzazione della mia home page con ie, mentre firefox non mi da nessun problema. La pagina è stata validata correttamete da W3C.

I problemi sono:

1 il div="menu_red" è attaccato al div="menu_green"
2 il padding nel menu navigation è troppo esteso.
3 il div="contenent" non sta a destra del div="navigation". Ho capito che tale problema deriva dal fatto che il div="scroller" dove c'è la news che scorre ha width:100%. Se tale tag non ci fosse tutto il div sarebbe allineato ma la scritta scorrerebbe per tutto la larghezza pagina uscendo dal div="scroller"
4 I div delle 4 news dovrebbero essere simmetrici invece sono sfasati e spostati.

Posto il link della pagina:
http://forum470.altervista.org

e il link della pagina con le foto della home sia con firefox, sia con ie:
http://forum470.altervista.org/gif.htm

So che sarà una cosa lunga e noiosa leggere tutto ma non so dove sbattere la testa.

Grazie a tutti Danloppa.

/* CSS container */
#container {
width:expression(document.body.clientwidth < 800 ? "600px" : "auto" );
min-width:800px;
font-family: Arial,Verdana,Helvetica,sans-serif;
} 

/* CSS header_left */
#header_left {
height:150px;
float:left;
width:13em;
text-align:center;
}

/* CSS header_right */
#header_right {
height:150px;
margin-left:14em;
text-align:center;
background-image: url("images/22.jpg");
background-repeat: no-repeat;
background-position:center;
}

/* CSS navigation*/
#navigation {
clear:left;
float:left;
width:13em;
margin-top:10px;
margin-bottom:10px;
}

	/* CSS menu_red*/
	#menu_red {
  	 background-color: #CC0000;
  	}

	/* CSS menu_white*/
	#menu_white {
	   background-color: #FFFFFF;
   	border: 1px solid black;
   	margin-bottom: 5px;
   	margin-top:5px;
	} 	
	
	/* CSS menu_green*/
	#menu_green {
	   background-color: #006600;
	}

	/* CSS bordi tondi*/
	.topleft { background: url("images/top_left.gif") no-repeat top left }

	.topright { background: url("images/top_right.gif") no-repeat top right }

	.bottomleft { background: url("images/bottom_left1.gif") no-repeat bottom left; }

	.bottomright { background: url("images/bottom_right1.gif") no-repeat bottom right;}

	#topleft { background: url("images/top_left2.gif") no-repeat top left }

	/* CSS contenuto*/
	.contenuto { 
	padding: 5px;
	}

	/* CSS contenuto p*/
	.contenuto p { 
	font-family: Arial,Verdana,Helvetica,sans-serif;
	font-size: 17px;
	font-weight:bold;
	text-align: center;
	}

	/* CSS contenuto li*/
	.contenuto li { 
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type:disc;
	}
	
	/* CSS contenuto link*/
	.contenuto a:link { 
	color:#000;
	text-decoration: none;	
	}
	
	/* CSS contenuto link-visitato*/
	.contenuto a:visited { 
	color:#000;
	text-decoration:none;	
	}
	
	/* CSS contenuto link-hover*/
	.contenuto a:hover{ 
	color:#BBB;
	text-decoration: underline;	
	}
	
	/* CSS contenent*/
	#contenent {
	margin-left:14em;
	}
	
	/* CSS menu*/
	#menu {
	height:30px;
	margin-top:10px;
	background-color:#0000CC;
	text-align:right;	
	}
	
	/* CSS contenuto_menu*/
	.contenuto_menu { 
	padding-top:5px;
	padding-bottom:5px;
	padding-right:5px;	
	color:#FFF;
	font-size:20px;	
	}
	
	/* CSS contenuto_menu link*/
	.contenuto_menu a:link {
	color:#FFF;
	text-decoration:none;
	}
	
	/* CSS contenuto_menu link-visitato*/
	.contenuto_menu a:visited { 
	color:#FFF;
	text-decoration: none;	
	}
	
	/* CSS contenuto_menu link-hover*/
	.contenuto_menu a:hover{ 
	color:#BBB;
	text-decoration: underline;	
	}

		/* CSS contenuti*/
		#contenuti {
		margin-top:10px;
		}
		
		/* position:relative and overflow:hidden are required */
		#scroller {
		position:relative;
		width:100%;
		overflow:hidden; 
		border:1px solid #000;
		}
		
		/* CSS scrollbar link*/
			#scroller a:link {
			color:#000;
			text-decoration:none;
			}
	
			/* CSS scrollbar link-visitato*/
			#scroller a:visited {
			color:#000;
			text-decoration:none;
			}
	
			/* CSS scrollbar link-hover*/
			#scroller a:hover {
			color:#BBB;
			text-decoration:underline;
			}
		
		/* display:none prevents the controls being shown when JavaScript is not present */
		#controls {
		display:none; 
		text-align:right;
		font-weight:bold;
		}
		
		/* CSS controls link*/
			#controls a:link {
			color:#00C;
			text-decoration:none;
			}
	
			/* CSS scrollbar link-visitato*/
			#controls a:visited {
			color:#00C;
			text-decoration:none;
			}
	
			/* CSS scrollbar link-hover*/
			#controls a:hover {
			color:#BBB;
			text-decoration:underline;
			}
		/* add formatting for the scrolling text */
		#tag {
		margin:2px 0;
		font-size:16px;
		font-weight:bold;
		}		 
	
	/* CSS contenitore1*/
	#contenitore1 {
	float:left;
	width:49%;
	} 
	
	/* CSS contenitore2*/
	#contenitore2 {
	margin-left:51%;
	} 
	
	/* CSS news1*/
	#news1 { 
	color: #0000CC;
	border:2px solid #0000CC;
	margin-bottom:10px;
	text-align:center;
	}
	
	/* CSS news1 link*/
			#news1 a:link {
			color:#0000CC;
			text-decoration:none;
			}
	
			/* CSS news1 link-visitato*/
			#news1 a:visited {
			color:#0000CC;
			text-decoration:none;
			}
	
			/* CSS news1 link-hover*/
			#news1  a:hover {
			color:#0000CC;
			text-decoration:underline;
			}		 
	

	/* CSS news2*/
	#news2 { 
	color: #000000;
	border:2px solid #000000;
	text-align: center;
	}
	
	/* CSS news2 link*/
			#news2 a:link {
			color:#000;
			text-decoration:none;
			}
	
			/* CSS news2 link-visitato*/
			#news2 a:visited {
			color:#000;
			text-decoration:none;
			}
	
			/* CSS news2 link-hover*/
			#news2  a:hover {
			color:#000;
			text-decoration:underline;
			}		 

	/* CSS news3*/
	#news3 { 
	color: #006600;
	border:2px solid #006600;
	margin-bottom:10px;
	text-align: center;
	}
	
	/* CSS news3 link*/
			#news3 a:link {
			color:#006600;
			text-decoration:none;
			}
	
			/* CSS news3 link-visitato*/
			#news3 a:visited {
			color:#006600;
			text-decoration:none;
			}
	
			/* CSS news3 link-hover*/
			#news3  a:hover {
			color:#006600;
			text-decoration:underline;
			}		 

	/* CSS news4*/
	#news4 { 
	color: #CC0000;
	border:2px solid #CC0000;
	text-align:center;
	} 	  
	
	/* CSS news4 link*/
			#news4 a:link {
			color:#CC0000;
			text-decoration:none;
			}
	
			/* CSS news4 link-visitato*/
			#news4 a:visited {
			color:#CC0000;
			text-decoration:none;
			}
	
			/* CSS news4 link-hover*/
			#news4  a:hover {
			color:#CC0000;
			text-decoration:underline;
			}		 

			
			
			
/*CSS footer*/
#footer {
clear:both;
height:60px;
margin-top:10px;
border-top: 1px solid black ;
text-align:center;
padding:5px;
}
	/*CSS footer_left*/
	#footer_left {
	text-align:center;
	width:13em;
	padding:5px;
	float:left;
	font-size:12px;
	}
	
	/*CSS footer_right*/
	#footer_right {
	text-align:center;
	margin-left:13em;
	padding:5px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}

	/* CSS scrollbar*/
	#scrollbar { 
	padding: 5px;
	color: #0000CC;
	font-size:20px;
	font-style: bold;
	border:1px solid black;
	margin-bottom:10px;
	}

[danloppa]

Nessuno sa darmi una mano!! anche solo per una domanda ,non so proprio come risolvere il problema.

[Mich_]

IL tuo scoller da` qualche problema al browser (mi satura il computer). Dovresti toglierlo o usare qualcosa diverso.

Comunque ho visto che fai uso di padding: la maggior parte delle differenze deriva da quello (il box-model di IE e` diverso dagli altri browser: prova a correggere con un CSS per IE inserito in commenti condizionali).

[danloppa]

Cosa posso usare al posto del java sceript. Prima usavo marquee ma il validatore non me lo fa passare.
Come commenti condizionali cosa dovrei mettere.
Grazie per l'aiuto


Danloppa

[Mich_]

Io in linea di massima sono contrario alle cose che si muovono.
Comunque quello script e` un po' sovradimensionato: come usare un TIR per andare al giornalaio: credo che si trovi di meglio. Comunque puoi chiedere nel forum javascript.

I commenti condizionali sono una tecnica per introdurre codice personalizzato per IE.
Trovi info a partire dai "link utili", o mediante una ricerca (bottone in alto) nel forum.