jQuery: Having difficulty setting a child <div>'s height to match it's parent <td> for Microsoft Internet Explorer ONLY

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!
elepilAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Try setting your <td> to display:block;
Julian HansenCommented:
hmm scrap that - then it breaks FF ...
elepilAuthor Commented:
Julian, thanks for looking into my problem. Do you have any idea where all the extra pixels are coming from that's increasing the height of the <td>? This is just such odd behavior, especially when all I'm doing is setting the child <div>'s height to match its parent.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Not really - it seems the double rowspan in columns 2 and 3 is resulting in both pushing down the cell below - but can't say why.

If I had been paid for every hour lost trying to work out why IE does not do something I would have retired years ago.

I will keep looking and post back if I find something.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
Turns out the solution was to put a height to the td selector class. I put height: 24px and all the <div>s started expanding the full height of the <td>s.

This is one of those cases where we simply do not know how the code of IE is written under the hood. From the looks of it, IE was missing a parameter in its calculations, which is a concrete <td> height value.

I hope I don't get too many problems like this, can make a person age fast.
Julian HansenCommented:
Glad you got sorted.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.