CODEWITHSUNDEEP
htmlcssinternet-explorer-11
NeverStopLearning
NeverStopLearning

Reputation: 83

In div style="overflow:auto" not working properly in IE 10

I have a table with a single row and 2 tds.

In each td, I am using a div and have set overflow to auto. My code is working fine in chrome, firefox and IE 8,9,10 but not working properly in IE 11.

In the correct case, the scroll bar appears and I can scroll down but in IE 11 no scroll bar appears.

This is the part of the code in which the problem lies.

Here's the the link to the code I have written. jsfiddle.net/XrH7f/

Code 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<META http-equiv="Content-Type" content="text/html; charset=windows-874">

<html>
<head><style>
table
{
    border-top-color: #d3dfe2;
    border-right-color: #d3dfe2;
    border-bottom-color: #d3dfe2;
    border-left-color: #d3dfe2;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-image-source: none;
    border-image-slice: 100%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}
table td
{
    border-top-color: #d3dfe2;
    border-right-color: #d3dfe2;
    border-bottom-color: #d3dfe2;
    border-left-color: #d3dfe2;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-image-source: none;
    border-image-slice: 100%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}
td
{
    color: #003366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

</style></head>
<body text="#000000" topmargin="0" leftmargin="1" bgcolor="#ffffff"><form name="form1" action="page2.jsp" method="POST">

<table width="100%" align="center" bordercolor="#d3dfe2" border="1" cellspacing="0" cellpadding="1">

 <tbody>
  <tr bgcolor="#ecfefe">


   <td width="17%" height="100" align="right" valign="middle">

    <div style="width: 100%; height: 100%; overflow: auto;">

                                 Select Make:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ALL: <input name="allMake" onclick="selectallMe();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="ALL" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />


                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="BBDC           " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="MBCL           " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="LIQUIDITY      " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdefghijkl         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="TPH            " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="CGCSL          " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="MB             " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="CG             " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
>

   </td>


   <td width="17%" height="100" align="right" valign="middle">

    <!-- Here we will place the check Boxes of "Select Make" and "Select Condition"  -->

    <div style="width: 100%; height: 100%; overflow: auto;">

                                Select Condition:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ALL: <input name="allCondition" onclick="selectAllCn();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="ALL" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 1<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DEMO" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 2<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="NEW " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 3<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="SOLD" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 4<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="SR  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 5<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="WH  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 6<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="VQC " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 7<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="PHWH" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 8<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="PHSR" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 9<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DST " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 10<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DIS " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 11<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DB  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 12<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DST2" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 13<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="FLET" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 14<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="MS  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

    </div>

   </td>

  </tr>

 </tbody>
</table>

</form></body></html>

Upvotes: 0

Views: 8155

Answers (1)

NeverStopLearning
NeverStopLearning

Reputation: 83

Ahhh. Finally got the answer after some R&D. The height of the div tag when specified in % creates a problem. changed the height of the 1st div from 100% to 100px and volla !!!!! Got the Fix. Thanks for the help guys.

Also set the vlign attribute of the 1st td to top from middle.

Upvotes: 2

Related Questions