JCrop cuts edge of image

Question

I'm using jCrop to create an interface allowing users to crop images to a fixed width and height. It displays the original image (always 940px width, with variable height) and overlays the jCrop selector on top, with a fixed width and height (940 x 600). The use can then move the selector up and down (not left & right, because the selector is the same width as the original image) and select a portion. The cropping works fine, except for one thing: the original, pre-cropped image (over which the jCrop selector is shown) is missing a few pixels from the left hand side -- it's more like 935px wide. So that when jCrop crops it, the result is a thin black border down the left-edge. Code:

<script language="Javascript">
  jQuery(function($) {      

    $('#target').Jcrop({
      keySupport: false,
      minSize: [940,600],
      maxSize: [940,600],           
      setSelect: [0,0,940,600],
      onSelect: updateCoords
    });

    function updateCoords(c)
    {
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };

  });
</script>

<img src="carousel.jpg" id="target" border="0" width="940" />

<form action="crop" method="post">
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <input type="submit" value="Crop Image" />                            
</form>

Any ideas much appreciated.

EDIT:

Looking at the generated source, I see that jCrop is adding a style "width:935px" to the displayed image. But why?

<img style="display: none; visibility: hidden; width: 935px; height: 701px;" src="carousel.jpg" id="target" border="0" width="940">
<div class="jcrop-holder" style="width: 935px; height: 701px; position: relative; background-color: black;">
<div style="position: absolute; z-index: 600; width: 940px; height: 600px; top: 0px; left: -5px;">
<div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;">
<img style="border: medium none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 5px; width: 935px; height: 701px;" src="carousel.jpg">

EDIT 2:

I'm using Twitter Bootstrap. I see from this jCrop issue that there have been conflicts, but the issue described there is not the same as mine, and I have tried the max-width:none solution they suggest, to no avail.

Answer 1

I fixed it in the end by putting the image to be cropped in a and styling that and its child images as "width:940px".

I didn't find out what the cause of the problem was, perhaps it was a conflict with Bootstrap.