Border issue only shows up on some...

User 2659348 Photo


Registered User
98 posts

It has nothing to do with my project. This is happening before I can even get it into my project. The reason I wanted to share Ingers project file is so everyone could be clear on the fact that there is nothing else about MY project (some class or id or something) that could be causing it.
This is happening in the simplest, smallest version (Inger's project) and therefore I figured that's the best and easiest place to investigate it.

All I did to Inger's project was change the border of the main pics from double to solid and from 3px to 2px. And then on the modal I changed a bunch of stuff - but that shouldn't be affecting the main pictures.

Here is another screen shot with Inger's original pics (and none of my pics):
The gap is on every one of these pics. And if I drag my browser window smaller, the gaps move and appear on sides of the pics they didn't appear on before.
Attachments:
Knowing is half the battle
User 2699991 Photo


Registered User
3,706 posts
Online Now

Dis you remove the box shadow from the images, ?

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 2659348 Photo


Registered User
98 posts

yes
Knowing is half the battle
User 2659348 Photo


Registered User
98 posts

I forgot about that. Would that cause the issue?
I'm sure I changed the sizes of the images also.
Knowing is half the battle
User 2659348 Photo


Registered User
98 posts

When I open Inger's Original file (exactly as you can download it from Inger) and the ONLY change I make is to turn the border from double to solid, 3px to 2px, and border color to a dark color (leaving the box shadow and size and everything else) and then preview it - I see the gaps.

When I increase the border to 4px - no gaps. But 5,6,& 7px have gaps.
8px - no gaps.
9px - gaps again, etc., etc.

Again, this is with me changing NOTHING but the width, style, & color of the border.
Knowing is half the battle
User 379556 Photo


Registered User
1,242 posts

I see the effect on Chrome at wide viewports when the browser's zoom setting is greater than 100%. I checked this matter because I had seemingly terrible problems with IE11 until I discovered that it's zoom settings were persistent and not back to default when newly opening it for the web page in which I had set it. The trouble was that browser zooming can affect some elements more than others.

I find the same happens in Chrome.

Frank
User 2659348 Photo


Registered User
98 posts

Thanks Frank! Great point.
However, my browsers are all at 100% and I see the gap. When I reduce or enlarge my Chrome browser I still have the gap - except at 80%.

So far, best I can tell....Either its because it was created in SD3 and I'm modifying it in SD5, or something is wrong with my actual computer (if no one else can replicate it).

If anyone wants to try it, go to https://eikweb.com/sharing/ and download the Image Gallery (ZF) sd3-gallery.rsd and then change the image border from double to solid, change the size (px), and choose a darker color (since those are the only 3 things I'm doing before I see these gaps in the previews).
Knowing is half the battle
User 2699991 Photo


Registered User
3,706 posts
Online Now

Chris S Peterson wrote:
Thanks Frank! Great point.
However, my browsers are all at 100% and I see the gap. When I reduce or enlarge my Chrome browser I still have the gap - except at 80%.

So far, best I can tell....Either its because it was created in SD3 and I'm modifying it in SD5, or something is wrong with my actual computer (if no one else can replicate it).

If anyone wants to try it, go to https://eikweb.com/sharing/ and download the Image Gallery (ZF) sd3-gallery.rsd and then change the image border from double to solid, change the size (px), and choose a darker color (since those are the only 3 things I'm doing before I see these gaps in the previews).


Done that changed image border to 2px colour black solid
no gaps around images at any size or browser
example-chrome
Attachments:

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 122279 Photo


Senior Advisor
13,733 posts
Online Now

I corrected the error I had made about midday CET. It turned out that I used a newer build of SD, which I'm testing, so if you have had problems opening the corrected version, that is why. But it should all be fixed now. I have even done away with the border altogether, but the dropdown shadow is still there. It shouldn't cause any space between any new images and new borders, though.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 2659348 Photo


Registered User
98 posts

I figured it out. I opened my test site on my ipad and it looked great - no gaps. But then I went to my wife's computer to check and it had gaps. This is the freakiest thing!

So I thought again about what Frank said - except instead of browser percentage I looked at the Display percentage of my monitors. I had them set to 125% and so were my wife's.

So when I changed themonitor display to 100% or 150% there was no gap in the images!
I'm sorry I wasted everyone's day with this! And I'm sorry I got frustrated and got everyone else frustrated! But if it weren't for you all then I never would have figured it out.
Thanks!
Knowing is half the battle

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.