Question

Could anyone help me with this problem?
Code zip is here: (link taken down)

I have made everything valid but Chrome still calculates the height of the elements completely wrong (9 in every 10 times…)…

---

Well, technically it does.

$(document).ready(function() {
            function resizeIt() {
                var extDiv = $('#externalWrapper').height();
                var wrapper1 = $('#wrapper1').height();
                var wrapper2 = $('#wrapper2').height();
                var wrapper3 = $('#wrapper3').height();

                $('#wrapper1-mid').css({'height':extDiv - ($('#wrapper1-top').height()+$('#wrapper1-bottom').height())-4});
                $('#wrapper2').css({'marginTop':extDiv-wrapper2});
                $('#wrapper3-mid').css({'height':extDiv -($('#wrapper3-top').height()+$('#wrapper3-bottom').height())+1});

                if($('ul#related-linklist > li').size() > 15) {
                    $('#spacer').attr({'height':(wrapper2-250)});
                    $('#product-image').css({
                        'marginTop':0,
                        'marginLeft':0
                    });
                }
            }
            resizeIt();
        });

So that’s my code, in Chrome it doesn’t resize the margins/heights correctly at all. But works fine in Safari..

IE/Firefox are unaffected.

Answer 1

Update: You are correct about, not needing to add ‘px’ to the end of the values. But I’ve updated the code below to use window.load as I think that might be the problem.

When using css you should include the px at the end. Also, you have a height attribute which should be css (this is untested):

$(window).load(function() {
        function resizeIt() {
            var extDiv = $('#externalWrapper').height();
            var wrapper1 = $('#wrapper1').height();
            var wrapper2 = $('#wrapper2').height();
            var wrapper3 = $('#wrapper3').height();

            $('#wrapper1-mid').css({'height':extDiv - ($('#wrapper1-top').height()+$('#wrapper1-bottom').height())-4 + 'px' });
            $('#wrapper2').css({'marginTop':extDiv-wrapper2 + 'px' });
            $('#wrapper3-mid').css({'height':extDiv -($('#wrapper3-top').height()+$('#wrapper3-bottom').height())+1 + 'px' });

            if($('ul#related-linklist > li').size() > 15) {
                $('#spacer').css({'height':(wrapper2-250) + 'px' });
                $('#product-image').css({
                    'marginTop':0,
                    'marginLeft':0
                });
            }
        }
        resizeIt();
    });