jQuery .width() issues in IE 8

Question

I'm having major issues getting the size of a container in jQuery using width(), outerWidth(), innerWidth()

If you load up this URL in IE8 it gives me a width figure of over 30,000 whereas every other browser is around the 1100 mark which is the correct value.

This causes problems with the slider as this width value is used to make all sorts of other calculations in regards to the individual slider resizings.

I have left the alert in for you to see the width discrepencacies and it is being called on the div with id container.

The specific jQuery call is (using no conflict due to other plugins):

alert(jQuery_1_6_2('#container').width());

I've seen a few other posts mentioning outerWidth() and innerWidth() but these don't give me the correct sizings either.

I believe it may be to do with IE maybe thinking that all the sliders are in a line but still these are only 600px wide each so I would only get a value around 3,600px not 30,000px +

I also can't use fixed widths which would solve my problem due to this being responsive. The best I can achieve is put a max-width value on #container but I still don't get an exact value for the width value.

Answer 1

Try to use $(window).load(function(){...}); instead of document ready.

If still not working, then this could work, using a timer let the DOM be fully rendered:

jQuery_1_6_2(document).ready(function () {
    setTimeout(function () {
        alert(jQuery_1_6_2('#container').width());

        jQuery_1_6_2('#accordion-wrapper').raccordion({
            speed: 1000,
            sliderWidth: jQuery_1_6_2('#container').width(),
            sliderHeight: 360,
            autoCollapse: false
        });
    }, 100);
});