Missing Left Border (FireFox)

PhilCorleyPhoto

Just noticed this on odd images when displaying full screen - see https://www.philcorleyphotography.com/Portfolios/Scottish-Islands/i-gDSTV8t/A - the left border is missing on FireFox and also the Close button top left is mangled. Works fine on MS Edge.

Any idea how to fix this?

Thanks

Phil

Shinrya

On Safari and Firefox (Mac OS) your 'full screen' and 'close' button in the top right is mangled, with the two overlapping. Don't even see a full screen button in Chrome.

Shinrya

....side note, you have a damm fine portfolio of landscapes

Hikin' Mike

@Shinrya said:
On Safari and Firefox (Mac OS) your 'full screen' and 'close' button in the top right is mangled, with the two overlapping. Don't even see a full screen button in Chrome.

I'm going to guess this is an issue for SmugMug. I don't have any custom CSS for the 'Close' or 'Full Screen' icons like the OP and I don't see a Full Screen icon on Chrome either.

Hikin' Mike

@PhilCorleyPhoto said:
Just noticed this on odd images when displaying full screen - see https://www.philcorleyphotography.com/Portfolios/Scottish-Islands/i-gDSTV8t/A - the left border is missing on FireFox and also the Close button top left is mangled. Works fine on MS Edge.

Any idea how to fix this?

Thanks

Phil

What left border?

You can add margin-right: 100px to your existing CSS here:

.sm-user-ui .sm-lightbox-tools .sm-lightbox-expand::after {
    content: ' Full Screen';
    font-size: 80%;
    color: #f9f9f9;
    margin-right: 100px;
    }

PhilCorleyPhoto

@Shinrya said:
....side note, you have a damm fine portfolio of landscapes

Thanks Peter

PhilCorleyPhoto

@Hikin' Mike said:
What left border?

Hi Mike - if you look at the linked image, it has a white thin line around the image which on Firefox only has 3 sides - the left side is missing. On other images it is OK, but on the linked image it is missing. Maybe something to do with the image size, or something else - not sure, but looks wrong so hoping to fix it.

Phil

denisegoldberg

@PhilCorleyPhoto said:
...if you look at the linked image, it has a white thin line around the image which on Firefox only has 3 sides - the left side is missing. On other images it is OK, but on the linked image it is missing.

The border is present for me on all 4 sides on Firefox, running Windows 10 with latest Firefox version.

I just noticed if I resize the browser window that sometimes one or more of the border (sides) disappears. If I resize again the border reappears on all sides.

PhilCorleyPhoto

@denisegoldberg said:
I just noticed if I resize the browser window that sometimes one or more of the border (sides) disappears. If I resize again the border reappears on all sides.

Ah, yes resizing the browser window brings back the border - as you say sometimes Hmm, is this a Firefox problem or the CSS .....

Jtring

The CSS seems to be coming through. I'll guess SmugMug's choice of image window size (chosen for their basic lightbox display), your 85% scaling, and Firefox's implementation of the all the scaling (which includes rounding/truncating some fractional computed window sizes) in combination conspire to leave insufficient room for the enough room for the border. When I fiddle with the page using the Firefox developer tools, I see that if I up the border to 2px, then at least a 1px border appears. With that in place, however, I sometimes see a mix of one and two pixel borders as I flip through the images.

Hikin' Mike

I'm seeing all 4 sides using Windows 7, Chrome and Firefox. Resizing didn't drop a side.

AceCo55

Firefox 60.0.2 here
On 15.6" laptop screen ...
At 67% - all borders show
At 80% - all borders show
At 90% - right border missing
At 100% - left border missing
At 110% - all borders show
At 120% - left and bottom border missing
At 133% - bottom border missing

PhilCorleyPhoto

Thanks everyone; I think this is one of those things that will be too hard to fix, so will live with it.

PhilCorleyPhoto

Well fixed it in the end :-) Border problem fixed by going for a white background and dropping a border. The mangled buttons was fixed by tweaking the CSS code.