Image gallery thumbnails (radiogroup inputs) become bigger in Firefox

Question

I have a small bit of code that shows thumbnails of images and when you click on them they show a larger version of each. It works perfectly in Google Chrome, but in Firefox the thumbnails become larger so they no longer fit on a single line (I use percentages), I am sure it must be a simple fix, but sadly I don't know what it is.

Here is the preview on my site :

http://www.poipleshadow.com/Children-Charity-Blog-2014-02-February#CarnivalForTheChildren

I use styled Radio inputs, for those who don't know, there CAN NOT be spaces between the inputs otherwise extra margins are added for some reason! That took a while to figure out!!

Anyway, each one has a width of 11.11% times that by 9 thumbnails should come to 99.99%.

I have added the full code, but it's really only the radioboxes which is the issue.

CSS

/* ********************** NEW GALLERY CODE ************************/ 
/* IMPORTANT - IN THE CODE THERE CAN'T BE 
   SPACE BETWEEN EACH INPUT (Eg New Lines)  
   AS IT MESSES WITH FORMAT OF THE DISPLAY */
.radiogallery {position:relative;  width:100%; height:auto; padding:0; border:0; margin:0; overflow:hidden; background:none; text-align:center;} /*Bounding Box */

/* Use this border as the border to the image, the border on the label is for spacing instead of using a margin */
.radiogallery img { max-width: 100%; height:auto;  padding:0; margin:0;   border: 2px solid #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }


/************************ Thumbnails ************************/
/* Use the Border to add spacing between the images */
.radiogallery label {display:inline-block; overflow:hidden; line-height:0; opacity:1; height:auto;  margin:0; padding:0; margin-bottom:-4px; border: 2px solid #eee; cursor:pointer; background:none; box-sizing:border-box; } /* Thumbnails */


.radiogallery label.nine  { width:11.11%; } /* Thumbnails (9 ACROSS)*/


.radiogallery input {display:none;   } /* Check Box Selection Status (NOT SHOWN) */
.radiogallery input:checked + label img{opacity:1; border: 1px solid #09F;     }
.radiogallery input.pics + label img:hover  {opacity:1; border: 1px solid #09F;   }
.radiogallery input:checked + label:hover {opacity:1; }

/************************ MAIN IMAGE (Hiding) ************************/
.radiogallery div.large {position:absolute;display:inline-block; left:0; top:730px; width:100%; height:auto; margin:auto;  border:0; background:none; padding:0px; text-align:center; opacity:0; z-index:100; overflow:hidden;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s; }
/* Make Float:none so that image is centered */
.radiogallery div.large img { margin:auto; background:none; width:720px; width:auto; margin:0;
margin-top:10px; padding:2px; background:white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbe3ff; float:none;}


/**************************************************** MAIN IMAGE (Showing) ****************************************************/
.radiogallery input#pic1:checked ~ div.pic1,
.radiogallery input#pic2:checked ~ div.pic2,
.radiogallery input#pic3:checked ~ div.pic3,
.radiogallery input#pic4:checked ~ div.pic4,
.radiogallery input#pic5:checked ~ div.pic5,
.radiogallery input#pic6:checked ~ div.pic6,
.radiogallery input#pic7:checked ~ div.pic7,
.radiogallery input#pic8:checked ~ div.pic8,
.radiogallery input#pic9:checked ~ div.pic9,
.radiogallery input#pic10:checked ~ div.pic10, 
.radiogallery input#pic11:checked ~ div.pic11,
.radiogallery input#pic12:checked ~ div.pic12,
.radiogallery input#pic13:checked ~ div.pic13,
.radiogallery input#pic14:checked ~ div.pic14,
.radiogallery input#pic15:checked ~ div.pic15,
.radiogallery input#pic16:checked ~ div.pic16 {position:relative; opacity:1; z-index:100; top:10%; height:auto; margin:auto; padding:0;  background:none; }

HTML

<div class="radiogallery">

<input type="radio" name="pic" id="pic1" class="pics" checked="checked"><label for="pic1" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></label><input type="radio" name="pic" id="pic2" class="pics"><label for="pic2" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></label><input type="radio" name="pic" id="pic3" class="pics"><label for="pic3" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></label><input type="radio" name="pic" id="pic4" class="pics"><label for="pic4" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4"  width="960" height="720"></label><input type="radio" name="pic" id="pic5" class="pics"><label for="pic5" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></label><input type="radio" name="pic" id="pic6" class="pics"><label for="pic6" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></label><input type="radio" name="pic" id="pic7" class="pics"><label for="pic7" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></label><input type="radio" name="pic" id="pic8" class="pics"><label for="pic8" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label><input type="radio" name="pic" id="pic9" class="pics"><label for="pic9" class="nine"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></label>


 <div class="pic1 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-01.JPG" alt="Carnival and Goa Entertainers 1" width="960" height="720"></div>
 <div class="pic2 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-02.JPG" alt="Carnival and Goa Entertainers 2" width="960" height="720"></div>
 <div class="pic3 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-03.JPG" alt="Carnival and Goa Entertainers 3" width="960" height="720"></div> 
 <div class="pic4 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-04.JPG" alt="Carnival and Goa Entertainers 4" width="960" height="720"></div> 
 <div class="pic5 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-05.JPG" alt="Carnival and Goa Entertainers 5" width="960" height="720"></div> 
 <div class="pic6 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-06.JPG" alt="Carnival and Goa Entertainers 6" width="960" height="720"></div> 
 <div class="pic7 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-07.JPG" alt="Carnival and Goa Entertainers 7" width="960" height="720"></div> 
 <div class="pic8 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-08.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div> 
 <div class="pic9 large"><img src="Blog/2014-Photo-Sets/02-Feb/Carnival-09.JPG" alt="Carnival and Goa Entertainers 8" width="960" height="720"></div> 
</div> <!-- end radiogroup -->

Answer 1

You are doing strange things in your CSS. You Put elements next to each other making them inline-block also you make the child elements of this items float:left; for no reason.

You should remove the floating of the images (although this is not your current problem) The problem is the box-sizing, change it to border-box to calculate the border to the items width.

Add this to your CSS

.radiogallery, 
.radiogallery * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

Add Mozilla's vendor prefix version of box-sizing to your labels

.radiogallery label { -moz-box-sizing: border-box; }

Per http://caniuse.com/#feat=css3-boxsizing, it seems like Firefox is still 2 versions away from dropping the requirement to have the prefix.

As others have mentioned, it's usually bad practice to embed large images in a smaller thumbnail area. You should make a smaller thumbnail sized version using some image editing software, and use that for the thumbnails, while linking to the large version for the full view.

Edit: There are 2 reasons for using thumbnails: rendering and download size/speed. Rendering is an issue because some browsers, especially on mobile, can struggle to dynamically resize large images.

Regarding your comment, yes, if you made no other changes, using more images would add to the data load. However, right now, because the page is loading 9 large images, it took ~8 seconds to load for me (5 trials, cache disabled) and I have a fast internet connection on a desktop computer. On a mobile device, with a much slower connection, the viewer might give up on the page loading.

The alternative would be to defer loading of those images, perhaps with JS, until after the page loads, or even until the user clicks on a thumbnail. Since those images make up ~50% of your page, you could expect page load to noticeably improve.