jQuery: Having difficulty setting a child <div>'s height to match it's parent <td>

Please look at http://jsfiddle.net/wg9j4n1f/6/.

My code simply uses jQuery to "seek out" all <td> tags with a rowspan because they all have a child <div>. My goal is to set the <div> tag's height to match it's parent <td>'s height. For some reason, my code isn't working.

Can someone please help? Thanks.

P.S. Although I posted the code in jsfiddle, the problem doesn't show there. I am attaching a snapshot of my results.I put arrows pointing to the results of my code.
elepilAsked:
Who is Participating?
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.

chaauCommented:
This is because the div increase pushes the cell increase. If you add a new line in the log:
        console.log("<td> NEW height=" + $(this).css("height"));

Open in new window

You'll get:
"<td> height=108px" 
"<div> height=90px" 
"<div> NEW height=108px" 
"<td> NEW height=120px"

Open in new window

The workaround here is to subtract 12px from the <td> height when assigning the NEW height of the div. The 12px most likely came from the div padding (2 x 5px) and the border (2 x 1px), like this:
$(function() {
    $("td[rowspan]").each(function() {
        // Grab the height of <td>s with a rowspan attribute
        var tdHeight = $(this).css("height");
        var h = (parseInt(tdHeight, 10) - 12) + "px"
        console.log("<td> height=" + tdHeight);
        // Grab this <td>'s child <div> and display its height
        var div = $(this).find("div");
        console.log("<div> height=" + div.css("height"));
        // Set this child <div>'s height to match it's parent <td>
        div.css("height", h);
        console.log("<div> NEW height=" + div.css("height"));
        console.log("<td> NEW height=" + $(this).css("height"));
    });
});

Open in new window

If you do not like hardcoding you can retrieve the value 12 from the css
0
elepilAuthor Commented:
chaau, thanks for responding.

I looked at your jsfiddle link, they <div>s are not correct. Look at the 1:00pm-2:00pm, the 2:00pm-3:00pm, 3:30pm-4:30pm <div>s, they're not expanding the full height.

I see what you're pointing out to me how the <td> is expanding in height after the <div>'s height is increased. Do you know what's causing that?
0
chaauCommented:
I do not understand what do you mean:
1-2
0

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

elepilAuthor Commented:
I was using IE. This is how it looks:

pic2.png
0
elepilAuthor Commented:
But can you explain to me where that extra 12px is coming from?? I have no margins in my .ac class, so I'm not sure I understand where those extra pixels are coming from. I do have padding, but that's inside the <div>, not outside. You did pinpoint the cause of the problem though, and I thank you for that. I think I should attack this at the root, and that means finding out where that extra 12px is coming from and eliminating it.
0
chaauCommented:
Have a read here:
      Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
So, your padding and border increase the div by exactly 12px.

Please read the article to the very bottom:
Browsers Compatibility Issue

Internet Explorer 8 and earlier versions, include padding and border in the width property.

To fix this problem, add a <!DOCTYPE html> to the HTML page.
0
elepilAuthor Commented:
My document does have the correct DOCTYPE tag as you showed. I've also already read the quote you posted, but I'm not sure that's it though. I modified my .ac class to look like this:

.ac {
    display: block;
    /* border: 1px solid #CCC; */
    /*border-radius: 10px;*/
    /*padding: 5px;*/
    width: 250px;
    min-height: 90px;
    height: 100%;
    /*box-shadow: inset 0px 0px 10px -2px blue;*/
    background-color: lightgreen;
}

Open in new window


There's no more border, no more padding, no margins, no box-shadow, and it still looks like this:

pic3.png
0
chaauCommented:
What about your <td> elements?
0
chaauCommented:
Also, please note that sometimes Ctrl-F5 instead of F5 does a magic
0
elepilAuthor Commented:
chaau, I somehow got it to work perfectly with Firefox, Chrome, and Opera. IE is the only problem. I am closing this post because the problem description for IE will be different. So thanks for your help on this. If you want to take another shot at IE, the link of the new post is at http://www.experts-exchange.com/questions/28691481/jQuery-Having-difficulty-setting-a-child-div-'s-height-to-match-it's-parent-td-for-Microsoft-Internet-Explorer-ONLY.html.

Thanks again for your help.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.