Hi all,

The below code works fine in Chrome, Opera and Firefox.

It does NOT work fine in IE8 or Safari. In both these browsers the height of the DIV that's being set is usually shorter than the other DIV it's being aligned with.

Here's the code I'm using to resize the problematic DIV:

Function resize(height) {

$(document).ready(function(){


var div = $( "#annoucement-area-243" );
var startHeight = div.height();
var endHeight = height; //$("#annoucement-area-880").innerHeight();
div.height( startHeight ).animate({ height: endHeight });

var div = $( ".content-annoucement-243" );
var startHeight = div.height();
var endHeight = height; //$(".content-annoucement-880").innerHeight();
div.height( startHeight ).animate({ height: (endHeight - 40)});

});

}

});


Here's the CSS of the affected DIV ID and DIV class:

#annoucement-area-243 {
float: left;
width: 243px;
overflow: hidden;
text-align: justify;
background: url(../images/shadow6.png) bottom center no-repeat;
}

.content-annoucement-243 {
width: 171px;
padding: 0px 35px 0px 35px;
background: #fff;
border: solid #b1b1b1 1px;
border-top: 0;
border-bottom: 0;
text-align: center;
}


I'm guessing the problem lies somewhere with padding/margins being thrown in there by IE8 and Safari but not the other browsers.

Any ideas?

Thanks,