John John - 19 days ago 7
CSS Question

Why are these images in a gallery being 'shifted' or 'bumped'?

I am trying to implement a variation to how images are displayed for those viewing this website who prefer a tiled viewed over my image existing slider.

The gallery is labeled as follows:

<!-- TILE GALLERY -->
<div id=tileGallery >
<?php for ( $x=0; $x<40; $x++)
{?>
<div class="col-lg-3 col-md-4 col-xs-6">
<img id=img_<?php echo$x;?> data-zoom-image="picsLarge/home-<?php echo $x+1;?>.jpg" class=imgGal src="pics/home-<?php echo $x+1;?>.jpg">
</div><?php
}?>
</div>
<!-- end tile gallery -->


And here is the CSS (not showing bootstrap classes which have not been altered)

#tileGallery
{
width:90%;
height:80%;
margin-left:auto;
margin-right:auto;
}
.imgGal
{
max-width: 100%;
max-height: 100%;
height: auto;
}


The images are displayed in a grid as I expect them to be, however some are 'bumped' or 'shifted' over, and an empty space is held where I would expect and image to be. (example follows in 3 example images of webpage):

Example images/screenshots of issue: http://johnkellyphotos.com/exampleForSO/

As you can see from the three images above, the mid size web browser displays correctly, whereas the large and small shift the images as if their was an empty one in their spot. To be clear, it is not failing to display the image in the blank space, simply no element exist there.

Here is what I have tried:


  1. Ensuring all images are the exact same size before uploading to server

  2. Setting overflow to hidden incase some image was somehow larger and 'bumping' the next image

  3. modifying the padding and margins to most logical values, ranging from 0px/0%, to other smaller values

  4. displaying images as background images rather than image tags, which appears to fix this particular problem, however leads to a whole new world of other problems that creates a LOT more work in redoing most of the javascript, and ultimately not likely to be worth it if this has a simpler solution

  5. Adding another div tag between each image to create padding between images

  6. Adding another div with no overflow surrounding each image that is hard coded to a particular width, and hidden overflow. (This also works but creates a nightmare in making the page dynamic because I have to specify the width exactly.



I would ideally like this to work even if the images are not the exact same size when uploaded, such that they display neatly, centered, and do not 'bump' each other out of position. I was having trouble describing my issue to a search engine and accordingly found it difficult to find anything particularly helpful or specific to my problem.

If any part of this question is unclear, let me know so I can fix it.

Thanks!

Answer

When using percentages in CSS like you are, many times the widths and heights are outputted in decimals, which are rounded differently by individual browsers. I've encountered problems like this many times where that rounding is inconstant and results in some containers being 1px larger than the neighbor containers which will result in the 'shifted' images.

Lets take grid:

A B C
D E F
G H I

As long as all the elements share the exact same height they will be a perfect grid. however, if A get rounded to 1px taller than the other elements your grid will turn into:

A B C
    D E
F G H
I

This is because A is 1px taller than B and C, which makes it encroach 1px into the next "row" that the floats are creating. And now D and E are acting like A is to the left of them and they are starting 1 position further to the right.

This can happen in many different ways that result's in different images getting "pushed" in different areas of the grid.

My suggestion to fix this is to use Javascript to set the heights of the containers. So that they are all the exact same height. Don't rely on CSS percentages giving constant sizes.

Comments