Help needed with lightbox

JavaScript
1

Hi all,

I have used a lightbox on a website but it is not working correctly. When you click on an image it looks like it’s adding padding or something to it.

The link to the page is here
http://www.test.gfemassage.co.uk/rooms.html

Thanks
Janice

2

That sounds odd, so let’s check things out.

Remove the lightbox script and the image padding still occurs. The lightbox is not causing the problem.

When does the problem occur? Only when the mouse is held down on the image. As soon as you let go of the mouse, the padding returns to normal.
Is it the styles? Remove the styles and the problem goes away. It’s a CSS problem now.

What can we chop away from the CSS that might quickly get us to the root cause of the problem. Active pseudo classes? Eureka! It’s their styling causing the problem. Specifically, the following CSS declaration:

#navigation li:last-child a:hover, a:active {
    background-color: #ddd;
    color: #2e2e2e;
    width: 80px;
    padding: 6px 31px;
}
3

Thank You :slight_smile: