ernymiles,
Just to clarify, the margins are being set using CSS attributes. Without styles, the gallery displays as an unordered list rather than a series of inline-block elements. It appears that you were successful in overriding the width of the list items in your 8 column layout.
Based on our review the widths of the list items are specified properly, according to CSS specifications, though we have rounded the values to the next lowest whole number. It seems that no matter what precision value we use in rounding, there could be sizing issues because of three factors:
- the container width of the gallery is an unknown
- browsers handle rounding differently
- CSS does not specify a certain precision for floating point numbers
To help explain, let’s take the example that you provided of the 8 column layout. You are correct that the width of each column would be 12.5%.
100% / 8 columns = 12.5% per column
Now let’s assume that the container width is 630 pixels. Each of the columns will be 78.75 pixels wide.
630 pixels * .125 = 78.75 pixels
Since browsers cannot render 75 hundredths of a pixel, they will round up or down, depending on their programmed behavior. In the case of rounding up, the width of the columns would exceed the container by 2 pixels.
79 pixels * 8 columns = 632 pixels
In the case of rounding down, you would come up short of the container width by 6 pixels.
78 pixels * 8 columns = 624 pixels
You could easily address this by adjusting the width of your container so that the column width calculation would result in an integer. Though that might affect your overall page layout.
As you can see, there is no easy answer to this issue, and no right or wrong, just a series of hardware and software constraints that we must understand to address display issues on a case by case basis. In our opinion, overriding the included CSS (which we consider a starting point) still remains to be your best bet. That being said, adjusting the CSS that is bundled with RPS Image Gallery so that floating point percentages are used is being discussed and considered. If implemented, the list item widths (and resulting row widths) would be:
9 columns = 11.11% (99.99%)
8 columns = 12.5% (100%)
7 columns = 14.285% (99.99%)
6 columns = 16.666% (99.99%)
5 columns = 20% (100%)
4 columns = 25% (100%)
3 columns = 33.33% (99.99%)
2 columns = 50% (100%)
1 column = 100% (100%)
We hope and believe that this explanation and proposed modification should bring this thread to a close. Should you require additional information, please consider reviewing the following:
