Plaatje voor link krijgt paars randje.

[KREEFTMEIJER]

Het paarse randje is alleen zichtbaar bij Internet Explorer , niet bij Firevox, maar bij beide zie je een wit streepje.
Het geheel is hierdoor 4px groter geworden.
Vraag 1, hoe krijg ik dat randje weg.
Vraag 2, kan het witte randje een andere kleur krijgen bij mouse-over en weer een andere kleur als de grote
foto rechts getoond. wordt.
www.cinemashop.nl

Henk Kreeftmeijer

 

[csshunter]

Hoi Henk,
De hele dunne witte verticale lijntjes aan de linkerkant komen door de witte background van die kolommen.
Als je dit doet:

#leftContent {
    ...
    background: red;
    }

... zie je ze duidelijker: ze zitten ook aan weerszijden links en rechts van de img-vierkantjes.

• Oorzaak: de #leftContent is 192px breed, de images zijn 190px breed, en die staan horizontaal gecentreerd. Dus links en rechts komt er net 1px achtergrondkleur te zien.
• Weghalen: de #leftContent ook op 190px breedte zetten, of de background op de kleur van de pagina-background zetten.

De paarse randjes zijn de standaard link-randjes die sommige browsers (of browser-versies) toevoegen aan een image-link.
Wil je die weghalen, dan doe je:

#leftContent a img {
    border: 0;
    }

Maar wil je juist wel een randje bij hoveren, dan moeten de images 2px minder hoog en 2px minder breed worden gemaakt.
Vervolgens zet je er een wit randje van 1px omheen voor de normale toestand, dat wordt veranderd in een gekleurd randje voor de hover-toestand:

#leftContent a img {
    border: 1px solid white;
    }
#leftContent a:hover img {
    border-color: green;
    }

Met vriendelijke groet,
CSShunter

 

[KREEFTMEIJER]

Hallo CSS Hunter,
Hartelijk dank voor je snelle reactie.

Ik begrijp op welke plaats de veranderingen plaats moeten vinden.
De images randen weggelaten zijn nu 170 x 158, wil nu met

border: 10px solid white;[/QUOTE rondom 10px wit , totaal breedte is dan weer 190px.
Dit lukt niet,bij de css blijft

#leftContent a img {

blauw in plaats van rood/paars.
Is dat misschien de oorzaak ??

Henk

 

[csshunter]

Ah, het is in principe in orde, maar er zit een accolade op de verkeerde plaats in je css, waardoor het niet werkt.
Er staat nu:

#leftContent {
width: 190px;
float: left;
background-color: a5d6de;
padding: 0px;
margin-right: 0px
#leftContent a img {
    border: 10px solid white;
    }
#leftContent a:hover img {
    border-color: green;
    }




}

Dat moet zijn:

#leftContent {
    width: 190px;
    float: left;
    background-color: a5d6de;
    padding: 0px;
    margin-right: 0px;
    }
#leftContent a img {
    border: 10px solid white;
    }
#leftContent a:hover img {
    border-color: green;
    }

 

[KREEFTMEIJER]

Alles opgelost, grandioos.

Had het inmiddels zelf ook ontdekt.

Nogmaals wederom,
Hartelijk dank,

Henk