Prob margin-top

[jackweb]

Salve a tutti.
Il problema è questo:
Ho un div contenitore con all'interno altri tre blocchi successivi uno sotto l'altro.
Dentro l'ultimo div (n.3) devo inserine un'ennesimo per poi mettere i contenuti.. però centrato verticalmente rispetto a questo.
Per farlo ho usato il margin-top di 1px...
Morale della favola su FF appena aggiornato, sottolineo aggiornato 3 gg fa, il margine mi ricade sul terzo blocco contenitore e si allontana di ben 1px dall n.2.
IE7 e IE6 tutto perfetto..
Sapete darmi una spiegazione a questo comportamento?
Mi sambra normale che se io imposto un margine supaeriore a un div non mi ricada sul padre ma rispetto a questo...las cosa mi stupisce.

Spero possiate darmi una delucidazione...

Grazie

[mucu]

non ti riesco a capire, poi mettere il codice o un link?

[jackweb]

Praticamente un box contenitore di 300px ha un div interno per i contenuti di 200px, a questo imposto un margin-top per abbassarlo di qualche px ma l'effetto del margine invece ricade direttamente sul contenitore...su firefox.
Comportamento anomalo secondo me...
IE 7/6 invece lo leggono bene.
Ora purtroppo ho un problema e non posso postare il codice ma lo farò più tardi, premetto che proprio per la tolleranza dei browser non ho usato nè bordi nè padding.

Grazie Mucu.

[Mich_]

Forse qualcuno dei blocchi interni e` flottante?

Un contenitore non-float non contiene i float (e` come se fossero su un piano diverso).

Puoi "chiudere" il float con un clear opportuno oppure puoi rendere float anche il contenitore.

[jackweb]

Grazie dell'idea Mich, di flottoante c'è solo il contenitore principale dei 3 div ove inserisco i contenuti.
L'architettura è complessa per evitare padding e border, ma nn i spiego il comportamento di FF.

Posto il codice:
I div incriminati sono area_testo_centrale e testo...il margine invece che applicarsi solo a testo FF lo applica ad area_testo_centrale.
Voelvo creare un effetto di bordo con 2 aree di colore diverse, una cosa semplice, almeno all'apparenza.

Grazie.


<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#contenitore {
height: 100%;
width: 100%;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#contenitoresito {
height: 600px;
width: 780px;
border: 0 0 0 0;
margin: 0 0 0 0;
}
#contenitore_superiore {
height: 300px;
width: 780px;
background-color: red;
border: 0 0 0 0;
margin: 0 0 0 0;
}
#contenitore_inferiore {
height: 300px;
width: 780px;
background-color: black;
border: 0 0 0 0;
margin: 0 0 0 0;
}
#contenitore_sup_sinistro {
height: 300px;
width: 140px;
background-color: yellow;
border: 0 0 0 0;
margin: 0 0 0 0;
float:left;
}

#contenitore_sup_centro {
height: 300px;
width: 500px;
background-color: blue;
border: 0 0 0 0;
margin: 0 0 0 0;
float:left;
}
#contenitore_sup_destro {
height: 300px;
width: 140px;
background-color: yellow;
border: 0 0 0 0;
margin: 0 0 0 0;
float:left;
}
#pubb {
height: 60px;
width: 140px;
background-color: green;
border: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}
#editoriale {
height: 60px;
width: 140px;
background-color: red;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#libreria {
height: 60px;
width: 140px;
background-color: #FF6600;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#flash_sin {
height: 120px;
width: 140px;
background-color: #FFCC00;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#esterni {
height: 60px;
width: 140px;
background-color: red;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#news {
height: 180px;
width: 140px;
background-color: #FFCC00;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#logo {
height: 80px;
width: 500px;
background-color: #FFCC00;
border: 0 0 0 0;
margin: 0 0 0 0;
display: block;
}

#link {
height: 30px;
width: 500px;
background-color: #66CCFF;
border: 0 0 0 0;
margin: 0 0 0 0;

}
#contenitore_link {
height: 15px;
width: 500px;
background-color: #66CCFF;
border: 0 0 0 0;



}
#area_testo_centrale {
height: 190px;
width: 500px;
background-color: #cccccc;
border: 0 0 0 0;

}
#testo{
height: 180px;
width: 480px;
background-color: white;
margin-top: 3px;

position: relative;
}


a.Stile2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-decoration: none;
}
.Stile3 {font-size: 12px}
-->

<div id="contenitore"align="center" >
<div id="contenitoresito" >
<div id="contenitore_superiore">
<div id="contenitore_sup_sinistro">
<div id="pubb">[img]img/home/banner.jpg[/img]</div>
<div id="editoriale"></div>
<div id="libreria"></div>
<div id="flash_sin"></div>
</div>
<div id="contenitore_sup_centro">
<div id="logo">[img]img/home/logo.jpg[/img]</div>
<div id="link">
<div id="contenitore_link">
chi siamo chalet locali altro contatti </div>
</div>
<div id="area_testo_centrale">
<div id="testo"> area posizionata male in FF </div>
</div>
</div>
<div id="contenitore_sup_destro">
<div id="pubb">[img]img/home/banner.jpg[/img]</div>
<div id="esterni"></div>
<div id="news"></div>
</div>
</div>
<div id="contenitore_inferiore"></div>
</div>
</div>

[Mich_]

Anzitutto vedo delle formattazioni HTML che possono contrastare con le formattazioni CSS.
E questo e gia` una cosa che non piace a FF.

Poi vedo una marcatura non corretta, con il testo inserito direttamente nel <div>. In qualche DTD e` accettata, ma e` bene rispettare il significato semantico e funzionale dei tag: questo semplifica la stesura del CSS.

Comunque l'errore e` usare un blocco posizionato all'interno di un blocco non posizionato.
Il position:relative del testo e` riferito al blocco posizionato superiore, saltando tutti blocchi intermedi non posizionati. Quindi nel tuo caso e` riferito al body.

Se vuoi usare i posizionamenti, devi conoscere per lo meno quanto contenuto in questi articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

[jackweb]

Risolto....
Ho sotituito il margin-top com position:relative top:3px
Era più semplice che mai, ma comunque il posizionamento di FF con il margin-top continuo a non capirlo...ed invece vorrei proprio capire il perchè!
Spero comunque che questo post possa venire utile a qualcuno.

Grazie a tutti.

[BaRaTTaMi]

ciao a tutti, forse qui si parla di quello che cerco io XD

su un div, come faccio ad applicare un margine a destra del testo? cioè io vorrei spostare il testo in un div di 10 px, come faccio? grazie

[bagu]

Originariamente inviato da BaRaTTaMi
ciao a tutti, forse qui si parla di quello che cerco io XD

su un div, come faccio ad applicare un margine a destra del testo? cioè io vorrei spostare il testo in un div di 10 px, come faccio? grazie

il testo starà logicamente in un paragrafo. Dai a questo

un margin-right. Mi pare di capire che in fondo non sia chiaro il concetto di div...