Lightbox nav icons in the wrong position

[Nightwing]

Hi from 11 degrees C totally pouring it down York, UK

On this page http://www.davidclick.com/clickimage.html and illustrated below ive been fighting to understand why I cant position the arrow navigation < > and cross X icons to position as they do in this tutorial when the image is zoomed on:
http://lokeshdhakar.com/projects/lightbox2/

My problem illustrated:

Before posting on here I was using chromes code inspector but I’m gutted i cant work out why I cant get the icons to sit as they do in:
http://lokeshdhakar.com/projects/lightbox2/

This row of icons has the code installed:

If anyone has time to look at this and offer a bit of CSS theory I’d v grateful,

Thanks,
David

[SamA74]

I don’t have a solution, but some help in identifying the problem. It’s not the close icon that is the culprit, it’s the outer container size.lb-outerContainer.
Its size should adjust to fit the photos dimensions. It does adjust, but incorectly. It actually shrinks every time you change photo (< & > buttons).
Looks like it’s setting the width right, but not the height.
The size of that container has a default values in the lightbox css, but that should get overridden by the js.
So I think it’s not a css problem, but a js one, the numbers the js it putting in the styles. Unfortunately I’m not too hot with js, but there are others who are.

Moved to JavaScript.

[PaulOB]

@SamA74

So I think it’s not a css problem

Yes it is a css problem Or rather it is a problem with the css and the way that the lightbox works. Not specifically CSS’s fault though.

The culprit is the max-height on the img tag which over-rides the height of the js.

Adding this code will fix the problem with the lightbox.

img {max-height: none!important;}
.lightbox img{margin-top:0}

However if max-height was important to other images on the page then you will need to add a class to them and target them that way instead.

[Nightwing]

Thank you @PaulOB and @SamA74

img {max-height: none!important;}
.lightbox img{margin-top:0}

Fixed the problem, wish i knew why but it works, yipee!

The culprit is the max-height on the img tag which over-rides the height of the js

Just wonder if it was this bit of code that was triggering the problem:

.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}

Thank you so much

[PaulOB]

@Nightwing

Just wonder if it was this bit of code that was triggering the problem:

If that was the only place that max-height was applied to an image then yes that would be the likely culprit. (I can’t remember where I saw it as that was yesterday and miles of code ago :))