Incognita CSS

[thunderlips]

Ciao a tutti. Ho riscontrato un problema abbastanza "antipatico" usando un layout a colonna singola con i CSS.

Praticamente il mio layout è composto da Intestazione + barra di navigazione, entrambe incluse in un <div> chiamato header, un div di nome container che ha al suo interno il div content (che mostra il contenuto delle pagine) e il div footer. Le pagine sono composte, in base alla sezione, da un filmato Flash o da semplice e puro codice HTML come ad esempio:

<ul>
	[*]Primo elemento[*]Secondo elemento[/list]
</p>

Per i filmati Flash c'è soltanto il tag <object> anziché il



Premetto che lavoro su Mac e non ho ancora avuto modo di testarlo su PC, però la cosa strana è che su Explorer vedo tutto tranquillamente a posto, su Mozilla e Opera è tutto a posto fino a che visualizzo i filmati Flash, quando visualizzo soltanto il codice HTML mi visualizza uno spazio di circa 15 pixel tra l'header e il container/content...

Di seguito il mio file CSS:

.temp#normal_text{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.temp#background{
	background-color: #000000;

}

.temp#table_bg{
	background-color: #FFFFFF;
}

/*
	LAYOUT CSS
*/

html,body{
	margin: 0;
	padding:0
}

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 76%;
	text-align: center;
	background-color: #CCC
}

div#container{
	background-color:#FFF;
	width: 1005px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	top: 0px;
}

div#header{
	background-color:#CCC;
	color: #ff0;
}

h1,h2{
	margin: 0;
	padding: 0;
}

h1{
	padding-left:0.5em;
	font: bold 2.3em/80px arial,serif;
}

h2{
	color: #999;
	font-size: 1.5em;
}

div#footer{
	text-align:center;
	padding: 0em;
    color: #000;
}


div#navigation{
	background-color:#CCC;
}

div#content{
	padding: 0;
	background-color: #FFFFFF;
	margin: 0;
}

div#content ul{
	left: 0px;
	top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF0000;
}

div#content li{
	list-style-type: square;
}


div#navigation ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

div#navigation li{
	display: inline;
	margin: 0 0 0 1em;
	padding: 0;
}

div#navigation a{
	color:#369;
	font: normal bold 1.2em/2.5em arial,sans-serif;
	text-decoration: none;
}

div#navigation a:hover{
	color: #fff;
	text-decoration: underline;
}

div#navigation a#activelink{
	color: #033;
	text-decoration: none;
}

Vi sarei grato se qualcuno fosse in grado di aprirmi gli occhi.

Grazie

[jesus]

Devi eliminare i margini dal tag p, nel div content:

div#content p {
  margin : 0;
  padding : 0;
}

[thunderlips]

Ti ringrazio, domani mattina provo a mettere in pratica il tuo consiglio e ti faccio sapere.

[thunderlips]

Ciao, ho seguito il tuo consiglio ma non è cambiato di una virgola, ti allego uno screenshot per farti capire cosa succede su Mozilla...

Ti ho evidenziato di rosso la parte che rimane "distaccata" dal resto, mentre dovrebbe essere tutto bianco allo stesso modo, dalla barra di navigazione contenuta nell'header al footer.

[Jerry Masslo]

non se abbia importanza ma non puoi mettere ul dentro p

[thunderlips]

Ho tolto il tag p ma non è cambiato assolutamente nulla!