Posizionamenti relativi e assoluti

[Ocerusico]

Salve a tutti.
Cerco di spiegarvi in maniera comprensibile il mio problema. Sto costruendo una pagina che contiene una serie di link a degli album fotografici. Questi link contengono un'immagine, il nome ed una descrizione dell'album. Il markup in sosatnza è questo:

  <div id="content"> 
   <h1>Galleria foto</h1> 
   <div class="slot"> 

[ ..qui inizia la struttura che si ripete.. ]

    

<a href="?p=foto&amp;id=25" class="album_cover"> 
     <span> 
      [img]files/test/4637118.jpg[/img]" alt="Nome album 2" /> 
     </span> 
     Nome album 2

 
     1 foto

 
      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
      
    </a></p>

[ ..altri link identici nella struttura.. ]

   </div>
  </div>

Lo span che contiene l'immagine mi serve per fare una sorta di crop: in pratica ha position:relative e l'immagine al suo interno è ridimensionata e posizionata in maniera assoluta con valori top e left negativi (ottenuti tramite php) in maniera da mostrare la parte centrale dell'immagine.
Questo è la parte del css interessata:

#content {
  position:relative;
  z-index:10;
  background:#f00;
  }
  
#content h1 {
  margin:0 8px 20px;
  padding:0 10px 2px;
  text-align:right;
  background:#0f0;
  } 
  
.slot {
  width:100%;
  overflow:hidden;
  margin-bottom:20px;
  background:#0f0;
  }
 
.slot p {
  margin:0 8px;
  background:#afc;
  }

.album_cover {
  width:100%;
  overflow:hidden;
  float:left;
  margin-bottom:20px;
  color:#000;
  background:#ff0;
  }
  
.album_cover span {
  width:250px;
  height:200px;
  float:left;
  position:relative;
  overflow:hidden;
  margin-right:10px;
  border:1px solid #00f;
  }
    
.album_cover span img {
  position:absolute;
  border:0;
  }

ed ecco il problema: con chrome,ff,opera e ie >= 7 tutto ok, con ie6 (e chi sennò) no. posto le immagini per cercare di spiegare bene il problema:

chrome:


ie6:


c'è una soluzione? (possibilmente che non sia rifare tutto)
scusate la lunghezza, ma non sapevo come spiegarlo più brevemente

[Mich_]

Anzitutto quando posti qui lascia stare il linguaggio lato server (PHP) che crea confusione e impedisce di capire cosa succede: posta piuttosto il codice HTML che arriva al browser (e sul quale si deve poi basare il CSS).

Poi dal punto di vista semantico io vedo una lista di oggetti, ma non vedo nel codice HTML niente che si riferisca alla lista.
Io vedo dei titoli, realizzati tramite [b] (altro errore semantico nonche` uso di strutture deprecate)
Io vedo degli spazi realizzati con dei
(struttura deprecata e non-semantica).

E poi l'errore piu` grave in quel caso e` l'uso dei posizionamenti: hanno effetti collaterali difficili da gestire.

La struttura HTML deve diventare del tipo:

<ul> [*]
    [img]...[/img]
    <h2>nome album</h2>
    

descrizione</p>
  [*] ... ecc con quante ripetizioni vuoi[/list]

Dopo e` semplilce dare un float:left all'immagine, ed un clear alla fine del[*], come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float e/o link associati

[Ocerusico]

direi che allora è necessaria una revisione della struttura... grazie mille