expanding container to content missing the 1%

Question

im currently working on this site:

http://dingwangbag.com/

Unfortunately i still have a problem with the slideshow: most browsers seem ok by now ( sometimes still a little flicker at the end but it shows up )

my HTML setup is like this

<content>

    <gallery_item>
        <image>
        <image>
        <image>
    <gallery_item>

    <gallery_item>
        <image>
        <image>
        <image>
    <gallery_item>

</content>

on document.ready a function is called that runs this block of code for every image after it has been fully loaded (basically getting the width of every image and adding it to the container width)

function show_image(image){

          var $item = $(image.img);
          img_width = Math.ceil(parseInt($item.width()));

          gallery_width += img_width;       
          $("#content").width(gallery_width);

          if(images_loaded === false){
                 $item.css("opacity",0);
                 $item.removeClass('offscreen');

                 $item.animate().animate({
                        opacity: 1
                        }, 2000, function() {
                        // Animation complete.
                        });
          }
};

and this block is runs on resize

(".gallery_slides").each(function(i){
          current_slide_item = $(this);
          current_slide_item_width = 0; 

          $(this).find("img").each(function(){
             current_slide_item_width += $(this).width();    
          });

          gallery_width += current_slide_item_width;       
   });

   $(".gallery #content").width(gallery_width);

simple right

its workin so far but it seems to me that the scaling of the images result in some odd numbers wich sum up to a value that might be 1 or 2 px short resulting in the last container not beeing positioned properly (all containers and images are floated left) NOW where are these off numbers come from and how can i fix it ( i added 2px to the container width did help )

BUT

internet explorer 9 is doing something really special by being somewhat reactive to scrolling and the mouse position randomly showing or hiding images (even within the group) SOB

and i swear i have no hover or scroll functionality accociated with this in any way

so if anyone could have a look at it and hopefully help me this would be great

thanks in advance

Answer 1

Don't ceil it.

img_width = parseInt($item.width());

Also: you should update jQuery to 1.11.1 There have been bugs in the versions before.