problema visualizzazione firefox

**fraermejo** · 23-06-2009, 16:10

sul mio sito: http://condividicazzate.altervista.org con ie visualizzo tutto correttamente, mentre con ffx alcuni riquadri sono spostati. Per questo ho creato uno script che cambia il foglio di stile in base al browser

codice:

<script language="javascript">
if (navigator.appVersion.indexOf("MSIE")!=-1){
document.write("<link rel='stylesheet' type='text/css' media='screen' href='css/stile.css' />");
}
  else if(navigator.userAgent.indexOf("Firefox")!=-1){
  document.write("<link rel='stylesheet' type='text/css' media='screen' href='css/stile_ff.css' />");
       }
       else {
document.write("<link rel='stylesheet' type='text/css' media='screen' href='css/stile.css' />");
       }
	</script>

il codice di "stile.css"(per IE) è il seguente:

codice:

body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(../img/background.jpg);
background-attachment: fixed;
font-family: verdana;
font-size: 15px;
color: #646464;
}
a{
font-family: verdana;
font-size: 15px;
color: blue;
text-decoration:underline;
}
a:visited{
font-family: verdana;
font-size: 15px;
color: blue;
text-decoration:underline;
}
a:hover{
color: #FFCC00;
text-decoration: none;
}
.clearfix{ /*clearfix http://css.flepstudio.org/css-tutorials/clearfix.html*/
clear: both;
}
img{
border: none;
}
a{
outline: none;
}
/*header*/
#c_header{
text-align: center;


}
#header{
width: 870px;
margin: auto;
}
#logo{
float: left;
margin-top:5px;
}
#sponsor{
float: right;
margin-top: 10px;

}
div:after{
clear: both;
}
/*contenitore*/
#wrapper{
text-align:center;
clear:both;
}
/*menu*/
#c_menu{
width: 870px;
margin: auto;
}
#menu_bg{
height: 56px;
line-height: 56px;
background: url(../img/menu_bg.jpg) repeat-x;
}

#menu{
float: left;
margin-left: 115px;
}
#menu a{
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 0 30px 0 10px;
}
#menu a:hover{
color: #000000;
}
#menu a.a_right{
background: url(../img/menu_icon.jpg) no-repeat right;
}
#menu_left_bg{ /*angoli sinistra*/
width: 14px;
height: 56px;
float: left;
background: url(../img/menu_left_bg.jpg) no-repeat;
}
#menu_right_bg{ /*angoli destri*/
width: 14px;
height: 56px;
float: right;
background: url(../img/menu_right_bg.jpg) no-repeat;
}
/*contenitori*/
#c_contenitori{
text-align:center;
margin-top: 20px;
}
#c_r_ar{
width:870px;
margin:auto;
}
#c_rosso{
float:left;
}
#c_ar{
float:right;
}
/*ROSSO*/
#top_rosso{
width:431px;
height:44px;
background: url(../img/top_cont.gif) no-repeat;
}
#rosso_bg{
width:431px;
height:auto;
background: url(../img/cont_bg.gif) repeat-y;
overflow: auto;
text-align:justify;
}
#rosso_bg p{
margin-top: 5px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 5px;
}

#bot_rosso{
width:431px;
height:17px;
background: url(../img/bot_cont.gif) no-repeat;
}
/*ARANCIONE*/
#top_ar{
width:431px;
height:44px;
background: url(../img/top_ar.gif) no-repeat;
}
#ar_bg{
width:431px;
height:auto;
background: url(../img/cont_ar_bg.gif) repeat-y;
overflow: auto;
text-align:justify;
}
#ar_bg p{
margin-top: 5px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 5px;
}
#bot_ar{
width:431px;
height:16px;
background: url(../img/bot_ar.gif) no-repeat;
}
/*ULTIME CAZZATE*/
#cont_ultime{
text-align:center;
margin-top: 20px;
}
#c_ultime{
width:870px;
margin:auto;
}
#top_ultime{
width:870px;
height:43px;
background: url(../img/ultime.gif) no-repeat;
}
#ultime_bg{
width:870px;
height:auto;
background: url(../img/ultime_bg.gif) repeat-y;
overflow: auto;
text-align:justify;
}
#ultime_bg p{
margin-top: 5px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 5px;
}
#ultime_bg h2{
margin-top: 5px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 5px;
font-family: verdana;
font-size: 20px;
color: #646464;
}


#bot_ultime{
width:870px;
height:15px;
background: url(../img/ultime_bot.gif) no-repeat;
}
#top_iscriviti{
width:870px;
height:43px;
background: url(../img/iscriviti.gif) no-repeat;
}
#top_accedi{
width:870px;
height:43px;
background: url(../img/accedi.gif) no-repeat;
}
#top_cazzata{
width:870px;
height:43px;
background: url(../img/agg_cazzata.gif) no-repeat;
}
#top_leggi{
width:870px;
height:43px;
background: url(../img/qst_cazzata.gif) no-repeat;
}
#modulo{
margin:auto;
}
/*UTENTE*/
#utente{
float:right;
}
/*VOTI*/
.voto{
height:18px;
width:19px;
background: url(../img/voto.jpg) no-repeat;
}
.voto_hover{
height:18px;
width:19px;
background: url(../img/voto_hover.jpg) no-repeat;
}

il problema lo trovo con top_ultime che sull'homepage(http://condividicazzate.altervista.org) corrisponde a "le ultime cazzate". Con firefox l'immagine di top ultime è completamente spostata in alto. questo è il codice di index.php:

codice:

<div id="c_header">
<div id="header">
<div id="logo">[img]img/logo2.png[/img]</div><div id="sponsor"><script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=728X90/r='+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>
</div>
</div>
</div>
<div id="wrapper">
   <div id="c_menu">
     <div id="menu_bg">
		<div id="menu_left_bg"></div>
		<div id="menu">
			HOME
			ACCEDI
			ISCRIVITI
			CAZZATE
			AGGIUNGI 1 CAZZATA			
                </div>
  	<div id="menu_right_bg"></div>
    </div>
  </div>
</div>
<div id="c_header">
	<div id="header">
		<div id="utente"> 
		<?php 
		if (isset($utenteconnesso)){
		if ($utenteconnesso!=""){
		$flag_logineffettuato=0;
		echo "

Bentornato $utenteconnesso, <a href=\"logout.php\">Logout</a></p>";
		} 
		else {
		$flag_logineffettuato=1;
		}
		}
		else {
		$flag_logineffettuato=1;
		}
		?>
		</div>
	</div>
</div>
<div id="c_contenitori">
	<div id="c_r_ar">
   		<div id="c_rosso">
		    	<div id="top_rosso"></div>
			<div id="rosso_bg">
				

Hai avuto una giornata divertente? Hai mai fatto cazzate da morire dalle risate?

				Bene! Sei nel posto giusto! Qui puoi condividere le tue esperienze divertenti e leggere quelle degli altri. Le cazzate vengono votate dagli utenti e ogni settimana viene scelta la migliore.


				Cosa aspetti? Leggi, racconta e DIVERTITI :)</p>
			</div>
			<div id="bot_rosso"></div>
		</div>
		<div id="c_ar">
		<div id="top_ar"></div>
		<div id="ar_bg">
		</div>
		<div id="bot_ar"></div>
		</div>
	</div>
</div>
<div id="cont_ultime">
	<div id="c_ultime">	
		<div id="top_ultime"><div style="float:right; margin-top:17px;margin-right:10px;">[img]img/feed.png[/img]</div></div>
		<div id="ultime_bg">
<?php
$lettura_risultati=mysql_query("select id, titolo, autore, substring_index(cazzata, ' ', 30) as tre_cazzata, date_format(data_inserimento, '%d/%m/%Y - %H:%i:%s') as data_formattata from cazzate order by data_inserimento desc limit 0,3")or(die(mysql_error()));
if(mysql_num_rows($lettura_risultati)>0){
while($scatola_temporanea=mysql_fetch_array($lettura_risultati)){
$id=$scatola_temporanea[id];
$titolo=$scatola_temporanea[titolo];
$autore=$scatola_temporanea[autore];
$testo_cazzata=$scatola_temporanea[tre_cazzata];
$data_inserimento=$scatola_temporanea[data_formattata];
echo "<table border=\"0\">
      <tr><td><a href=\"http://condividicazzate.altervista.org/leggi.php?numero=$id\">$titolo</a></td><td align=\"right\">$autore - $data_inserimento</td></tr>
      <tr><td colspan=\"3\">$testo_cazzata ...</td></tr>
		</table>";
}
}
?>

		</div>
		<div id="bot_ultime"></div>
	</div>
</div>

Con IE visualizzo tutto perfettamente, con firefox come potete vedere no, potete indicarmi una soluzione valida per entrambi?? grazie

**fraermejo** · 23-06-2009, 17:08

scusate ho risolto con un clear: both;

Discussione: problema visualizzazione firefox

Strumenti discussione

Ricerca discussione

Visualizza

problema visualizzazione firefox

Permessi di invio