Problema con i div

[federcla]

Ciao a tutti.

Ho inserito 3 div in cascata verticale, la mia idea è quella d'inserire un'immagine nel 1° e nel 3° div, il problema è che nel 1° non rispetta le dimensioni dell'immagine, praticamente è come se la ridimensionasse lasciando uno spazio bianco subito sotto. Non riesco a capire qualè l'errore.

Ciao e grazie per l'aiuto.

[indigoindigo]

Posta il link alla pagina oppure il codice...

[federcla]

il codice che ho usato è questo

[CSS]
#contenitore
{
border: 1px solid #000;
margin-left: 10px;
width: 130px;
height: relative;
}
#tit
{
background-image: url(img/tf.jpg);
background-repeat: no-repeat;
width: 125px;
height: 5px;
}

#base
{
background-image: url(img/bf.jpg);
background-repeat: no-repeat;
width: 125px;
height: 5px;
}

#corpo
{
background-image: url(img/sf.jpg);
width: 125px;
height: 1px;
}
[/CSS]

   <div id="contenitore">
           
           <div id="tit"></div>
           <div id="corpo"></div>
           <div id ="base"></div>
           
           <div id="tit"></div>
           <div id="corpo"></div>
           <div id ="base"></div>
           
           <div id="tit"></div>
           <div id="corpo"></div>
           <div id ="base"></div>
   </div>

questo è il risulatato:

[federcla]

Praticamente inserisce uno spazio vuoto dopo la prima immagine.

Ciao e grazie per l'aiuto.

[indigoindigo]

what is this?

 height: relative;

???

non esiste!

magari è questo che dà fastidio..usa auto o % o em o px!!!

[federcla]

Boh credo di averlo letto da qualche parte, cmq anche modificando l'altezza con un valore in px non cambia nulla, continua a lasciarmi uno spazio.

[Mich_]

Ci sono altri errori nel codice HTML.
Gli id devono essere nomi unici all'interno di una data pagina.
Stai usando gli id come se fossero classi.

Inoltre prova a dare
padding:0; margin:0; border:0;
a tuttii blocchi

[federcla]

ho provato ad inserire i padding:0; margin:0; border:0; ed ho dato nomi diversi ai vari div, il risultato non cambia.

[federcla]

anche se il div e l'immagine hanno la stessa altezza, cioè 5px l'immagine occupa la metà del div e poi è come se si attaccasse alla parte alta del div.