1

I have a sample html page where I'm trying to place one div below the other and calculating the top width of a bottom div based on the length of the top parent div.

Here I'm using the calculation as top: expression(document.all.ParentDiv.offsetHeight); but its not working on IE11,but its working fine IE7 and below.

Now how do I make this compatible with IE11 to calculate this length and I don't want to hard code the top margin as more elements might et placed in the top div.

The code is as shown below:

<html>
<head>
<style>
  #ParentDiv {
        position: absolute;
        top: 0;
        left: 0;
        width: expression(document.body.clientWidth - document.body.clientLeft - 120);
        padding: 5px;
            padding-bottom: 0px;
        }

  #Childdiv {
         position: absolute;
         <!--overflow: auto; -->
         top: expression(document.all.ParentDiv.offsetHeight);// This Line Not working
         height: expression(document.body.clientHeight - document.all.ParentDiv.offsetHeight - 50);
         left: 5px;
         width: expression(document.body.clientWidth - document.body.clientLeft - 120);
              padding: 0;
        }
</style>
</head>
<body>
<div id="ParentDiv">
  <p>Please select a Student</p>    

  <table width='510' border='0' cellspacing='0' cellpadding='0' >
    <tbody>
      <tr>
        <td nowrap rowspan='2'>Student Name</td>
      </tr>
    </tbody>
  </table>
</div>   



<div id="Childdiv">
 <table class='data' width='100%' border='0' cellspacing='0' cellpadding='0'>
      <tbody>
    <tr><td>Student1</td></tr>
    <tr><td>Student2</td></tr>
    <tr><td>Student3</td></tr>
    <tr><td>Student4</td></tr>
    <tr><td>Student5</td></tr>
    <tr><td>Student6</td></tr>
    <tr><td>Student7</td></tr>
    <tr><td>Student8</td></tr>
    <tr><td>Student9</td></tr>
    <tr><td>Student10</td></tr>
    <tr><td>Student11</td></tr>
    <tr><td>Student12</td></tr>
    <tr><td>Student13</td></tr>
      </tbody>
    </table>
</div>
</body>
</html>
Dark Matter
  • 2,231
  • 3
  • 17
  • 31
  • You are better off using JS for this. Side note: you have HTML comments in your CSS that will throw errors. – ralph.m May 13 '14 at 04:15
  • @ralph.m: I just added that comment to point out the line which was not working fine, BTW this is a very old web app where this type of code is almost used in over 50 places. It works fine in IE7, is there anything I can use to chage that calculation in css. – Dark Matter May 13 '14 at 04:18
  • Hope, following link will resolve your queries: http://stackoverflow.com/q/6191679/2123151 – akgupta May 13 '14 at 04:23

0 Answers0