lightbox link

Jeg kalder billederne på denne måde:

<!-- Billede 1 -->
    <a class="href2" href="images/jato/800x600/002.jpg" rel="lightbox[jato]" title="Brændstof og batterier fra RCsiden.dk"><img src="images/jato/800x600/002.jpg" width="<?=$width?>" height="<?=$height?>" alt="" title="RCcruise.dk"/></a>

Dette vil få stregen til at forsvinde under thumbnail'en.

Hvis jeg så ændre i standarden for a:link til "border-bottom:none" så forsvinder stregen i det store billede, men hvor kaldes denne henne siden det virker??

Det medføre vel så at alle andre link heller ikke har den orange streg under sig, og det ønsker jeg ikke... Udelukkende når det drejer sig om billeder...

Det kan også være jeg skal ændre noget i det CSS som Lightbox kalder?

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



Jeg tænker om man så ikke skulle tilføje border-bottom: none; et eller andet sted? Jeg kan bar ikke finde ud af hvor...

Det er som om at den for-defineret href tæller højere end CSS dokumentet. Gør det det?

Jeg fatter ingenting lige nu.

Jeg er nu vendt tilbage til at kigge på jatobillede.php.

Jeg har slettet href2 og ændret den "alm" href til border-bottom:none. Nu burde der altså ingen orange streger være, da jeg har ændret definitionen helt. Det virker næsten på billederne, dog ser det ud til at der på enkelte af de 9 nærste thumbnails stadig er en orange streg.

Desuden er der stadig en orange streg under de normale links.... HVORFOR...

www.rcoffroad.dk/jatobillede.php

Hmm.. Jeg kører normalt med Firefox men ville lig teste med IE.. Og nu virker det som det burde...

Hvorfor virke det ikke i FF3? Er den orange streg hos jer andre som bruger FF3 eller er det kun hos mig?

Bar glem den sidste kommentar :-/

<ole>

Dine billeder ligger i hver sit link. Disse links har orange (#b71) borders. Da billederne bliver absolut positioneret, kollapser dine links og bliver til en streg under billederne  ;o)

/mvh
</bole>

Tak for dit svar !

Men hvorfor virker følgende så ikke?

a:link { color: #452; text-decoration:none; border-bottom: 1px solid #b71; padding:1px;}
a.href2:link { color: #452; text-decoration:none; border-bottom: none; padding:none;}

Og herefter kalde billederne sådan:

<a class="href2" href="images/jato/800x600/002.jpg" rel="lightbox[jato]" title="Brændstof og batterier fra RCsiden.dk"><img src="images/jato/800x600/002.jpg" width="<?=$width?>" height="<?=$height?>" alt="" title="RCcruise.dk"/></a>

Det ændre nemlig ikke (umiddelbart) noget... :-S

Hos mig er der ikke længere en orange streg under billederne. Nu kommer der tilgengæld en grøn boks om billederne - men den ser ud til næsten at kollapse i FF  :o|

- den grønne kant/streg kommer ved hover  =)

Hmm.

Jeg har kun gjort det med billede 1, alle andre billeder burde der være en orange streg under.
Men når jeg åbner billede 1 og får vist det stort er der alligevel en orange streg under...

Den grønne kant er meningen :-)

Men ser det ud til at kollapse i FF ? :-S

Men mener du forresten med det her:
Da billederne bliver absolut positioneret, kollapser dine links og bliver til en streg under billederne  ;o)

Hvordan skal jeg ellers gøre det?

- ja, nu er den orange streg tilbage ... og nej, det var alle dine billedlinks, du havde gjort noget ved før  =)

Formodentlig sætter dit script billedets position til absolute - men det er ikke til at vide med mindre man gider kikke script filerne efter i detaljen. Det gider jeg ikke med invalide script libraries

- et absolut positioneret element fylder ikke noget i dokumentets almindelige flow, hvorfor det omkransende element kollapser

Nu har jeg gjort følgende ved det første billede:


a:link { color: #452; text-decoration:none; border-bottom: 1px solid #b71; padding:1px;}
a.href2:link { color: #452; text-decoration:none; border-bottom: none; padding:none;}

Og herefter kalde billederne sådan:

<a class="href2" href="images/jato/800x600/002.jpg" rel="lightbox[jato]" title="Brændstof og batterier fra RCsiden.dk"><img class="link2" src="images/jato/800x600/002.jpg" width="<?=$width?>" height="<?=$height?>" alt="" title="RCcruise.dk"/></a>

Er de to class="link" placeret rigtigt?

Hvad skal jeg selv gøre for at ændre det så?

Som jeg nævnte før, består de JavaScript libraries, du bruger, af tussegammel og invalid kode - så personligt ville jeg aldrig bruge den løsning.

Derudover er der vist mere CSS, der sætter orange farve på links - f.eks:
    a:visited {color: #452; text-decoration:none; border-bottom: 1px solid #b71; }