Problema di visualizzazione Lightbox in IE7 e Safari

Mich_Torr

Nuovo Utente
24 Apr 2009
6
0
0
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

Nuovo Utente
24 Apr 2009
6
0
0
Sono riuscito a rimediare nel .css della lightbox, inserendo:

Codice:
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ì:

Codice:
#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:

Codice:
<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.
 

Mich_Torr

Nuovo Utente
24 Apr 2009
6
0
0
Hey grazie! sono riuscito a risolre inserendo

Codice:
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
Y Problema visualizzazione PDF generato da fpdf PHP 1
M Problema visualizzazione colori in photoshop Photoshop 0
M [HTML] Problema visualizzazione immagini su dispositivi HTML e CSS 4
Antonio Nervi [Javascript] Problema visualizzazione banner accettazione cookies Javascript 6
A Problema visualizzazione photoshop elements 9 Photoshop 1
A [Javascript] Problema visualizzazione posizione corrente su mappa Javascript 2
A [PHP] Problema visualizzazione nome utente loggato su sito ecommerce PHP 23
fulviozecchin Problema Visualizzazione tabelle HTML nel Browser HTML e CSS 9
asevenx problema visualizzazione menu sovrapposto allo slider WordPress 7
N Problema visualizzazione dati dopo GET PHP 19
M Problema con visualizzazione immagini da BLOB PHP 1
D problema visualizzazione su smartphones Google AdWords 1
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
B Problema di visualizzazione di uno Slider in jquery jQuery 4
asevenx problema visualizzazione slider con firefox HTML e CSS 3
G Problema visualizzazione sito su iOS HTML e CSS 4
A problema slideshow con visualizzazione mobile HTML e CSS 6
steak Problema visualizzazione immagini su blog Tumblr HTML e CSS 2
N ciao a tutti ho un problema con la visualizzazione delle pagine in php PHP 1
D Problema visualizzazione oltre 50 record .... MySQL 2
andrea.peo Problema query con join visualizzazione record ripetuti PHP 5
R Problema di visualizzazione testo con google crome WordPress 1
P Problema visualizzazione immagine da database MySQL 3
S problema di visualizzazione PHP 7
A problema nella visualizzazione file caricato tramite ftp WordPress 0
Emix Problema visualizzazione pagina su host diversi HTML e CSS 3
asevenx problema visualizzazione sito su tablet e portatile PHP 1
A problema visualizzazione dati da tabella PHP 15
N Problema visualizzazione hyperlink con Google Chrome. HTML e CSS 2
S Problema visualizzazione HTML e CSS 5
M Problema visualizzazione codice sorgente altro sito PHP 4
S Problema visualizzazione chrome HTML e CSS 3
GoshMaledetto Problema valori giusti in array sbagliati in visualizzazione Javascript 2
Nicola Miceli Problema Visualizzazione pagina WP su Iphone Smartphone e tablet 0
S Problema visualizzazione codice PHP 4
M Problema visualizzazione immagine PHP 6
P Problema visualizzazione pulsanti dopo scroll jQuery 6
D Problema visualizzazione immagini png PHP 1
M problema di visualizzazione con FF ed Opera HTML e CSS 11
O Problema visualizzazione dati [era:Un problema] HTML e CSS 11
P Problema visualizzazione sito wordpress Content Management System (CMS) 2
A Problema estrazione e visualizzazione immagine da database PHP 16
L Problema visualizzazione immagini formato Tif [era: Formati Tif Problema?!] Windows e Software 1
S Problema permessi visualizzazione immagine PHP 1
S Problema visualizzazione lista amici PHP 6
G Problema visualizzazione immagini PHP 1
C Problema con visualizzazione dell'immagina da tabella database PHP 5
S Problema visualizzazione HTML e CSS 0
giancadeejay Intro flash,problema nella visualizzazione su sito Flash 2
A IE 8 problema visualizzazione e compatibilità Javascript 0

Discussioni simili