Problema didascalia immagine allineata al margine inferiore

[slashIT]

Ciao a tutti ragazzi. Ho un problema enorme che mi sta rodendo da ormai alcuni giorni. Chiedo aiuto a voi perché non ne genio a capo.

il mio intento è creare una struttura generata dinamicamente come in fig1 che abbia una fotografia con alla base un link con una didascalia in trasparenza.

fig1


Il problema è che la didascalia non ne vuol sapere di essere allineata al fondo dell'immagine, al bordo inferiore come in fig1.
L'allineamento errato che esce fuori è in fig2.

fig2


Se seleziono con firebug tutto il tag[*] ed il suo contenuto si vede chiaramente in fig3 che l'immagine (contenuta nel primo <a>)è riconosciuta dentro al listato mentre la didascalia (contenuta nel secondo <a class="desc"…) non rientra nelle dimensioni del box!

fig3


la struttura generata dinamicamente porta questo codice HTML

<div id="pop" style="display: block;">
  <ul>[*]
      [img]...[/img] 
      Dai vita ai tuoi dati
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      [*]
      [img]...[/img] 
      Documentario su Albe Steiner
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      [*]
      [img]...[/img]Esperimento 
      Exp
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      
      <li style="border-bottom: 0px none;">
      [img]...[/img] 
      Newsmap: spazio alla visualizzazione
      <span class="meta"></span>
      <div style="clear: both;"></div>
      
      [/list]
</div>

e questo CSS

 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}

#tabs .inside ul {
display:block;
list-style-type:none;
min-height:285px;
}

ol, ul {
list-style:none outside none;
}

#tabs .inside li {
cursor:default;
display:block;
float:left;
height:75px;
margin:5px 10px;
padding:0;
width:130px;
}

#tabs #tagcloud, #tabs .inside li {
font-family:Georgia,serif;
padding:10px;
text-shadow:none;
}

#tabs .inside li a {
color:#555555;
font-weight:bold;
left:0;
position:relative;
text-shadow:none;
}

a:link, a:visited {
color:#999999;
text-decoration:none;
text-shadow:0 -1px 1px #000000;
}

#tabs .inside li img.avatar, #tabs .inside li img.thumbnail {
float:left;
}

.desc {
background:none repeat scroll 0 0 #DDDDDD;
font-size:10px;
font-style:italic;
opacity:0.8;
padding:1px;
position:relative;
width:138px;
z-index:100;
}

[LaboratorioCSS]

Ciao, prova in questo modo:

<div id="pop">
  <ul>[*]
          [img]nomefile.jpg[/img]s
          Documentario su Albe Steiner
          <div style="clear: both;"></div>
      [*]
          [img]nomefile.jpg[/img]
          Documentario su Albe Steiner
          <div style="clear: both;"></div>
      [/list]
</div>

<style type="text/css">
body{
	font-family:Georgia,serif;
	font-size:12px;
	font-style:oblique;
}

#pop ul li{
	width:200px;
	height:100px;
	position:relative;
	list-style:none;
	margin-bottom:5px;
}

#pop ul li img{
	border:none;
}

#pop ul li a.desc{
	width:190px;
	position:absolute;
	left:0px;
	bottom:0px;
	color:#333;
	background:#ccc;
	text-align:center;
	opacity:0.8;
	padding:5px;
}	
</style>

ovviamente poi lo adatti alle tue esigenze