Probleempje met Lightbox in HTML

Hallo mensen,

ik ben bezig met het maken van een website, en daarbij gebruik ik lightbox. Daarvoor heb ik een tutorial gevolgd, waar hier een voorbeeld van is weergegeven:

http://www.mijnhomepage.nl/lightbox/lightbox-voorbeeld.html

Je ziet dat er om de thumbnails geen rand zit, zoals het hoort. maar op mijn webpagina waar ik dat ook wil gebruiken, zitten er blauwe randjes omheen, zoals hier te zien is:



Ik heb echt geen idee hoe ik dit weg kan krijgen, doe ik iets verkeerd? zou iemand misschien weten hoe ik die blauwe randjes weg kan krijgen?

alvast bedankt voor de reacties

Deze css file moet je gebruiken om lightbox te gebruiken. er staat in de 3e regel het volgende:

#lightbox a img{ border: none; }

is dat niet hetzelfde?? of moet die border nog ergens anders staan?


#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; }

#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; }

wat werkt prima? in het voorbeeld van de link werkt het bij mij ook prima, in ie in firefox. het probleem zit in mijn eigen pagina, zoals in de afbeelding te zien is. zelfs als ik kies om een witte border te nemen, blijft hij blauw, echt raar.

ik weet niet hoe ik het wegkrijg.

als ik hem open in internet explorer, zit er een paarse rand omheen. In firefox een blauwe rand..

quote:

Op woensdag 5 mei 2010 20:29 schreef Tijn het volgende:
Dat is de CSS van de Lightbox zelf. Het probleem heeft niks met de Lightbox te maken, maar met het feit dat de gelinkte plaatjes op je website niet zijn vormgegeven. Je moet gewoon in "mijn.css" even typen:
[ code verwijderd ]

Dan is 'ie helemaal goed.

Dankje wel! de blauwe rand is nu weg

Topic kan gesloten worden