thangaman
05-12-2010, 01:14 PM
Overflow auto div + big table td tabindex and horizontal scroll bar (not scrolling) issue in IE.
CODE:
------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<style>
.exp{
border:1px solid #666;
}
tr td
{
width:100px;
}
</style>
<div id="cnt" style="border:1px solid red; height: 100px; width:502px;overflow:auto">
<table cellspacing="0px" cellpadding="0px" style="table-layout:fixed; width: 100%;" id="tb1">
<tbody id="mytable">
<tr><td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit<td tabindex=0>amet<td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit</tr>
<tr><td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit<td tabindex=0>amet<td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit</tr>
</tbody></table>
</div>
</body>
</html>
------------------------------------------------------------------------------
By using keyboard tab key, I'm able see the tabindexed td in firefox, but in IE 6,7 I'm unable to see tab-indexed current td while moving, and horizontal scoll is not moving if tabindex focus is out of overflow width.
Expected behaviour horizontal scroll should move when tabindex is out of scroll width. (As it like Firefox 3)
Kindly suggest me if you come across any solution.
CODE:
------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<style>
.exp{
border:1px solid #666;
}
tr td
{
width:100px;
}
</style>
<div id="cnt" style="border:1px solid red; height: 100px; width:502px;overflow:auto">
<table cellspacing="0px" cellpadding="0px" style="table-layout:fixed; width: 100%;" id="tb1">
<tbody id="mytable">
<tr><td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit<td tabindex=0>amet<td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit</tr>
<tr><td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit<td tabindex=0>amet<td tabindex=0>lorem<td tabindex=0>ipsum<td tabindex=0>dollar<td tabindex=0>sit</tr>
</tbody></table>
</div>
</body>
</html>
------------------------------------------------------------------------------
By using keyboard tab key, I'm able see the tabindexed td in firefox, but in IE 6,7 I'm unable to see tab-indexed current td while moving, and horizontal scoll is not moving if tabindex focus is out of overflow width.
Expected behaviour horizontal scroll should move when tabindex is out of scroll width. (As it like Firefox 3)
Kindly suggest me if you come across any solution.