Strano comportamento di un div interno ad un div quando uso margin-top

[NeroInferno]

Ciao a tutti!

Ho un div contenitore (div1) di un altro div (div2). Usando la proprietà margin-top nei css appare uno strano margine tra il div1 e il div precendete. Come e' possibile? Teoricamente se do il margine al div contenuto, non dovrebbe darmi un margine superiore tra il div contenuto e il div contenitore?

Grazie,
F.

ps. allego la schermata in dettaglio

[Myaku]

il codice?

[NeroInferno]

Codice HTML

	<div id="area">
	
		<div id="finestra"></div>
	
	</div>

Codice css

div#area {
	width: 619px;
	height: 361px;
	background: url('../IMG/area.gif') no-repeat;
	}
	
div#finestra {
	width: 570px;
	height: 300px;
	background-color: red;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px; /** qui toppa **/
	}

Grazie,
F.

[NeroInferno]

Ciao ragazzi,
forse sono impazzito..e' da molto che non tocco i CSS ma se div1 contiene div2 e applico un margin-top a div2, questo margine non dovrebbe non essere ereditabile dal genitore, div1?

In caso come faccio a applicare il margin-top solo a div2 per avere un margine tra div1 e div2?

Ho cercato nella sezione margin di w3schools.com ma nulla.

Grazie,
F.

[Mich_]

Sembrano cose assurde, ed in questo caso io sospetto sempre un errore da qualche (altra) parte.
Hai gia` fatto una validazione del codice HTML e CSS?
In quali browser hai testato?
Nel tuo codice il div interno e` vuoto. In tale condizione i browser possono ignorare il div completamente (compreso il CSS).

Puoi postare il link?

[NeroInferno]

Salve Mich,
non ho fatto nessuna validazione tranne quando ho letto il tuo post e..non c'e' nessun errore:
http://jigsaw.w3.org/css-validator/v...usermedium=all

il link temporaneo e':
http://www.mafarka.net/ALTRO/SPILLE/

Dimenticavo, testato su Firefox 2.0.0.10, mentre su IE non da' l'errore.

Lo so devo fare il preload delle immagini tramite CSS ma devo ancora capire come si fa

Grazie,
F.

[Myaku]

Originariamente inviato da NeroInferno
Salve Mich,
non ho fatto nessuna validazione tranne quando ho letto il tuo post e..non c'e' nessun errore:
http://jigsaw.w3.org/css-validator/v...usermedium=all

c'è nell'html. sistema intanto il doctype

tra l'altro, l'errore c'è anche su Opera

[Mich_]

Ci sono varie cose che non vanno, in quella pagina.
E salteranno fuori improvvise quando inizierai a metterci i contenuti.

Segnalo le piu` importanti:
- usi blocchi vuoti: i browser possono ignorare tali blocchi (saltarli completamente, compreso il CSS)
- usi sfondi che rendono rigido il layout: se uno ingrandisce i caratteri il layout crolla
- usi caratteri non permessi, tipo > : vanno sostituiti con le corrispondenti entita`
- usi tag non semantici (una lista va fatta con i[*], non con i <div>)
- hai sbagliato a dividere i blocchi, per cui pezzi del blocco superiore sono stati inseriti nelle immagini di sfondo del menu; usa invece immagini con sfondo trasparente, per i blocchi che stanno sopra
- parli di "preload degli sfondi CSS", e intanto hai fatto un lavoro inutile; non esiste il preload in CSS, esiste il modo di realizzare l'effetto hover mediante spostamento dello (stesso) sfondo: ci sono degli articoli su come fare (vedi ad esempio i link sotto).

La mia impressione e` che stai facendo il passo mooolto piu` lungo della gamba, e cosi` facendo inserisci degli errori senza rendertene conto. Dovresti (ri)leggerti con attenzione un tutorial CSS, specie negli ultimi capitoli.

Bottoni con rollover
Rollover creativi
Bottoni con rollover flessibili
Bookmark: rollover, sprites e menu