Margine superiore: difformita' fra IE e FF...

**danicotra** · 26-09-2006, 14:04

Avrei bisogno di aiuto...
Semplificando al massimo il mio problema:
ho creato due semplicissimi box utilizzando dei div...
Ecco il codice del CSS:

codice:

    BODY { background-color: #000000; color: #FFFFFF; margin: 0; }
    #div1 { background-color: #999999; margin: 10px; height: 200px; }
    #div2 { background-color: #FFFFFF; color: #000000; margin: 10px; height: 180px; }

Ed ecco il body dell'HTML:

codice:

  <body>
    <div id="div1">
      <div id="div2">IE ok , FF no</div>
    </div>
  </body>

Ora, purtroppo, in IE il risultato e' quello desiderato, un box bianco all'interno di uno grigio su sfondo nero, mentre in FF il box bianco e' incollato alla parte superiore di quello grigio...
Sembra che il margine superiore non sia correttamente interpretato da quest'ultimo browser...
Come mai?
Probabilmente sara' un errore banalissimo (?) ma io proprio non riesco a venirne a capo...

Mi aiutate, please?

Grazie!!!

Ciao, Dan.

**Mich_** · 26-09-2006, 15:12

Il selettore BODY potrebbe non venir intrpretato, dato che non esiste il tag <BODY>.
Prova ad usare correttamente le minuscole.

**danicotra** · 26-09-2006, 16:05

Ho provato a seguire il tuo suggerimento ma come mi aspettavo:
body o BODY il risultato non cambia
(nel body la cosa che definisco e' fondamentalmente lo sfondo...)

Allego una immagine per rendere subito visibile quale e' il problema che mi sta facendo disperare...

**Mich_** · 26-09-2006, 16:32

Hai fatto bene ad allegare l'immagine.
... sei sicuro di non aver confuso? (scusa della apparente sfiducia, ma sul forum si impara a non credere a nessuno)

La cosa mi lascia molto meravigliato. E` la prima volta che sento una cosa del genere.
Ti consiglio comunque di passare la validazione di HTML e CSS (tanto per escludere altri errori che potrebbero ripercuotersi su quel blocco).

Invito anche altri a fare alcune prove.

**danicotra** · 26-09-2006, 19:21

Originariamente inviato da Mich_
Hai fatto bene ad allegare l'immagine.
... sei sicuro di non aver confuso? (scusa della apparente sfiducia, ma sul forum si impara a non credere a nessuno)

La cosa mi lascia molto meravigliato. E` la prima volta che sento una cosa del genere.
Ti consiglio comunque di passare la validazione di HTML e CSS (tanto per escludere altri errori che potrebbero ripercuotersi su quel blocco).

Invito anche altri a fare alcune prove.

Scusa ma non capisco proprio cosa posso aver confuso.

Il problema e' reale.
L'immagine che ho allegato e' stata ottenuta componendo degli screen shoot del documento aperto prima in IE6 e poi in FF1.5... NON CI SONO TRUCCHI!

Sarei contento

anch'io se cose del genere non capitassero ma, per quanto ne so, purtroppo

e' la prassi trovarsi a dover gestire problemi di incompatibilita' fra browser quando si realizzano (o perlomeno si intende realizzare) layout "cross-browser" interamente mediante CSS.

Ad ogni modo ti ringrazio per il tempo che mi stai dedicando.
Ho validato il documento ed il CSS con i validatori W3C e, a parte qualche warning del tutto trascurabile, tutto ok.

E intanto...

:master:

Se qualcuno avesse del tempo per provare e vedere con i propri occhi, di seguito riporto integralmente il codice del documento in cui, per comodita', ho incluso anche i CSS:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
  <title>prova</title>
  <style type="text/css">
    body { background-color: #000; color: #FFF; margin: 0; }
    #box1 { background-color: #999; margin: 10px; height: 200px; }
    #box2 { background-color: #FFF; color: #000; margin: 10px; height: 180px; }
  </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2">IE6 ok , FF1.5 no ... PERCHE'?!?</div>
    </div>
  </body>
</html>

Sarei grato se qualcuno mi desse la dritta giusta per venirne a capo...

CIAO!!!

**Mich_** · 27-09-2006, 09:13

Il validatore in effetti la accetta, ma c'e` un errore:

Non si puo` inserire il testo direttamente dentro un <div>. Occorre inserire il testo in un tag tipo

o altro tag (<hX>,[*], ...).

Piu` tardi spero di avere il tempo di fare una prova anch'io

**edy72** · 27-09-2006, 10:54

credo che il tuo problema sia dovuto al margin-collapsing: cioè quando due elementi adiacenti in verticale hanno due margini questi non si sommano ma collassano in uno unico margine; da come mi sembra proprietà interpretata correttamente da Firefox e non da I.E.

una possibile soluzione può essere di separare i due margini, ad esempio con un padding, in modo da far cessare il meccanismo di margin-collapsing

es.

codice:

  
<style type="text/css">
    body { background-color: #000; color: #FFF; margin: 0; }
    #box1 { background-color: #999; margin: 10px; height: 199px; padding-top:1px;}
    #box2 { background-color: #FFF; color: #000; margin: 10px; height: 180px;}
  </style>

ciao!!

**danicotra** · 27-09-2006, 11:53

CIAO edy72!!!

Ma sei un mito!!!

Ti dico una cosa:
Mi sono appena collegato perche' stamattina per puro c*lo ho cambiato involontariamente il CSS relativo al #box1 (volevo modificare quello del #box2) in questo modo per vedere che succedeva:

codice:

#box1  { background-color: #999; margin: 10px; height: 200px; padding-top: 10px; }

Ho visto poi che qualcosa di buono

stava accadendo ed ho modificato in questo modo:

codice:

#box1  { background-color: #999; margin: 10px; height: 200px; padding-top: 0.1px; }

e MERAVIGLIA DELLE MERAVIGLIE...

L'ho imbrogliato, ho pensato...

Ora mi fiondo sul forum di html.it e dico a tutti come ho risolto con questo, ripeto, gran colpo di c**o!!!

Ma, con mia graditissima sorpresa, ho visto che TU hai risposto ed hai risolto il problema, tra l'altro adducendo tutte le motivazioni e spiegazioni tecniche del caso...

Ribadisco, SEI UN MITO !!!

GRAZIE INFINITE!!!

Finalmente posso andare avanti... :rollo:

Ascolta, pero', una cosa sola adesso...
meglio "1px" o va bene "0.1px" come dimensione???

(io vorrei la minore possibile che mi permetta di lasciare cmq il margine visibile...)

CIAO!!

**edy72** · 27-09-2006, 12:28

meglio "1px" o va bene "0.1px" come dimensione???

(io vorrei la minore possibile che mi permetta di lasciare cmq il margine visibile...)

sinceramente non ho mai usato come unità di misura pixel con numeri decimali, però a occhio 0.1px mi sembra la soluzione migliore, meglio che comunque fai un paio di test con Firefox e I.E.

ciao!

OT
I veri miti del forum sono altri :-) ....
oltre ai moderatori direi Pierofix, thomas_anderson, andrea.paiola ... e qui mi fermo per non adare troppo off-topic ... comunque ci sarebbe da aprie un thread apposito

**danicotra** · 27-09-2006, 15:59

Le prove le avevo gia' fatte e funziona, te l'ho detto!!!

-ot-
Per il discorso di miti:
Sono iscritto da poco al forum di html.it, non conosco ancora nessuno ma spero di conoscerli in caso di bisogno... (oddio, di solito preferisco essere io d'aiuto perche' vuol dire che i problemi non sono miei...

)
Tu sei stato il primo a darmi la risposta ad un problema che mi stava facendo impazzire... ed in breve tempo

(una cosa a cui non sono abituato)... per questo la mia manifesta gratitudine!

Sono iscritto ad un altro forum (non dico quale) di solito le mie domande non trovano risposta... (problemi troppo specifici o inusuali? boh... :master:

)
Fatto sta' che, ho pensato, cerchero' aiuto su html.it sono sicuro che un riferimento cosi' importante per il web italiano e' frequantato da professionisti o cmq gente + in gamba di me che mi possa dare una mano...
Mi sono deciso, ho effettuato l'iscrizione ed, infatti: problema risolto.

Grazie ancora!

Ciao, ciao. D.

Discussione: Margine superiore: difformita' fra IE e FF...

Strumenti discussione

Ricerca discussione

Visualizza

Margine superiore: difformita' fra IE e FF...

body o... non body...

margin-collapsing

!!!

Re: !!!

Permessi di invio