height del container (strane visualizzazioni)

[silvia.c]

Ciao a tutti,

sto sperimentando un po' e facendo una homepage ecco che mi imbatto in un comportamento assai strano dell'altezza del container!

A questa pagina vedete il risultato:

http://www.4artweb.com/testing/test.htm

questo è il codice:

<div id="container">

<div style="position:relative; top:-80px; margin-right:15px; float:right; width:248px; height:390px; background-color:red;">
[img]images/PixelProva.gif[/img]
</div>


<div class="square" style="position:relative; left:67px; top:-100px; width:216px; height:205px; background-colorrange;">
[img]images/PixelProva.gif[/img]
</div>


<div class="square" style="position:relative; left:-49px; top:-103px; width:139px; height:210px; background-color:green;">
[img]images/PixelProva.gif[/img]
</div>


<div class="square" style="position:relative; left:-50px; top:15px; width:110px; height:124px; background-color:blue;">
[img]images/PixelProva.gif[/img]
</div>

<div class="square" style="position:relative; left:57px; top:-164px; width:70px; height:70px; background-color:black;">
[img]images/PixelProva.gif[/img]
</div>

</div>

invece questo è lo stile che ho usato:

body
{
width: 90%;
margin: 0px;
padding-left: 50px;
text-align:center;

}

div#container
{
width:580px;
height:290px;
border:2px solid #339933;
background-image: url(images/sfondo.gif);
margin-top: 110px;
margin-right: auto;
margin-left: auto;
text-align:left;

}

.square
{
margin: 0px;
padding: 0px;
float: left;
}


p{
font:100.01% verdana,sans-serif;
line-height: 25em}

Con IE il "container" scende fino al margine basso della pagina anche se gli ho dato l'altezza di 300px.

Con Mozilla il "container" si comporta bene ma mi appare cmq la barra di scorrimento verticale anche se in realtà non c'è nessun oggetto così in basso.

Ho fatto mille prove ma non riesco proprio a capire!

Qualcuno mi sa dare una mano?
Grazie!!!

[Yappy]

Prova ad installare ed usare il DOM Inspector di Mozilla per controllare gli elementi e le loro caratteristiche.

Ci deve essere un problema di ereditarietà.

Ciao,
Banda Bassotti

[lorenzos]

Secondo me ti fregano le posizioni assolute (se ho capito il tuo problema).

[silvia.c]

ottimo strumento il DOM di mozilla! purtroppo però non mi ha aiutato anche perchè con mozilla vedo tutto perfettamente.

E' quel maledetto di IE!!!! :master:

ho fatto un po' di prove togliendo spostando mettendo etc. sembra che il box che da problemi sia quello rosso: anche da solo crea il problema al container!

è come se ha un margin-bottom impostato, non so, il div si prende + spazio di quello che gli definisco io e il container si allunga invece di restare fermo a 290px di altezza!

Ho usato tutte position:relative... cos'è ho scoperto un nuovo bug!? aiutoooo!!!!