CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Enzo
Enzo

Reputation: 143

Border Around IMG

I've been looking for answers, but everything I could find does not seem to fix my problem.

I have a jQuery carousel that lazy-load images on demand (Slick Carousel). My problem is that when you're sliding the images, a thin grey border appears around the img placeholder (most of all on chrome and webkit browsers, but sometimes in firefox with a dotted line). When you click anywhere on the screen, the lines disappear, but if you continue sliding they come around each image.

I've set CSS properties border and outline to 0 and none, I tried to disable the lazy-loading to have a src too, but nothing seemed to make the little border disappear.

Does anyone know how to get rid of it?

I have attached two screenshots, one with the lines and one without them (After clicking in the background, they disappear):

with lines without lines

Upvotes: 0

Views: 203

Answers (2)

Enzo
Enzo

Reputation: 143

I got inspiration when writing this, so I checked the issues in the GitHub page of the slider and found this:

https://github.com/kenwheeler/slick/issues/1636

putting outline:none; in the corresponding container fixes it.

Thanks also to Thomas Landauer, haven't I checked the GitHub issues, your answer would have definitely put me in the right direction.

Upvotes: 0

Thomas Landauer
Thomas Landauer

Reputation: 8355

This is the border for the active link element. Quick & dirty solution: Listen for the click event, then focus() on something else.

Upvotes: 1

Related Questions