div height & padding issue: Chrome/IE difference

[gib65]

Hello,

Please have a look at the two screen captures I've attached. One is take from Chrome, the other from IE. The one in Chrome looks correct. The one in IE does not.

.

What you're looking at is a div with a light blue background inside a table cell. The table is the box with the red header and a single cell for the body. In Chrome, the blue div fits nicely into the table cell, but in IE, the top and bottom spill over the cell borders.

Here's the HTML

<table cellspacing="0" cellpadding="0" border="0" id="SelectCourseTypeTable">
    <tr>
        <td id="SelectCourseTypeTableHeaderCell"><span id="SelectCourseTypeSpan">&nbsp;</span></td>
    </tr>
    <tr>
        <td id="SelectCourseTableCellBody">
            <div id="SelectCourseTypeDiv">
                <input type="radio" id="PLARRadioButton" name="CourseType" value="PLAR" onclick="RadioButton_Click()" />Prior Learning Assessment (PLAR)
                <br />
                <br />
                <br />
                <input type="radio" id="SeqRadioButton" name="CourseType" value="Sequential" checked="checked" onclick="RadioButton_Click()" />Modular Course Delivery
                <br />
                <br />
                <br />
                <div id="OkButtonDiv">
                    <input id="OkButton" class="OkButton" type="button" value="OK" onclick="OkButton_Click()" />
                </div>
            </div>
        </td>
    </tr>
</table>

Here's the CSS:

#SelectCourseTableCellBody
{
    height: auto;
}

#SelectCourseTypeDiv
{
    height: 100%;
    text-align: left;
    padding-top: 100px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
    background-color: rgb(232, 238, 246);
}

#OkButtonDiv
{
    width: 100%;
    text-align: center;
    height: 20%;
}

#OkButton
{
    width: 80px;
    height: 100%;
    font-size: 16pt;
}

There's more CSS of course, but the above is the relevant portion.

What I've noticed is that if I comment out the top and bottom padding on the blue div like so...

#SelectCourseTypeDiv
{
    height: 100%;
    text-align: left;
    /*padding-top: 100px;*/
    padding-left: 30px;
    padding-right: 30px;
    /*padding-bottom: 100px;*/
    background-color: rgb(232, 238, 246);
}

...it fixes the problem in IE, but then the contents of the div become aligned with the top with no spacing (for obvious reasons).

I've tried working with this, adjusting this and that CSS setting, or this and that html setting (ex. adding <br/> before the first radio button), but nothing so far meets all my requirements (for example, keeping the positioning and size ratios when the browser resizes) or looks the same across browsers.

It seems like there should be a simple fix for this. Obviously for IE, setting the height of the div to 100% does not include the padding (so any padding adding on top of the 100% height will go over 100%), but for Chrome, it does include the padding in the height. Isn't there a way to tell IE to include the padding in the height? So if I set the height of the div to 100% and the top and bottom padding to 100px, the actual height of the div should be 100% of its container (the table cell in this case) minus the top and bottom padding.

[Beverleyh]

box-sizing: border-box; might help http://blog.teamtreehouse.com/box-si...le-css-layouts

But I would recommend you drop the table layout and recode using divs.