elepil
asked on
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!
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!
Julian Hansen
Try setting your <td> to display:block;
hmm scrap that - then it breaks FF ...
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
Glad you got sorted.