jQuery and CSS conflicting with 'margin: 0 auto;' in Chrome and Safari

I have added a jquery slider to my page and after testing in all the browsers, the image does not change onclick in Chrome and Safari. In firefox and IE it is working correctly. I have issolated the code and realized the error but do not know how to fix it. My is causing the problem with the css of the slider. For more information check out http://jsfiddle.net/ryanabennett/vUvmA/1/

If I take out the margin: 0 auto; it works fine. So is there a way to fix this problem with the slider or is there another way to center my page?

Here is my HTML:

<div align="center" style="width: 1000px; margin: 0 auto;">
<div class="slideshow">
<!-- Slideshow HTML -->
    <div id="slideshow">
    <div id="slidesContainer">
        <div class="slide">
        <p>One</p>
        </div>
        <div class="slide">
        <p>Two</p>
        <div class="slide">
        <p>Three</p>
        </div>
        <div class="slide">
        <p>Four</p>
        </div>
    </div>
    </div>
    <!-- Slideshow HTML -->
</div></div>
</div>

Here is my CSS:

.slideshow{
border: 1px solid;
float: left;
height: 350px;
margin-left: 50px;
width: 500px;
}

#slideshow {
margin: 0 auto;
position: relative; 
}
#slideshow #slidesContainer {
height: 350px;
margin: 0 auto;
overflow: auto;
position: relative;
w开发者_Python百科idth: 400px;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}

Here is my JS:

$(document).ready(function(){
 var currentPosition = 0;
 var slideWidth = 400;
 var slides = $('.slide');
 var numberOfSlides = slides.length;

 // Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
  'float' : 'left',
  'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
 .bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 :currentPosition-1;

// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{        

$('#rightControl').show() }
}    
});

It might be easier to just visit: http://jsfiddle.net/ryanabennett/vUvmA/1/

**Update - A few of us have looked at this and still can't seem to correct it. Does anyone else have any ideas.

---

I know this is old, however I noticed two things with your html (edited your fiddle and it worked fine for me using Safari). First in your markup with your second <div class="slide"> your missing the closing </div> tag, and second with your opening div container your wanting to centre remove the align="center" (as this is now deprecated in html5), assign an ID or class and use this css:

#yourID { 
   position: relative; 
   margin: 0px auto; 
   width: 1000px; 
   text-align: center; 
}

You also need to remove one of the closing div tags at the end.

---

If you change the line that starts with:

$('.control').bind('click', function(){});

to use live instead of bind

$('.control').live('click', function(){});

it fixes part of the problem, but the animation still doesn't look the same in Chrome. Need to dig deeper. In addition, you need to add e.preventDefault(); inside the click handler as well. Doing so will now allow it to work in Chrome/Safari.

And, yes, it'd be better to use delegate instead of live as stated by @AlienWebguy.

Edit: This answer obviously does not work and I have to wonder whether or not this is an actual defect in jQuery.