Extremely strange behaviour with div height change in IE7 and IE8

Question

I have a very simple HTML/JS code, which expands the size of a div on mouse over and collapses it again on mouse out. The code looks like this:

CSS:

.sign-in-up {
    position: absolute;
    left: 780px;
    background-color: #8599b2;
    font-size: 9pt;
    line-height: 23px;
    color:white;
    text-align: center;
    height: 25px;        /* note this height 25px */
    width: 164px;
    overflow: hidden;
}

Then I have my div in HTML:

<div class="sign-in-up" id="sign-in-up"
     onmouseover="$(this).css('height','55px')"
     onmouseout= "$(this).css('height','25px')">
     my html goes here
</div>

This works perfectly fine in Firefox (from version 3 and up), Safari, Chrome, Opera and IE9 - but does not work on IE8 or IE7. When I mouse-over the div, visually nothing changes. I tried changing the onmouseover to be

onmouseover="$(this).css('height','55px');alert($(this).height())"

and the alert box shows correct height of 55px, however visually on screen nothing changes and the div is still shown as 25px height.

I've tried every possible thing there is - with exactly the same results. It seems like IE is changing the height of the div in the dom but is not redrawing the div on the screen to match its new height.

At this stage I'm totally lost. Any help is greatly appreciated.

Edit

Thank you all that replied. After much head banging against the wall (computer screen in this case), the issue turned out to be caused by interference from curvycorners - a javascript library to imitate rounded corners (border radius) in older versions of IE. Once it did its job it would actively prevent redraws of the affected elements.

After removing rounded corners, everything works fine, although it looks worse - but at least it works. I'll investigate other options for rounded corners.

Answer 1

Thank you all that replied. After much head banging against the wall (computer screen in this case), the issue turned out to be caused by interference from curvycorners - a javascript library to imitate rounded corners (border radius) in older versions of IE. Once it did its job it would actively prevent redraws of the affected elements.

After removing rounded corners, everything works fine, although it looks worse - but at least it works. I'll investigate other options for rounded corners.

Answer 2

Have you tried to do

$(this).height(55)

instead of

$(this).css('height','55px')

Answer 3

it's actually working

http://jsbin.com/ebejew

Answer 4

Use this simple jQuery:

$(document).ready(function() {
    $(".sign-in-up").hover(function() {
        $(this).animate({
            height: 55
        }, 10);
    }, function() {
        $(this).animate({
            height: 25
        }, 10);
    });
});​

Answer 5

I'd tend to go for a more CSS driven approach. This pulls out your presentation into CSS where it belongs.

#sign-in-up {
    height:25px;
}

#sign-in-up.expanded {
    height:55px;
}

Js

$(this).addClass('expanded');

$(this).removeClass('expanded');