margin-top di firefox

**cerba** · 07-08-2006, 00:07

Ciao,
ho un prob da diverso tempo con il margin-top di firefox.
Che io sappia, un blocco "ragiona" con la modalità "parent" cioè nel caso in cui io voglia dare 100px di margin-top al blocco "uno", lui si sposterà di 100px rispetto al suo prossimo genitore, giusto?
Firefox invece quel 100px lo intende prendere dal body. Sballandomi tutti i piani.
Chi ha ragione?
Ho riassunto così i 2 blocchi..
#tutto {height:750px;width:700}
#uno{margin-top:100px}

Chi mi aiuta?
1000 Thanks

**Mich_** · 07-08-2006, 10:44

Posta anche il codice HTML (e il DOCTYPE). Iproblema potrebbe essere nel non corretto innestamento dei tag.

**cerba** · 07-08-2006, 12:34

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />

<link rel="stylesheet" type="text/css" href="1.css" media="screen" />
</head>
<body>

<div id="cont">
<div id="sopra">
<h2>STORIA</h2>

<h2>AMICI</h2>
<h2>DOWNLOAD</h2>
<h2>FOTO</h2>
<h2>GUESTBOOK</h2>
<h2>SCRIVI</h2>
<h2>RADIO</h2>
<h2>TV</h2>

</div>

<div id="dentro">

<h1>DOWNLOAD</h1>
Da oggi puoi scaricare tutti
i filmati e le foto dei personaggi

<h1>SPETTACOLI</h1>
Da oggi puoi scaricare tutti
i filmati e le foto dei personaggi

<h1>STORIA</h1>

Da oggi puoi scaricare tutti
i filmati e le foto dei personaggi

[img]images/radio.gif[/img]

[img]images/personaggi.gif[/img]

</div>
<div id="sotto">

<h2>STORIA</h2>
<h2>AMICI</h2>
<h2>DOWNLOAD</h2>
<h2>FOTO</h2>

<h2>GUESTBOOK</h2>
<h2>SCRIVI</h2>
<h2>RADIO</h2>
<h2>TV</h2>
<h2>GUESTBOOK</h2>
<h2>SCRIVI</h2>
<h2>RADIO</h2>
<h2>TV</h2>
</div>

</div>

</BODY>
</HTML>
e css:

body{height:100%;background:#000;font: 0.8em arial;word-spacing: -0.1em;margin:0px}

#cont{width:700px;height:840px;border:0px;margin:0 px;background-image: url(images/minatori-sfondo.jpg);text-align:center; margin:auto}

#sopra{color:#fff;width:700px;float:right;margin-top:100px;text-align:right;}
#sopra a{font:0.8em arial ;color:#fff;text-decoration:none}
#sopra a:hover{color:#fFFF00}
#sopra h1{color:#0066FF;background:#FFFF00;width:100%}
#sopra h2{display:inline;text-align:right; }
#sopra h2 a{font:10pt arial,,tahoma;margin-right:5px;
text-decoration:none;color:#FFFFCC;margin-top:30px;}
#sopra h2 a:hover{color:#FFFF00}

#uno{color:#fff;height:150px;width:150px;margin:le ft;margin-top:200px}

#due{color:#fff;height:150px;width:150px;margin:le ft}

#tre{color:#fff;height:150px;width:150px;margin:le ft}

#quattro{color:#fff;float:left;height:150px;width: 150px}
#dentro{margin-top:100px;height:610px;color:#99CCFF;font-style

blique;text-align: left}
#dentro h1{margin:0px}
#dentro h1 a{font:14pt arial,,tahoma;letter-spacing: -0.2em;text-decoration:none;color:#fff;margin-top:30px;font-weight:bold}
#dentro h1 a:hover{color:#FFFF00}

#sotto{color:#fff;width:700px;float:right;}

#sotto h2{display:inline;text-align:right; height: 30px}
#sotto h2 a{font:10pt arial,,tahoma;margin-right:5px;
text-decoration:none;color:#FFFFCC;margin-top:30px;}
#sotto h2 a:hover{color:#FFFF00}

thanks a lot!!!!

**Mich_** · 07-08-2006, 13:52

Non e` facile seguire il codice: per inserire il codice esistono gli appositi VBCode: [ code ] e [ /code ]: in tal modo preservi la formattazione e la lettura risulta piu` semplice.

Il nome del file .css non risulta conforme alle specifiche, ma noncredo sia quello il problema.
Piuttosto credo ci sia un problema di somme:

1) body e` alto 100%, cont e` alto 700px: cosa succede se non ci sta? Dovresti gestire esplicitamente l'overflow.

2) cont e` alto 700px; sopra e` alto 100xp piu` il suo contenuto; dentro e` alto 710px; sotto avra` una sua altezza. E chiaro che la somma di sopra+dentro +sotto supera di gran lunga i 700px.
E` vero che sopra e sotto sono float, ma non c'e` lo spazio in larghezza per renderli flottati, per cui devono stare tutti uno sotto l'altro.

**cerba** · 07-08-2006, 23:00

Ma lo sai che mi hai dato un idea? Ho infatti levato il blocco contenitore e vualà...il trucco è servito!
Come dice L'autore di Constile, bisogna sempre fare le cose più semplici......(anche se non è sempre facile..)
Una curiosità: potresti spiegarmi meglio il concetto di code di cui sopra o linkarmi qualcosa?
Thanks

**Mich_** · 08-08-2006, 09:18

Originariamente inviato da cerba
Una curiosità: potresti spiegarmi meglio il concetto di code di cui sopra o linkarmi qualcosa?

Clicca sul bottone # sopra l'area di inserimento del modulo di risposta.

**cerba** · 08-08-2006, 09:56

Grazie, ma ti devo rompere per questa questione del margin-top che comunque non sono riuscito a risolvere.
Mi spiego meglio: ho il blocco UNO con dentro il blocco DUE.
Il blocco due vorrebbe posizionarsi a 100px dal top del blocco UNO ma facendo così (almeno su FF) mi si allunga anche quello Uno

codice:

uno{width:500px;height:500px}
due{width:300px;height:300px}

Ti ringrazio..

**Mich_** · 08-08-2006, 10:33

Devo confessare che questa rigidita` non mi piace. Poi l'utente cambia le dimensioni del font e salta tutto (potrebbe diventare illeggibile).

Comunque dato il codice HTML:

codice:

<div id="uno">
  <div id="due">
    

qui ci va qualcosa</p>
  </div>
</div>

Puoi definire il CSS:

codice:

#uno {
  width: 500px;
  height: 500px;
  background-color: red;
}
#due{
  width: 300px;
  height: 300px;
  background-color: #ccf;
  margin: 100px 100px auto auto;
}

Nota il # davanti ai nomi degli identificatori nel CSS.

Discussione: margin-top di firefox

Strumenti discussione

Ricerca discussione

Visualizza

margin-top di firefox

arrivano!

ok

Re: ok

ok

Permessi di invio