spazio tra box

[blueblue]

ciao a tutti,

ho questo codice:
...........
#top {width:500px; margin:0 auto; background-color:yellow;}
#top2 {width:500px; margin:0 auto; background-color:green}

#top p{margin:0;}
#top2 p{margin:0;margin-top:10px;}


<div id="top">

hello</p></div>
<div id="top2">

ciao </p></div>
...........

se uso IE6 ottengo cio' che voglio,ma con FF ho il seguente problema:

il colore di sfondo del secondo box (green) non copre tutta l'area del div. Se, sempre nel secondo box, imposto un border
allora tutta l'area del div e' green.

Come posso risolvere,
grazie.

[floyd46]

Scusa ma non è molto kiaro quello che vuoi ottenere da questi 2 div;
in pratica non sono altro che 2 rettangoli sovrapposti, con del testo al loro interno. Quindi?
ciao

[blueblue]

Originariamente inviato da floyd46
Scusa ma non è molto kiaro quello che vuoi ottenere da questi 2 div;
in pratica non sono altro che 2 rettangoli sovrapposti, con del testo al loro interno. Quindi?
ciao

scusa, mi sono spiegato male, per semplificare
qui ho messo un'immagine di quello che accade
con IE6 e Firefox:

http://web.tiscali.it/varwww/css/img.jpg

e qui la pagina html

http://web.tiscali.it/varwww/css/xxx.htm


Ciao.

[floyd46]

trovato!!

devi scrivere così:

#top2 p{
margin:0;
padding-top:10px;
}

in pratica il margin che hai dato al secondo box, fa si che lo stesso sia distaccato di 10px dal primo div.
Scrivendo come ho postato io, appaiono attaccati uno sotto l'altro.
ciao

[blueblue]

Originariamente inviato da floyd46
trovato!!

devi scrivere così:

#top2 p{
margin:0;
padding-top:10px;
}

in pratica il margin che hai dato al secondo box, fa si che lo stesso sia distaccato di 10px dal primo div.
Scrivendo come ho postato io, appaiono attaccati uno sotto l'altro.
ciao

ok, pero' mi sfugge qualcosa:
il padding-top:10px non e' il padding di P ?
Se io voglio spostare P di un certo margin-top rispetto
al DIV non devo usare proprio questa regola?

E poi, perche' se metto il border al div il problema si risolve?

Ciao.

[floyd46]

si, è il padding di p che devi settare e non il margin;
FireFox lo interpreta così; nn ci posso fare nulla io.
invece del margin, devi usare padding.

Per il border non ho provato; ho solo modificato il codice che ti ho scritto (che cmq funzia).
ciao

[blueblue]

ciao floyd46 e grazie per esserti interessato al mio problema.

Ti avevo accennato che col border il problema si risolve,
aggiungo che qualora non si voglia un border lo si puo' sempre
settare a trasparent.

Il tuo metodo risolve il problema, ma poi ne crea un altro
quando si vuole lo sfondo colorato di P diverso da quello di DIV.

Aggiungo che ho riscontrato lo stesso problema anche
con l'ultima versione di Opera.


Ciao.

[floyd46]

ciao
prova a seguire questo link:
http://www.extrowebsite.com/box.htm
prima di metterlo in rete l'ho provato con FireFox, Opera 7.54 ed IE 6.0. Come vedi il box inferiore (di colore green nel CSS ) è diventato di colore #ddd (così come dichiarato in #top2 p).

Forse non ho inteso bene io quale è il tuo problema.
Posta ancora se hai domande.
ciao