I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks:
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;
}
Here is the corresponding div in the 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>
In my testing, this worked perfectly fine on most browsers except for IE8 and IE7. In IE8 and IE7, when I hovered over the div, there was no visual change. I even tried adding an alert to check the height which displayed correctly as 55px, but the div still appeared at 25px height on screen.
Despite trying various solutions, nothing seemed to work. It appeared that IE was updating the div's height in the DOM but not reflecting it visually on the screen.
I felt perplexed by this issue and sought assistance. Fortunately, after much trial and error, I discovered that the problem stemmed from interference caused by curvycorners - a JavaScript library used to create rounded corners in older versions of IE. This script was somehow inhibiting the redraw of affected elements.
Once I removed the rounded corners feature, everything functioned as expected, albeit without the visually pleasing rounded edges. Nevertheless, the functionality was restored, and I am now exploring alternative methods to achieve rounded corners without causing conflicts.