Question

Can anyone tell me where I am going wrong… I am using the following to vertically align a div by setting the margin-top, using the (window).height. 625 is the height of the Div being centered…

This works in Firefox but IE7 doesn’t set the margin-top until you resize the browser window.

The test site is at http://guylloyd.co.uk

Any thought would be amazingly appreciated!

Martin

jQuery.noConflict();
jQuery(document).ready(function () {

jQuery(function(){   
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});   
}
});

jQuery(window).resize(function(){
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});
}
});

});

Answer 1

You really dont need to use jquery to lay out the content in that fashion, simple css and xhtml could achieve the same thing.

It could be an issue the same as in IE6 which causes a delay in the javascript to be executed try including a time out and a call to the code Seth has designed

function doResize() {   
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');   
    if(jQuery(window).height() > 625){   
        jQuery('body').css({'margin-top': $marginTop});   
    }   
}  
//when document has been fully loaded
jQuery(document).ready(function()
{
    setTimeout('doResize()', 1 );

});