Problema Galleria di Immagini in IE7

**alcio74** · 25-11-2008, 19:31

Salve a tutti.
Sono un PHPista intrippato con i layout fluidi ed i CSS che sta avendo un problema con un sito che sta sviluppando!
O meglio... tanto per cambiare ho un problema con Internet Explorer.

Ho una galleria di immagini dinamica (quindi non so in partenza quante foto verranno visualizzate in ogni pagina).
Essendo il layout completamente fluido, ho pensato di associare una distanza fissa tra ogni immagine e di mettere il tutto in un DIV il cui margine destro deve rimanere all'interno di un certo valore fisso, in quanto c'è una colonna con posizionamento assoluto proprio sulla destra.

Potete vedere quello che accade andando al seguente LINK.
Con Firefox 3, Opera 9.6, Google Chrome e Safari per Windows tutto funziona a dovere.
Con IE7, invece, le immagini superano il limite destro che ho imposto e vanno a finire sotto la colonna di destra, per cui sono non clikkabili.

Il CSS della galleria è il seguente.

codice:

/*  ####### GALLERIA FOTOGRAFIA #####  */ 
#fotogallery {
	width: auto;
	margin: 5px 245px 5px 10px;
	border: 0;	
}
.holder {
	width: 150px;
	height: 200px;
	margin: 10px;
	padding: 0;
	border: 1px dotted #349;
	font: normal 70% verdana,arial,sans-serif;
	color: #FC3;
	float: left;
	overflow: auto;
	text-align: center;
}
.holder img{
	margin: 5px auto;
	padding: 0;
	border:0;
}
.holder a, .holder a:hover{
	border: 0;	
}
.holder .testo{
	padding: 0;
	margin: 0 5px;
	text-align: left;
	border-top: 1px dotted #349;
	padding-top: 5px;
}

L'HTML non lo scrivo, tanto è possibile vederlo online.

Mi potete dare delle indicazioni per ovviare al problema con IE7??
Grazie

**alcio74** · 26-11-2008, 18:46

UP

**alcio74** · 26-11-2008, 20:26

UP

**alcio74** · 26-11-2008, 22:52

UP.
Nessuno riesce a darmi qualche dritta in merito???

**alcio74** · 27-11-2008, 01:37

UP

**Mich_** · 27-11-2008, 11:02

Posta anche la marcatura del pezzetto (il codice HTML, senza troppe ripetizioni, se ci sono, ma deve contenere il contenitore e almeno un elemento interno completo).
Serve inoltre il DOCTYPE che usi (IE risponde in modo diverso alle varie DTD).
In alternativa, posta un link alla pagina (anche di prova, in un posto provvisorio).

Devi anche dire se ti interessa il funzionamento in IE6.

**alcio74** · 27-11-2008, 14:30

Ho postato il link alla pagina, credevo bastasse per ricavarsi l'HTML e la DTD.
Ad ogni modo.
La DTD.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Il codice incriminato.

codice:

<div id="fotogallery">
  <h5>Ttitolo</h5>
  Breve testo
  <hr />
     <div class="holder">
       <a href="img/cartella/foto1.jpg" rel="lightbox" title="aaa">
        [img]img/cartella/th_foto1.jpg[/img]
       </a>
       <div class="testo">Testo  Immagine 1</div>
     </div>
     <div class="holder">
       <a href="img/cartella/foto1.jpg" rel="lightbox" title="bbb">
        [img]img/cartella/th_foto2.jpg[/img]
       </a>
       <div class="testo">Testo  Immagine 2</div>
     </div>
</div>

A riguardo della compatibilità con IE6 sono interessato.
Purtroppo non riesco a testarla qui da me perché una volta installata la versione 7 di IE non ho capito come avere anche la versione 6 installata contemporaneamente.

Per ora ti ringrazio.

**serialkiller** · 27-11-2008, 15:17

Per avere le versioni precedenti di IE contemporaneamente alla 7 vai qui:

http://browsers.evolt.org/?ie/32bit/standalone

E scaricati gli standalone.

Ciao

**Mich_** · 27-11-2008, 16:19

Scusa non avevo visto il link.

Comaunque il tuo codice HTML non passa la validazione di XHTML Strict. E quindi sistemare il CSS diventa complesso (in certi casi impossibile).

Vedi anzitutto di sistemare la marcatura:

codice:

<div id="fotogallery">
  <h5>Ttitolo</h5>
  

Breve testo</p>
  
     <div class="holder">
       <a href="img/cartella/foto1.jpg" rel="lightbox" title="aaa">
        [img]img/cartella/th_foto1.jpg[/img]
       </a>
       <p class="testo">Testo  Immagine 1</p>
     </div>
    ....
</div>

E probabilmente dovresti anche mettere il link al testo, inmodo che tutto ilriquadro sia un link:
<p class="testo">Testo Immagine 1</p>

Non avendo IE, non posso vedere il problema, ma potrebbe essere il raddoppio dei margini in presenza del float: se e` quello, ti basta aggiungere al .holder un pleonastico:
display: inline;
che non puo` avere effetto, dato che un float non puo` essere inline, ma evita il problema del raddoppio dei margini in IE.

Prova anche a togliere gli spazi prima del <DOCTYPE>: IE6 non interpreta il DOCTYPE se questo non e` all'inizio del file.

**alcio74** · 27-11-2008, 16:50

Originariamente inviato da serialkiller
Per avere le versioni precedenti di IE contemporaneamente alla 7 vai qui:
http://browsers.evolt.org/?ie/32bit/standalone
E scaricati gli standalone.
Ciao

Grazie per la segnalazione.
Provvedo subito a scaricare questi standalone!

Discussione: Problema Galleria di Immagini in IE7

Strumenti discussione

Ricerca discussione

Visualizza

Problema Galleria di Immagini in IE7

Permessi di invio