Please look at: http://jsfiddle.net/wovtrf1e/
. NOTE: This problem exists in Microsoft Internet Explorer ONLY. So please use IE to view the above jsfiddle link.
My jQuery code targets a <td id="target02">. When the page renders, look for the lightgreen rectangular box with 01:00pm-02:00pm, and it even says #target02 as well. This lightgreen rectangular box is actually a <div>, and all I'm trying to do is set this <div> tag's height to match it's parent <td>'s height.
If you look at my jQuery code, I am outputting console.log comments. Pay attention to the <td>'s INITIAL height and it's NEW height after the <div>'s height has been changed. There is a BIG difference in pixels, and I don't understand why. The end result looks like the <div> is far short of the full height of the <td>, but what's really happening is that the <td> increased in height AFTER the <div>'s height was set to match the <td>'s initial height.
Can anyone please explain to me why this is happening and how to correct this? The <div>'s CSS is the class="ac"; I've already removed the padding and border of the <div>, and it has no margins. I've already set the <table>'s cellspacing and cellpadding to zero as well. So I cannot think of what could be causing this anymore.
Any help on this would be immensely appreciated. Thanks!