Problema di visualizzazione Lightbox in IE7 e Safari

[Mich_Torr]

Come da titolo, usando la Lightbox mi sono accorto che in IE7 le thumbnails hanno un bordo blu piuttosto vistoso che non riesco a togliere, mentre in Safari il bordo non appare. La visualizzazione perfetta è quella in Firefox che potete vedere a questo url http://michelangelo.altervista.org/immagini/la_baraonda/labaraonda.html e vorrei che fosse così anche in Safari e IE7.

Posto il .css della lightbox nel caso ci siano degli errori (in genere è la mancanza del tag img {border: none;}, ma come potete vedere l'ho inserito)

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox img {
border: none;
}

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif; base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


un grazie a chi mi aiuterà.

P.S. In IE8 il bordo blu non si vede, ma sono in tanti ad avere ancora la vers. 7 e quindi vorrei che il sito si vedesse bene anche per chi non ha ancora effettuato l'aggiornamento.

 

[Mich_Torr]

Sono riuscito a rimediare nel .css della lightbox, inserendo:

a:link { font-weight:bold; color:#ffffff; }
a:visited { font-weight:bold; color:#ffffff; }
a:hover { font-weight:bold; }
a:active { font-weight:bold; background-color:#ffffff; }

a questo punto il .css del lightbox (che ho chiamato lightbox.css) e diventato così:

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
a:link { font-weight:bold; color:#ffffff; }
a:visited { font-weight:bold; color:#ffffff; }
a:hover { font-weight:bold; }
a:active { font-weight:bold; background-color:#ffffff; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif; base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

In remoto funziona tutto perfettamente, ma online rimane ancora quell' odioso bordino blu (solo in IE però) ho pensato ad un problema di percorso, ma non credo.

In ogni caso stringa che richiama il .css del lightbox è questa:

<link rel="stylesheet" href="Gallery/lightbox.css" type="text/css" media="screen" />

	<script src="Gallery/js/prototype.js" type="text/javascript"></script>
	<script src="Gallery/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="Gallery/js/lightbox.js" type="text/javascript"></script>

Qualcuno può aiutarmi? Grazie.

 

[onebill964]

bordo lightbox

ciao prova inserendo nel css o nell'head :
a img{
border:none;}

 

[Mich_Torr]

Hey grazie! sono riuscito a risolre inserendo

a img {
	border: 1px solid #fff;
}
a:hover img {
	border: 1px solid #ccc;
}

nel .css, dopo svariati tentativi andati a vuoto, dovuti al fatto che sul server era rimasto il .css del vecchio sito, sul quale andavo a fare le modifiche, che ovviamente non veniva visto all'interno dell'HTML!