problema di visualizzazione solo con firefox

**stellare21** · 02-09-2008, 21:18

Ciao a tutti, ho un problema con il mio sito (www.legapeligna.altervista.org)
infatti se si collega un utente con un browser explorer va tutto liscio, se invece si collega un utente con firefox, la disposizione grafica del sito diventa un casino, sembrerebbe un problema di div, ma questo lo lascio dire da qualcuno di voi sicuramente più esperto di me. La cosa ke non riesco a spiegarmi è perchè io che uso firefox 3 vedo bene il sito e gli altri no? in questo modo non riesco neanche a fare vari tentativi per risolvere il problema proprio xkè a me non me ne da.
il sito in html è formato in sequenza da un header centrato in alto, un frame di sinistra, un frame di destra e poi il body questo è il codice spero che qualcuno sappia aiutarmi:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<title>Legapeligna 4°edizione fantacalcio abruzzo</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div id="container">

<div id="header">
<div id="headleft">
<h1> [img]images/logo.gif[/img] LegaPeligna
<span style="color:#66CCFF">IV°edizione</span></h1>
<h2>Il fantacalcio più famoso e bello della Valle Peligna.</h2>
</div>
<div id="headright">
<div id="logininfo">Home | contatti | Aiuto


</div>
</div>
</div>







<div id="content">

<div id="leftcontent">
<div class="navigation">
<h1 class="navhead">Menù principale</h1>
<ul class="menu">
<li class="current">Forum[*]Edizioni[*]Premi[*]<a href=regolamento.html>Regolamento</a>[/list]
</div>

<div class="navigation">
<h1 class="navhead">Stagione 08/09</h1>
<ul class="menu">
[*]Calendario[*]<a href=#>Classifica</a>
<ul>[*]classifica generale[*]classifica andata[*]classifica ritorno[*]classifica neutro[/list]
[*]Formazioni[*]Squadre[*]Coppa
<ul>[*]Gironi[*]Fase finale[/list]
[/list]
</div>



<div class="navigation">
<div class="navhead">Banner</div>
<script type="text/javascript">
//<![CDATA[
document.write('<s'+'cript type="text/javascript" src="http://ad.altervista.org/js.ad/size=120X600/r='+new Date().getTime()+'"><\/s'+'cript>');
//]]>
</script>

</div>



</div>



<div id="rightcontent">


<div class="box">
<h2 class="boxhead">Attenzione</h2>


<span class="right"> [img]images/attenzione2007.gif[/img]</span> Sito in versione <strong class="imp">beta[/b], appena possibile sarà disponibile la versione completa del sito. Ricordiamo che la pagina avvisi non è più presente, tutte le news saranno inserite direttamente nell'homepage.</p>
</div>


<div class="box">
<h2 class="boxhead">Ultima notizia inserita</h2>
<h3 class="newsdate">31/08/2008:</h3>
Disponibile da oggi sul forum, la guida per il calciomercato della Legapeligna valido
per la stagione 2008/09, tutti sono vivamente invitati a prenderne visione, e a inviare
email con eventuali domande se qualcosa non è ben chiara.
</div>


<div class="box">
<h2 class="boxhead">Link utili</h2>
<ul class="sponsors">[*]Gazzetta dello sport[*]Lega calcio[*]Fantacalcio kataweb[/list]
</div>


<div class="box">
<h2 class="boxhead">Sponsors</h2>
<ul class="sponsors">[*]Sponsor 1[*]Sponsor 2[*]Sponsor 3[*]Sponsor 4[/list]
</div>

<div class="box">
<h2 class="boxhead">Statistiche sito</h2>
<div class="boxpad">
<h3>Tot Visite anno: 5.793</h3>
<h3>Tot Viste del mese: 30</h3>
<h3>Pagina più vista: formazioni</h3>
<h3>Browser più usato: [img]images/explorer.png[/img]</h3>
<h3>dati aggiornati al:</h3>
<div class="postfooter"> <span class="date">1 SETT 2008</span></div>
</div>
</div>

<div class="box">
<h2 class="boxhead">Sito compatibile</h2>
<div class="boxpad">
<h3>[img]images/explorer.png[/img]
explorer 6.x e 7.x</h3>
<h3>[img]images/opera.png[/img]
Opera 9.x</h3>
</div>

</div>

</div>


<div id="midcontent">

<h1 class="posthead">Benvenuti Alla nuova stagione della legapeligna</h1>




<h1 class="posthead">Informazione</h1>
<div class="postcontent">
<h2>Partecipate al forum!</h2>


<span class="left">[img]images/forum.gif[/img]</span>
Partecipate al nostro forum! Dite la vostra, create sondaggi, fate i vostri pronostici,
divertitevi e scherzate assieme a tutti gli altri partecipanti, ricordiamo che per il
momento la GAZZETTA della Legapeligna è on-line solo sul FORUM, esprimete i vostri
commenti e giudicate gli articoli scritti!</p>

<div class="postfooter"> Vai sul forum! Partecipa ai sondaggi!<span class="date">Lunedì 1 settembre 2008</span> </div>
</div>



<h1 class="posthead">Avviso!</h1>
<div class="postcontent">
<h2>Disponibile la guida per il calciomercato</h2>


<span class="left">[img]images/logo.gif[/img]</span>
Disponibile da oggi sul forum, la guida per il calciomercato della Legapeligna valido
per la stagione 2008/09, tutti sono vivamente invitati a prenderne visione, e a inviare
email con eventuali domande se qualcosa non è ben chiara.[/b]</p>

<div class="postfooter"> Guarda la guida<span class="date">Domenica 31 agosto 2008</span> </div>
</div>



<h1 class="posthead">Avviso!</h1>
<div class="postcontent">
<h2>Problemi di visualizzazione con firefox</h2>


<span class="left">[img]images/firefox3.png[/img]</span> E' stato rilevato che il nuovo sito della Legapeligna, da problemi di visualizzazione con i browser mozilla firefox, ci scusiamo per il disagio, stiamo cercando di rimediare al problema, ricordiamo che con il browser explorer o opera non si ha alcun problema.[/b]</p>

<div class="postfooter"> <span class="date">Sabato 30 agosto 2008</span> </div>
</div>



<h1 class="posthead">Avviso!</h1>
<div class="postcontent">
<h2>Mercato chiuso!</h2>


<span class="left">[img]images/attenzione2007.gif[/img]</span> Si è chiuso il mercato della Legapeligna, ricordiamo che potete visionare gli scambi, nella sezione dedicata al forum dove c'è il riepilogo di tutte le operazione effettuate e nelle pagine personali delle singole squadre. La possibilità di acquistare e fare scambi si avrà alla prossima sessione di calciomercato, prevista per fine settembre inizio ottobre. </p>

<div class="postfooter"> Guarda il riepilogo degli scambi <span class="date">Sabato 30 agosto 2008</span> </div>
</div>



<h1 class="posthead">Informazione</h1>
<div class="postcontent">
<h2>Formazioni on-line</h2>


<span class="left">[img]images/formazioni.jpg[/img]</span>
In rete le formazioni valide per la prima giornata di campionato, potete visualizzare tutti gli schieramenti nella pagina "formazioni".</p>

<div class="postfooter"> Guarda le formazioni<span class="date">Sabato 30 agosto 2008</span></div>
</div>




<h1 class="posthead">Avviso!</h1>
<div class="postcontent">
<h2>Disponibile la pagina "aiuto"</h2>


<span class="left">[img]images/aiuto.jpg[/img]</span> Attenzione è on-line da oggi la pagina "aiuto", consigliamo vivamente tutti i partecipanti a prenderne visione, in questa pagina troverete tutte le informazioni fondamentali per il corretto invio della formazione, ricordiamo che un invio irregolare della formazione comporta il suo annullamento!</p>

<div class="postfooter"> Guarda la pagina aiuto<span class="date">Giovedì 28 agosto 2008</span> </div>
</div>



</div>
</div>


<div id="footer">
<h2><strong class="imp">Attenzione questa è la versione BETA [/b]</a>

&copy; 2008 Legapeligna | Design by Fabiowebm</h2>
</div>
</div>

 <script src="http://stat.superstat.info/counter.php?user=16305"> </script>

</body>
</html>www.legapeligna.altervista.org

**rebelia** · 02-09-2008, 21:23

quel che devi postare e' il file main.css e per cortesia usa il tag [code ](qui inserisci il codice)[ /code]

ti sposto nella sezione dei css

**stellare21** · 02-09-2008, 21:43

codice:

*{margin:0; padding:0; border: 0;}
html, body {height:100%}
body {
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	text-align: center;
}
a, a:visited {
	text-decoration: none;
	color: #0066CC; 
	background: inherit;
}
a:hover {
	color: #FF3300;
	background: inherit;
	text-decoration: underline;
}
h1, h2, h3, h4, h5 {
	font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
	font-weight: Bold;
	padding: 3px 0 0 0;	
}
h1 {
	font-size: 140%;
}
h2 {
	font-size: 125%;
	color: #006699;
	margin-bottom: 3px;
}
h3 {
	font-size: 95%;
	color: #666666; 
}
h4{
	font-size: 85%;
	color: #999999;
}
h5{
	font-size: 80%;
	color: #6699CC;
	text-transform: uppercase;
}
img{
	border: 0px;
	background: transparent;
}
#container{
	width: 802px;
	text-align: left;
	margin: 0px auto;
	border: 1px solid #1e5589;
	padding-left: 1px;
}
#content{
	width:100%;
	padding-top: 5px;
}

#rightcontent{
	display:inline /*Fix IE floating margin bug*/;
	padding-right: 3px;
	padding-bottom: 1px;
	width: 155px;
	float: right;
	overflow:visible !important /*Firefox*/; 
	overflow:hidden /*IE6*/;
}

#leftcontent{
	display:inline /*Fix IE floating margin bug*/; 
	padding-left: 3px;
	width: 155px;
	float: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	overflow:visible !important /*Firefox*/; 
	overflow:hidden /*IE6*/;
}
#midcontent{
	display:inline; /*Fix IE floating margin bug*/; 
	margin:0 0 0 5px;
	width: 475px;
	float:left;
	text-align: justify;
	overflow:visible !important /*Firefox*/; 
	overflow:hidden /*IE6*/;
}
#header{
	margin-top: 1px;
	height:115px;
	width:800px;
	background: #003366 url(images/header.jpg);
	font-family: "MS Serif", "New York", serif;
 }
 #headbottom h1{
 	padding: 20px 0 0 50px;
	font: bolder 3.1em 'Trebuchet MS', Arial, Sans-serif;
	text-transform: uppercase;
	background: url(images/mapleaf.png) no-repeat left;
	color: blue;
}
#headleft{
 	width: 570px;
	background: transparent;
 	float: left;
}
#headright{
 	width: 220px;
	padding: 5px 5px 0 0;
	background: transparent;
	float: right;
}
#header #headright #logininfo{
	padding-top: 7px;
	color: white; 
	font: bolder 8.0pt 'Trebuchet MS', Arial, Sans-serif;
	text-decoration: none;
	text-align: right;
}
#header #headright #logininfo a{
	color: #81A7C4;
	text-decoration: none;
}
#header #headright #logininfo a:hover{
	color: White;
	text-decoration: underline;
}
#header #headleft h1{
 	padding: 20px 0 0 25px;
	font: bolder 2.6em 'Trebuchet MS', Arial, Sans-serif;
	color: White;
}
#header #headleft h2{
 	padding: 32px 0 0 25px;
	color: #03477C; 
	font: bolder 1.2em 'Trebuchet MS', Arial, Sans-serif;
	text-decoration: none;
}
.inputtext{
	color: #003366;
	height: 20px;
	line-height: 20px;
	padding: 0 3px;
	background: url(images/textboxbg.jpg) repeat-x;
	border: 1px solid #A4C9E0;
	float: right;
	margin-right: 3px;
}
.inputbutton{
	height: 22px;
	border: 0;
	padding: 0 2px;
	background: #034f8a url(images/buttonbg.jpg) repeat-x;
	color: White;
	float: right;
	font-weight: bold;
	font-size: 10px;
}
.navigation{
	width:152px;
	border: 1px solid #81A7C4;
	margin-bottom: 3px;
}
.navhead{
	background: #427BA6 url(images/navhead.jpg) repeat-x;
	height: 23px;
	padding: 1px 0 0 5px;
	margin-bottom: 1px;
	font: bold 1.3em Verdana, 'Trebuchet MS', Sans-serif;
	color: White;
}
.menu {
	width: 150px;
	padding: 0 1px 0 1px;
	font-size: 1.2em;
}
.menu li {
	margin-bottom: 1px;
	list-style-type: none;
	white-space: nowrap;
}
.menu li a {
	font-weight: bold;
	text-decoration: none;
	color: #3399CC;
	display: block;
	height: 20px;
	line-height: 20px;
	padding: 0 0 0 8px;
	background: #81A7C4 url(images/menubg.jpg) repeat-x;
}
.menu li a:visited {
	color: #3399CC;
}

.menu li a:hover {
	background: #3399CC;
	color: White;
}

.menu li a:active {
	background: #034f8a;
	color: White;
}
.menu li ul{font-size:1em; font-weight:normal;background: #3399CC;}
.menu li ul li{margin:1px 0 1px 15px;}
.menu li ul a{
	font-weight:normal;
	background: White url(bulletlist.gif) no-repeat 2px center; 
	border: 1px solid #BDDFFF;
	padding-left: 10px;
}
.menu li ul a:hover{
	background: #3399CC;
	border: 1px solid #3399CC;
}
blockquote {
	margin: 5px 0;
	padding: 5px 5px 5px 30px;
	border-top: 1px solid #BFE0FF;
	border-bottom: 1px solid #BFE0FF;
	background: #F0F5FF url(quote.gif) no-repeat 5px 5px;
	text-align: justify;
}
p {
	padding: 5px;
}
.box{
	width:152px;
	margin-bottom: 5px;
	border: 1px solid #81A7C4;
	padding: 0 0 5px 0;
	display: block;
}
.boxpad{
	padding: 0 5px 0 5px;
}
.boxhead{
	height: 23px;
	line-height: 23px;
	padding: 1px 0 0 5px;
	margin-bottom: 1px;
	border-bottom: 1px solid #81A7C4;
	color: #006699;
}
.newsdate{
	padding-left: 5px;
}
.news{
	display: block;
	padding-left: 5px;
	padding-right: 5px;
}
.newsfooter {
	margin: 0 5px 10px 5px;
	font-size: 90%;	
	text-align: right;
}
.newsfooter .newsmore {
	background: url(images/morenews.png) no-repeat left center;
	padding: 0 0 0 15px;
	text-align: right;
}
.posthead {
	height: 22px;
	line-height: 22px;
	padding: 0;
	padding-left: 17px;
	background: #FAFAFA url(images/bullettitle.gif) no-repeat 2px center;
	border-top: 1px solid #BFE6FF;
	border-bottom: 1px solid #BFE6FF;
	color: #006699;
}
.postcontent {
	padding: 5px 5px 10px 5px;
	text-align: justify;
}
.postfooter {
	background-color: #FAFAFA;
	padding: 3px 5px; 
	margin: 0 5px 10px 5px;
	border: 1px solid #f2f2f2;
	font-size: 90%;	
	text-align: right;
}
.postfooter .readmore {
	background: url(images/page.gif) no-repeat left center;
	padding-left: 20px;
}
.postfooter .comments {
	background: url(images/comment.gif) no-repeat left center;
	padding-left: 20px;
	margin-left: 10px;
}
.postfooter .date {
	background: url(images/clock.gif) no-repeat left center;
	padding-left: 20px;
	margin-left: 10px;
}
.coode {
  padding: 5px;
  margin: 0 0 10px 0;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 1em 'Lucida Console', 'courier new', monospace ;
  background: #FAFAFA;
  border: 1px solid #f2f2f2;
  white-space: pre;
}
.unlist{
	padding: 0 0 0 5px;
	font-size: 0.8em;
}
.unlist li{
	list-style: none;
	margin: 0 0 0 5px;
	padding-left: 12px;
	background: url(images/arrowpixel.gif) no-repeat 0px 2px;
}
.unlist li ul li{
	list-style: none;
	margin: 0 0 0 5px;
	padding-left: 12px;
	background: url(images/arrowpixel.gif) no-repeat 0px center;
}
.unlist li a{
	background: none;
	font-weight: bold;
}
.unlist li ul li a{
	background: none;
	font-weight: bold;
}
.ollist{
	padding: 0 0 0 5px;
	font-size: 0.8em;
}
.ollist li{
	list-style-type: decimal;
	margin: 0 0 0 25px;
}
.ollist li a{
	font-weight: bold;
}
.deflist{
	margin:0 0 0 10px;
	font-size: 0.8em;
}
.deflist dt{
	padding:0 0 0 12px;
	background: url(images/arrowpixel.gif) no-repeat 0px 50%;
	text-decoration:none;
}
.deflist dd{
	margin:0 0 0 10px;
	padding:0 0 0 12px;
	background: url(images/arrowpixel.gif) no-repeat 0px 50%;
	text-decoration:none;
}
.deflist dd a, .deflist dt a{
	background: none;
	font-weight: bold;
}
.left{
	float: left;
	padding: 2px 8px 2px 2px;
}
.right{
	float: right;
	padding: 2px 2px 2px 8px;
}
.center{ 
	display: block;
  	text-align: center;
  	margin: 0 auto;
	padding: 3px 0 3px 0;
}

div.colwrap{
	padding:0 5px 5px 0;
	display: inline-block;
}

.colleft{
	float:left;
	width: 45%;
	margin-bottom:5px;
}
.colmiddle{
	float:left;
	width: 25%;
	margin-left: 10px;
	margin-bottom:5px;
}
.colright{
	float:right;
	width: 25%;
	margin-bottom:5px;
}
.adverts{
	list-style: none;
	text-align: center;
	margin: 5px 0 0 0;
}
.adverts li{
	margin-bottom: 3px;
}
.sponsors{
	list-style: square;
	margin: 0 0 0 25px;
	color: #0099CC;
}
.loginform {
	margin: 5px 0 5px 0;
}
.loginform label {
	font-weight:bold;
	margin:5px 0;
	color: #333333;
}
.loginform input {
	padding: 0 3px;
	border:1px solid #B4D6E6;
	background: url(images/textboxbg.jpg) repeat-x;
	height: 20px;
	width: 90px;
	line-height: 20px;
}
.loginform input.button { 
	height: 24px;
	border: 0; 
	background: #034f8a url(images/buttonbg.jpg) repeat-x;
	color: White;
	font-weight: bold;
	margin-top: 5px;
	width: 70px;
}

.foorm {
	border: 1px solid #B4D6E6; 
	background-color: #FAFAFA;
	margin: 5px 0 5px 0;
}
.foorm label {
	display:block;
	font-weight:bold;
	margin:5px 0;
	color: #333333;
}
.foorm input {
	padding: 0 3px;
	border:1px solid #B4D6E6;
	background: url(images/textboxbg.jpg) repeat-x;
	height: 20px;
	line-height: 20px;
}
.foorm select {
	border:1px solid #B4D6E6;
	width: 100px;
}
.foorm textarea {
	width:95%;
	padding:2px;
	border:1px solid #B4D6E6;
	height:100px;
	display: inline;
	margin: 0 0 5px 0; 
}
.foorm input.button { 
	height: 24px;
	border: 0; 
	background: #034f8a url(images/buttonbg.jpg) repeat-x;
	color: White;
	font-weight: bold;
}
table {
	margin: 5px; 
	border-collapse: collapse;
	border: 2px solid #EBEBEB;
}
th {
	padding-right: 12px;
	padding-left: 12px;
	background: #3399CC;
	height: 25px;
	text-align: left;
	border: 1px solid White;
	margin-bottom: 1px;
}
tr {
	height: 25px
}
td {
	padding-right: 8px; 
	padding-left: 8px; 
	border: 1px solid White;
}
tr.rowlight {
	background: #FBFBFB;
}
tr.rowdark {
	background: #D1CCBF;
}
.dropcap
{
	float: left;
	width: .7em;
	font-size: 4em;
	line-height: 75%;
	color: #3399CC;
	font-family: "Times New Roman", Times, serif;
}
.clear{
	clear: both;
}
.clearwrap{
	clear: both;
	margin: 0;
}
.gallery{
	padding: 5px;
	display: inline-block;
}
.gallery a {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
/*	border: 1px solid #ccc;
	background: #E6E6E6;*/
	background: #FAFAFA;
	border: 1px solid #BFE6FF;
}
.gallery a img {
	display: block;
	padding: 5px;
	width: 65px;
}
.imp {
	font-size: 0.8em;
	color: red;
}
#footer{
	clear: both;
	width:800px;
	height: 100px;
	background: url(images/fotter.jpg);
	text-align: right;
}
#footer h2{
	padding: 70px 10px 0 0;
	color: white; 
	text-decoration: none;
   font: bold 8.0pt Tahoma, Arial, Helvetica;
}
#footer a{color: #81A7C4; background-color:inherit; font-weight:bold;}
#footer a:hover{color: White; background-color:inherit;}

**stellare21** · 03-09-2008, 11:23

nessuno mi può aiutare?

**Mich_** · 03-09-2008, 11:44

Premetto che non ho letto il codice (troppo lungo).

Pero` per l'esperienza maturata in questo forum, posso intuire che hai due problemi:
1. fare una pagina che segua gli standard
2. adattare POI la pagina alle esigenze dei vari IE (che notoriamente non seguono gli standard ma possiedono i "commenti condizionali" per le correzioni a loro riservate)

Scambiare l'ordine porta ai risultati che hai visto.

Dal mio punto di vista, conviene anche usare la DTD XHTML Strict, che dimezza circa le correzioni da apportare ad IE6 e IE7; questo comporta fare pagine corrette e standard, ed usare i validatori.

PS: per tutti i termini che non riuscissi a capire, ci sono i tutorial del sito HTML.it, e i "link utili" di questo forum.

**ArteMultimedial** · 21-11-2011, 11:54

E' un post decisamente vecchio rispondo comunque in quanto qualcuno potrebbe capitarci come me alla ricerca di soluzioni che ho trovando facendo prove.

Sembra ci sia un problema con vecchie versioni di firefox sui commenti html

codice:

Se guardate l'immagine:

potete osservare che (anche nelle nuove versioni al momento) nel sorgente viene segnato commento tutto ciò che segue a cosa che non dovrebbe essere.. Se nelle nuove versioni il sito viene comunque visualizzato bene nelle vecchie lo considera commento e non lo visualizza.

Forse non era neppure questo caso, ma ci potrebbe essere qualcuno che è alla disperata ragione del perché alcuni non vedono parti del suo sito..

**ldetomi** · 21-11-2011, 12:32

Strano, non mi è mai capitato.....

Discussione: problema di visualizzazione solo con firefox

Strumenti discussione

Ricerca discussione

Visualizza

problema di visualizzazione solo con firefox AIUTO!

Questo è il CSS

Permessi di invio