I have positioned a div relatively in a table cell. I am using position: relative to make the cell of the containing block, so that the position and size of my absolute DIV(which is present inside the relative div) will be calculated in relation to this block. When I scroll the table in IE7 the relatively positioned div is not scrolling along with rows.
Hi,
In IE6 and 7 the positioned children of a parent that has overflow other than visible become fixed. This is an old bug and indeed is often used to mimic position:fixed which is not supported in IE6.
The solution is that where overflow is applied you also need to add position:relative if the element is not positioned. In your case that would be here:
.tableScrollBar {
height:600px;
overflow-x: hidden;
overflow-y: auto;
[B] position:relative;[/B]
}
You also need haslayout when you create a stacking context otherise IE6/7 won’t place the element correctly.
[B].inputError {zoom:1.0;}[/B]
I mean table headers are falling on to the first row.
Hi,
I’m guessing that you are actually trying to make the header row fixed and not scroll with the rest of the table? Or did you mean something else?
It looks like you are using the technique I used in one of the css quizzes and absolutely placing the header row outside of the table so that it appears to remain fixed. Unfortunately this method precludes using any elements in the tables that are positioned in IE7 and under due to the nasty bug I already mentioned. This is a major flaw in ie6 and 7 and there is no work-around for this situation because the position:relative fix stops the header row from being positioned outside the current context.
All you could do is to let ie7 have a normal scrolling header instead but allow it to be fixed for better browsers. Remove the position:relative from here:
.tableScrollBar {
height: 600px;
overflow-x: hidden;
overflow-y: auto;
/* position: relative;*/
}
And then try giving IE7 its own rules:
<!--[if lte IE 7]>
<style type="text/css">
.tableScrollBar {position:relative}
.th_inner{position:static}
.tableFirstColRightBorder {
left:32px;
}
.mainContent {
position:relative;
}
.inputError {
zoom:1.0;
}
</style>
<![endif]-->
Sorry but I couldn’t see a way around this apart from using two tables with one for the header and then one for the scrolling data.
This was the whole code I was testing with:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>User View</title>
<link href="css/stylesheet.css" rel="stylesheet">
<style type="text/css">
/*-------------------------------
Site: Admin 4.0
CSS author: Om Prakash
Created: 5th May 2011
Updated: 19th July 2011
Updated by: Om Prakash
--------------------------------*/
/* CSS Reset
----------------------------------------------- */
html {
color:#000;
background:#FFF
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0
}
address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var {
font:inherit
}
del, ins {
text-decoration:none
}
li {
list-style:none
}
caption, th {
text-align:left
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal
}
abbr, acronym {
border:0;
font-variant:normal
}
sup {
vertical-align:baseline
}
sub {
vertical-align:baseline
}
legend {
color:#000
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display:block;
}
/* For General
----------------------------------------------- */
body {
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
margin:0 auto;
width:99%;
}
a {
outline-style:none;
color:#333;
}
a:hover {
color:#000;
text-decoration:none;
}
strong {
font-weight:bold;
}
th {
font-weight:bold;
padding:3 5px;
}
.floatLeft {
float:left;
}
.floatRight {
float:right;
}
.clearBoth {
clear:both;
}
.hide {
display:none;
}
.leftAlignedText {
text-align:left;
}
.rightAlignedText {
text-align:right;
}
.centerAlignedText {
text-align:center;
}
button {
border:solid 1px #b9770c;
background-color:#f3a42b;
color:#000;
font-weight:bold;
-moz-border-radius:5px;
-webkit-border-radius:5px;
cursor:pointer;
border-radius:5px;
font-family:Tahoma, Geneva, sans-serif;
font-size:11px;
padding:2px 4px;
}
button:hover {
background:#99C332;
border:solid 1px #789b28;
}
button:disabled {
background-color:#B8B8B8;
border:1px solid #828282;
color:#D9D9D9;
font-weight:bold;
padding:1px 4px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
h1 {
font-size:18px;
padding:0 0 9px 0;
}
/* Header */
header {
overflow:hidden;
}
.companyLogo {
float:left;
padding:0 0 15px 0;
}
.productLogo {
float:right;
}
.logoutMyaccount {
text-align:center;
float:right;
padding:10px 25px 0 0;
line-height:16px;
}
/* Tabs */
nav {
overflow:hidden;
}
nav ul li {
float:left;
}/* For IE7 */
nav ul li a {
-moz-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius: 10px 10px 0 0;
padding:7px 10px;
color:#000;
font-weight:bold;
font-size:12px;
border:solid 1px #faa62a;
border-bottom:none;
text-decoration:none;
display:block;
float:left;
margin:0 4px 0 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fad59f', endColorstr='#fa9907'); /* for IE */
background:-webkit-gradient(linear, left top, left bottom, from(#fad59f), to(#fa9907));/* for webkit browsers */
background: -moz-linear-gradient(top, #fad59f, #fa9907);/* for firefox 3.6+ */
}
nav ul li a:hover {
background:-moz-linear-gradient(top, #edf4df, #9dc53b);
background:-webkit-gradient(linear, left top, left bottom, from(#edf4df), to(#9dc53b));
color:#000;
font-weight:bold;
border:solid 1px #a1b473;
border-bottom:none;
text-decoration:none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#edf4df', endColorstr='#9dc53b');
}
nav ul li a.activeTab {
background:-moz-linear-gradient(top, #d6e5b1, #9dc53b);
background:-webkit-gradient(linear, left top, left bottom, from(#d6e5b1), to(#9dc53b));
border:solid 1px #a1b473;
border-bottom:none;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6e5b1', endColorstr='#9dc53b');/* for IE */
}
.activeTab:hover {
background:-moz-linear-gradient(top, #d6e5b1, #9dc53b);
background:-webkit-gradient(linear, left top, left bottom, from(#d6e5b1), to(#9dc53b));
border:solid 1px #a1b473;
border-bottom:none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6e5b1', endColorstr='#9dc53b');
}
.subNav {
background-color:#99c332;
text-align:right;
overflow:hidden;
padding:6px;
}
.subNav ul {
float:right;
}
.subNav ul li {
list-style-type:none;
color:#fff;
float:left;
}
.subNav ul li a {
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:12px;
margin:0 8px;
}
.subNav ul li a:hover {
text-decoration:none;
color:#000;
}
.subNav ul li a.subNavActive {
text-decoration:none;
color:#000;
}
.mainContent {
padding:9px 0 0 0;
position:relative;
}
.tableActions {
border:solid 1px #789b28;
background-color:#f5f6e6;
padding:6px;
width:auto;
margin:0 0 -1px;
}
.tableActions select {
padding:2px;
}
.inputSearch {
padding:1px;
}
footer {
text-align:center;
padding:7px 0 10px;
background-color:#99c332;
margin:10px 0;
}
/* Dotted line Tree view sprite */
.parentTreeMax, .parentTreeMin, .parentLastMin, .childLastMax, .childMax, .childMin, .childOneLine, .childOneLineContent, .childOneLineContentEnd, .childTwoLinesMax, .childTwoLinesMin, .childTwoLinesEndMax, .childTwoLinesEndMin, .childTwoLines, .childTwoLinesContent, .childTwoLinesContentEnd, .childThreeLines, .childThreeLinesContent, .childThreeLinesContentEnd, .thirdLevelChildOnelineEnd, .thirdLevelChildTwolines, .addMoreline {
background:url('../images/dotted_sprite.png') no-repeat;
border-left:none!important;
}
.parentTreeMax div:first-child, .parentTreeMin div:first-child {
float:left;
padding-left:11px;
}
.parentTreeMax {
background-position:-28px 17px;
}
.parentTreeMin {
background-position:-28px 34px;
}
.parentLastMin {
background-position:-8px -358px;
text-align:right;
}
.childLastMax {
background-position:-8px -276px;
text-align:right;
}
.childMax {
background-position:-27px -108px;
}
.childMin {
background-position:-27px -172px;
}
.childOneLine {
background-position:30px -373px;
text-align:right;
}
.childOneLineContent {
background-position:30px -469px;
text-align:right;
}
.childOneLineContentEnd {
background-position:30px -511px;
text-align:right;
}
.childTwoLinesMax {
background-position:-8px -108px;
text-align:right;
width:50px;
}
.childTwoLinesMin {
background-position:-8px -172px;
text-align:right;
width:50px;
}
.childTwoLinesEndMax {
background-position:11px -276px;
text-align:right;
width:50px;
}
.childTwoLinesEndMin {
background-position:11px -358px;
text-align:right;
width:50px;
}
.childTwoLines {
background-position:-8px -9px;
}
.childTwoLinesContent {
background-position:-8px -44px;
text-align:right;
}
.childTwoLinesContentEnd {
background-position:-8px -225px;
text-align:right;
}
.childThreeLines {
background-position: 11px 0;
text-align:right;
width:50px;
}
.childThreeLinesContent {
background-position:11px -44px;
text-align:right;
width:50px;
}
.childThreeLinesContentEnd {
background-position:11px -226px;
text-align:right;
width:50px;
}
.thirdLevelChildOnelineEnd {
background-position:11px -432px;
text-align:right;
width:50px;
}
.thirdLevelChildTwolines {
background-position:11px -304px;
text-align:right;
width:50px;
}
.addMoreline {
background-position:-8px -259px
}
.tableContainer {
border:solid 1px #789b28;
height:600px;
margin:0 auto;
padding:23px 0 0 0;
position:relative;/* For IE8 */
overflow:hidden;
z-index:0
}
.tableContainer table tr td {
}
.tableHeaderBg {
background-color:#99c332;
height:23px;
left:0;
right:0;
top:0;
position:absolute;
border-bottom:solid 1px #fff;
margin:1px 1px 0 0;
z-index:0
}
.tableScrollBar {
height:600px;
overflow-x: hidden;
overflow-y: auto;
}
.mainTable tr th {
border:solid 1px #fff;
background-color:#99c332;
padding:0 5px;
text-align:left;
}
.mainTable tr td {
border:solid 1px #fff;
background-color:#b4d16f;
padding:4px;
line-height:15px;
}
.mainTable tr td.borderNone {
border-right:transparent 0px solid;
}
.table_1 tr th {
background-color:#e2e5bd;
padding:0.3% 0 0.2% 0.3%;
line-height:15px;
border-left:none;
border-top:none;
}
.table_1 tr td {
background-color:#f5f6e6;
padding:0.3% 0 0.2% 0.3%;
line-height:15px;
}
.table_2 tr th {
background-color:#e3e5cd;
padding:0.3% 0 0.2% 0.3%;
line-height:15px;
border-left:none;
border-top:none;
}
.table_2 tr td {
background-color:#f5f6e6;
padding:0.3% 0 0.2% 0.3%;
line-height:15px;
border-left:none;
border-top:none;
}
.table_3 tr th {
background-color:#e4e5dd;
padding:0.3% 0 0.2% 0.3%;
line-height:15px;
border-left:none;
border-top:none;
}
.table_3 tr td {
background-color:#f5f6e6;
padding:0.3% 0 0.2% 0.3%;
line-height:15px;
}
.tableFirstColRightBorder {
position:absolute;
width:1px;
height:622px;
margin:-22px 0 0 0;
z-index:5;
left:24px;
background-color:#fff;
}
.mainTable .borderRightNone, .table_1 .borderRightNone, .table_1 th.borderRightNone, .table_1 .borderRightNone, .table_1 tr td.borderRightNone, .table_1 td.borderRightNone, .softPhoneDevices td.borderRightNone {
border-right:none
}
.th_inner {
border-left: 1px solid #fff;
line-height:24px;
margin:0 0 0 -6px;
padding:0 0 0 5px;
position:absolute;
text-align:left;
top:-2px;
z-index:99;
}
.inheritRemove {
padding:0!important;
border:none!important;
}
.tableFirstColcellPadding {
padding:3px;
}
.spaceLeft {
padding:0 0 0 20px;
}
.spaceLeft div {
float:left
}
.tableFirstColLeftBorderNone {
border-left:transparent 1px solid;
padding-left:15px;
}
.minimizeIcon {
background:url('../images/mainsprite.png') no-repeat -44px -3px;
}
.maximizeIcon {
background:url('../images/mainsprite.png') no-repeat -27px -3px;
}
.minimizeIcon, .maximizeIcon {
height:13px;
width:13px;
text-decoration:none;
display:block;
cursor:pointer
}
.fixedWidthDotted {
width:50px;
}
.fixedWidthDotted a {
float:right;
}
/* User view table widths */
.uvUserinfo1_1 {
width:2%;
}
.uvUserinfo1_2 {
width:98%;
}
.uvUserinfo2_1 {
width:2%;
}
.uvUserinfo2_2 {
width:4%;
}
.uvUserinfo2_3 {
width:6%;
}
.uvUserinfo2_4 {
width:8%;
}
.uvUserinfo2_5 {
width:78%;
}
.uvSerInfo1_1 {
width:2%;
}
.uvSerInfo1_2 {
width:98%;
}
.uvSerInfo2_1 {
width:2%;
}
.uvSerInfo2_2 {
width:4%;
}
.uvSerInfo2_3 {
width:6%;
}
.uvSerInfo2_4 {
width:8%;
}
.uvSerInfo2_5 {
width:80%;
}
.uvDevices1_1 {
width:2%;
}
.uvDevices1_2 {
width:98%;
}
.uvDevices2_1 {
width:2%;
}
.uvDevices2_2 {
width:4%;
}
.uvDevices2_3 {
width:8%;
}
.uvDevices2_4 {
width:8%;
}
.uvDevices2_5 {
width:8%;
}
.uvDevices2_6 {
width:8%;
}
.uvDevices2_7 {
width:62%;
}
.uvDevices3_1 {
width:2%;
}
.uvDevices3_2 {
width:4%;
}
.uvDevices3_3 {
width:14%;
}
.uvDevices3_4 {
width:80%;
}
.uvDevices4_1 {
width:2%;
}
.uvDevices4_2 {
width:4%;
}
.uvDevices4_3 {
width:8%;
}
.uvDevices4_4 {
width:8%;
}
.uvDevices4_5 {
width:8%;
}
.uvDevices4_6 {
width:8%;
}
.uvDevices4_7 {
width:62%;
}
.uvDevices5_1 {
width:2%;
}
.uvDevices5_2 {
width:4%;
}
.uvDevices5_3 {
width:9%;
}
.uvDevices5_4 {
width:85%;
}
.uvGroups1_1 {
width:2%;
}
.uvGroups1_2 {
width:98%;
}
.uvGroups2_1 {
width:2%;
}
.uvGroups2_2 {
width:4%;
}
.uvGroups2_3 {
width:94%;
}
.uvAddons1_1 {
width:2%;
}
.uvAddons1_2 {
width:4%;
}
.uvAddons1_3 {
width:9%;
}
.uvAddons1_4 {
width:85%;
}
.uvAddons3_1 {
width:2%;
}
.uvAddons3_2 {
width:4%;
}
.uvAddons3_3 {
width:9%;
}
.uvAddons3_4 {
width:85%;
}
.uvAddons4_1 {
width:2%;
}
.uvAddons4_2 {
width:4%;
}
.uvAddons4_3 {
width:9%;
}
.uvAddons4_4 {
width:10%;
}
.uvAddons4_5 {
width:10%;
}
.uvAddons4_6 {
width:65%;
}
.uvRoles1_1 {
width:2%;
}
.uvRoles1_2 {
width:98%;
}
.uvRoles2_1 {
width:2%;
}
.uvRoles2_2 {
width:4%;
}
.uvRoles2_3 {
width:6%;
}
.uvRoles2_4 {
width:88%;
}
.uvServices1_1 {
width:2%;
}
.uvServices1_2 {
width:98%;
}
.uvServices2_1 {
width:2%;
}
.uvServices2_2 {
width:4%;
}
.uvServices2_3 {
width:9%;
}
.uvServices2_4 {
width:9%;
}
.uvServices2_5 {
width:76%;
}
.uvServicesAss1_1 {
width:2%;
}
.uvServicesAss1_2 {
width:98%;
}
.uvServicesAss2_1 {
width:2%;
}
.uvServicesAss2_2 {
width:4%;
}
.uvServicesAss2_3 {
width:94%;
}
.uvPersonalRou1_1 {
width:2%;
}
.uvPersonalRou1_2 {
width:98%;
}
.uvPersoanlRou2_1 {
width:2%;
}
.uvPersoanlRou2_2 {
width:4%;
}
.uvPersoanlRou2_3 {
width:5%;
}
.uvPersoanlRou2_4 {
width:87%;
}
/* User Copy
----------------------------------------------- */
.inputUser {
padding:2px;
}
.errorInputUser {
padding:2px;
border:solid 1px #e84f4f;
}
.closeButton {
text-decoration:none;
margin:3px 0 0 4px;
}
.closeButton span {
padding:1px 0 0 14px;
background:url(../images/mainsprite.png) no-repeat 0px -100px;
}
.closeButton:hover {
text-decoration:none;
}
.moreLink {
color:#335fcf;
text-decoration:underline;
font-weight:bold;
padding:3px 0 0 0;
}
.mainTable select {
padding:2px;
}
.inputSmall {
width:50px;
}
.autoSaveUserView {
font-size:12px;
font-weight:bold;
padding:3px 0 0 0;
width:50%;
margin:0px auto;
text-align:center;
position:absolute;
text-decoration:none;
color:#567609;
}
/* Create User
----------------------------------------------- */
.Content_Left {
width:616px;
}
.usercreation {
width:auto;
clear:both;
}
.usercreation label {
display:inline-block;
width:236px;
text-align:right;
float:left;
line-height:1.8em;
padding:0 5px 15px 0;
}
.usercreation .input_text {
display:inline-block;
position:relative;
}
.input_Text {
background-color:#f7f7f7;
border:solid 1px #c2c2c2;
width:235px;
padding:5px;
}
.passwords {
width:auto;
clear:both;
background-color:#dfe0d3;
padding:8px 8px 0 15px;
margin:0 0 5px 0;
}
.passwords label {
display:inline-block;
width:70px;
text-align:right;
float:left;
line-height:1.8em;
padding:0 5px 0 0;
}
.passwords .input_text {
display:inline-block;
padding:0 0 10px 0;
}
.socialNetwoks {
width:auto;
clear:both;
background-color:#dfe0d3;
padding:8px 8px 0 15px;
margin:0 0 5px 0;
}
.socialNetwoks label {
display:inline-block;
width:70px;
text-align:right;
float:left;
line-height:1.8em;
padding:0 5px 0 0;
}
.socialNetwoks .input_text {
display:inline-block;
padding:0 0 10px 0;
float:left;
}
.borderTop {
border:solid 1px #e2e5bd;
padding:15px 0 0 0;
background-color:#f5f6e6;
margin:0 0 10px 0;
}
.submitForm {
padding:0 0 10px;
text-align:left;
}
.tooltipMain {
padding:0 0 0 10px;
display:block;
position:absolute;
top:0;
left:255px;
z-index:1;
}
.tooltipBorder {
padding:5px;
width:245px;
text-align:left;
-moz-box-shadow:4px 4px 2px -2px #CCCCCC;
-webkit-box-shadow:4px 4px 2px -2px #CCCCCC;
box-shadow:4px 4px 2px -2px #CCCCCC;
background-color:#fff;
border:solid 1px #779e1c;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#CCCCCC, Direction=135, Strength=3);
}
.tooltipBorder ul li {
margin:0 0 0 21px;
padding:4px 0;
}
.popupArrow {
position:absolute;
top:5px;
left:1px;
background:url('../images/mainsprite.png') no-repeat 0px -119px;
width:10px;
height:17px;
display:block;
z-index:1;
}
.facebookIcon, .twitterIcon, .myspaceIcon, .linkedinIcon {
width:20px;
height:20px;
background:url('../images/mainsprite.png') no-repeat;
margin:2px 0 0 4px;
float:left;
}
.twitterIcon {
background-position:0 -25px
}
.myspaceIcon {
background-position:0 -50px;
}
.linkedinIcon {
background-position:0 -75px;
}
/* Add more Pop-ups */
.disableBody {
background-position:center top;
background-repeat:repeat-x;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
opacity:0.3;
z-index:44;
background-color:#000000;
filter:Alpha(Opacity=30);
}
.modelBox {
left:0;
position:fixed;
top:15%;
width:100%;
z-index:100;
}
.boxShadow {
margin:auto;
z-index:45;
background-color:#fff;
overflow:hidden;
width:500px;
padding:10px;
}
.popupBorder {
padding:12px;
width:520px;
margin:auto;
background:url('../images/popupbg.png') repeat 0 0;
}
.modelBox .head {
clear:both;
background-color:#b4d16f;
float:left;
width:96%;
padding:1% 2%;
margin:0 0 8px 0;
}
.modelBox .head h2 {
font-size:14px;
color:#fff;
float:left;
font-weight:bold;
}
.formLabel {
width:auto;
clear:both;
}
.formLabel label {
display:inline-block;
width:160px;
text-align:right;
float:left;
line-height:1.8em;
padding:0 5px 15px 0;
}
.formLabel .input_text {
display:inline-block;
position:relative;
float:left;
}
.formLabel textarea {
width:245px;
background-color:#f7f7f7;
border:solid 1px #c2c2c2;
}
.groupsPopup {
height:294px;
overflow-y:scroll;
clear:both;
float:left;
width:500px;
}
.groupsPopup a {
display:block;
float:left;
border:solid 1px #e2e5bd;
padding:7px;
background-color:#f5f6e6;
width:141px;
margin:0 4px 4px 0;
text-decoration:none;
cursor:pointer
}
.groupsPopup a:hover {
border:solid 1px #929843;
background:#9ab950 url('../images/mainsprite.png') no-repeat 125px -142px;
}
.selectedGroup {
border:solid 1px #929843!important;
background:#b4d16f url('../images/mainsprite.png') no-repeat 125px -142px!important;
}
.selectMenu {
width:245px;
padding:2px;
}
.tableActions div div {
float:left;
position:relative;
z-index:6;
}
.tableActions div div a.actionLink {
padding:3px 23px 3px 7px;
display:block;
border:solid 1px #779e1c;
text-decoration:none;
background-color:#fff;
font-weight:bold;
}
.tableActions div div span {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
top:10px;
right:7px;
position:absolute;
}
.tableActions div div ul {
position:absolute;
top:20px;
left:0;
background-color:#ccc;
z-index:5;
padding:4px;
width:93px;
-moz-box-shadow:4px 4px 2px -2px #7e7e7e;
-webkit-box-shadow:4px 4px 2px -2px #CCCCCC;
box-shadow:4px 4px 2px -2px #7e7e7e;
background-color:#fff;
border:solid 1px #779e1c;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#7e7e7e, Direction=135, Strength=3);
}
.tableActions div div ul li {
padding:1px;
}
.tableActions div div ul li a {
padding:4px 8px;
display:block;
text-decoration:none;
}
.tableActions div div ul li a:hover {
background-color:#e2e5bd;
}
.addonTopContent {
border-bottom:solid 1px #b8d376;
padding:0 0 8px 0;
line-height:20px;
}
.addonsList {
overflow-y:auto;
height:400px;/* For IE7 */
position:relative;
}
.addonsList ul li {
padding:5px 0
}
.sortingMain {
float:right;
}
.sortingMain .ulOff {
position:absolute;
top:18px;
background-color:#ccc;
width:140px;
-moz-box-shadow:4px 4px 2px -2px #7e7e7e;
-webkit-box-shadow:4px 4px 2px -2px #CCCCCC;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#7e7e7e, Direction=135, Strength=3);
box-shadow:4px 4px 2px -2px #7e7e7e;
background-color:#fff;
border:solid 1px #779e1c;
padding:4px;
z-index:10;
}
.sortingMain ul li {
clear:both;
}
.sortingMain ul li a {
padding:0 9px;
display:block;
text-decoration:none;
font-weight:normal;
}
.sortingMain ul li a:hover {
background-color:#e2e5bd;
}
.sortAnchor {
cursor:pointer;
display:block;
height:11px;
padding:4px;
position:absolute;
top:5px;
width:14px;
background:url('../images/mainsprite.png') no-repeat 5px -260px;
}
.filterInputLastColumn {
background-color:#ccc;
z-index:10;
-moz-box-shadow:4px 4px 2px -2px #7e7e7e;
-webkit-box-shadow:4px 4px 2px -2px #ccc;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#7e7e7e, Direction=135, Strength=3);
box-shadow:4px 4px 2px -2px #7e7e7e;
background-color:#fff;
border:solid 1px #779e1c;
padding:4px 8px;
font-weight:normal;
line-height:20px;
position:absolute;
top:76px;
left:-117px;/* IE7 */
#left:-147px;
}
.ascendingIcon, .decendingIcon, .filterIcon {
display:block;
float:left;
height:11px;
margin-right:5px;
padding:7px 5px;
width:15px;
border-right:solid 1px #d1d696;
}
.ascendingIcon {
background:url('../images/mainsprite.png') no-repeat 3px -169px;
}
.decendingIcon {
background:url('../images/mainsprite.png') no-repeat 3px -194px;
}
.filterIcon {
background:url('../images/mainsprite.png') no-repeat 3px -217px;
}
.filterInput {
background-color:#ccc;
z-index:10;
-moz-box-shadow:4px 4px 2px -2px #7e7e7e;
-webkit-box-shadow:4px 4px 2px -2px #ccc;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#7e7e7e, Direction=135, Strength=3);
box-shadow:4px 4px 2px -2px #7e7e7e;
background-color:#fff;
border:solid 1px #779e1c;
padding:4px 8px;
font-weight:normal;
line-height:20px;
position:absolute;
top:76px;
right:-288px;/* IE7 */
#right:-297px;
}
.audioConf {
background-color:#f5f6e6;
border:solid 1px #e4e7c2;
padding:5px 5px 5px 9px;
margin:5px 5px 5px 15px;
}
.audioConf ul li {
list-style-type:none;
position:relative;
}
.audioConf ul li input[type=text] {
border:solid 1px #c2c2c2;
background-color:#f7f7f7;
padding:4px;
font-size:11px;
width:165px;
}
.autoAssign {
padding:5px;
background-color:#dfe0d3;
}
.autoAssign table tr td {
padding:3px 0;
}
.operatorConsole {
background-color:#f5f6e6;
border:solid 1px #e4e7c2;
padding:5px;
margin:5px 5px 5px 15px;
}
.operatorConsole ul li {
list-style-type:none;
}
.operatorConsole ul li input {
border:solid 1px #c2c2c2;
background-color:#f7f7f7;
padding:4px;
font-size:11px;
}
/* Pavan */
.spaceLeft2 {
padding-left:40px
}
.spaceLeft2 div {
float:left
}
/*---------- bubble tooltip -----------*/
a.toolTipAnchor {
position:relative;
z-index:1;
text-decoration:none;
color:#000000;
cursor:pointer;
}
a.toolTipAnchor span {
display:none;
z-index:1;
}
a.toolTipAnchor:hover {
z-index:1;
}
a.toolTipAnchor:hover span.tooltip {
display:block;
position:absolute;
left:14px!important;
padding: 1px 0 0 0;
width:200px;
text-align:left;
top:-6px;
#top:5px;
z-index:1
}
a.toolTipAnchor:hover span.top {
display: block;
padding: 20px 0px 0 8px;
background: url('..//images/bubble.png') no-repeat right top;
}
a.toolTipAnchor:hover span.middle {
display: block;
padding: 0 15px 0 20px;
background: url('../images/bubble_filler.png') repeat-y right top;
position:relative;
font-size:11px;
}
a.toolTipAnchor:hover span.bottom {
display: block;
padding:3px 8px 10px;
background: url('../images/bubble.png') no-repeat right bottom;
position:relative;
}
.Contact_phone_number_date {
color:#8f8f8f;
width:40px;
background-color:#f7f7f7;
border:solid 1px #c2c2c2;
padding:5px;
font-size:11px
}
.Billing_phone_number {
width:100px;
background-color:#f7f7f7;
border:solid 1px #c2c2c2;
padding:5px;
font-size:11px;
}
.start_text {
color:#FF0000
}
.requiredFields {
color:#FF0000;
font-size:10px;
float:right;
padding-top:5px;
}
a.toolTipAnchor:hover span.middleToolContent {
position:relative;
top:-10px;
display:block;
}
.questionIcon {
position:relative;
#top:-4px;
z-index:0;
}
.userpswdmsg {
font-size:16px;
font-weight:bold;
font-family:arial;
color:#ff0000
}
.tooltipInputText {
width:235px;
}
.tooltipIcon {
background:url('../images/mainsprite.png') no-repeat -26px -17px;
padding:9px;
}
.hintContentPopup {
padding:8px 5px;
background-color:#efefef;
border:solid 1px #d6d6d6;
text-align:left;
width:235px;
position:absolute;
left:178px;
top:7px;/* For IE7 */
#top:6px;
z-index:10;
}
.hintContentPopup h2 {
margin:0px;
padding:0px;
font-size:12px;
font-weight:normal;
padding-bottom:6px;
}
.hintContentPopup ul {
margin:0 0 0 20px;
padding:0px;
font-size:11px;
}
.hintContentPopup ul li {
list-style-type:disc
}
.hintContentPopup ol {
margin:0 0 0 20px;
padding:0px;
font-size:12px;
line-height: 14px
}
.zIndexOne {
z-index:1;
}
.actionMessage {
margin:0px auto;
width:10%;
-moz-border-radius:0 0 10px 10px;
background-color:#fac77b;
padding:10px;
color:#000;
font-weight:bold;
font-size:12px;
position:fixed;
top:0;
left:45%;
text-align:center;
z-index:1000;
}
.mainTable {
width:100%;
}
.mainTable tbody tr td table {
width:100%;
}
.hideTD {
visibility:hidden;
line-height:0!important;
height:0;
padding:0px!important;
border:none!important;
}
.usersColumn {
padding:0px
}
.inhertBorderRemove tr td {
border:none;
padding:0;
}
.inputError {
position:relative;
}
.inputErrorPopup {
position:absolute;
top:0px;
right:0px;
border:solid 1px red;
}
.tooltip {
display:block;
position:absolute;
top:25px;
left:0px;
z-index:1;
}
.tooltipBor {
padding:5px;
width:245px;
text-align:left;
-moz-box-shadow:4px 4px 2px -2px #CCCCCC;
-webkit-box-shadow:4px 4px 2px -2px #CCCCCC;
box-shadow:4px 4px 2px -2px #CCCCCC;
background-color:#fff;
border:solid 1px #779e1c;
filter:progid:DXImageTransform.Microsoft.Shadow(Color=#CCCCCC, Direction=135, Strength=3);
}
.tooltipBor ul li {
padding:4px;
}
.tooltipBor ul li.errorText {
background-color:#FFF2F2;
border:1px solid #CC0000;
}
.tooltipArrow {
position:absolute;
top:-8px;
left:4px;
background:url('../images/mainsprite.png') no-repeat -43px -22px;
width:17px;
height:9px;
display:block;
z-index:1;
}
.userNametip {
padding-left:0px!important;
left:11px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.tableScrollBar {position:relative}
.th_inner{position:static}
.tableFirstColRightBorder {
left:32px;
}
.mainContent {
position:relative;
}
.inputError {
zoom:1.0;
}
</style>
<![endif]-->
<script src="http://shivanand.in/forums/table/js/javascript.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">?</script><![endif]-->
</head>
<body>
<!--<div class="actionMessage">Loading...</div>-->
<div class="mainContent">
<h1>User View</h1>
<div class="tableContainer">
<div class="tableHeaderBg"></div>
<div class="tableFirstColRightBorder"></div>
<div class="tableScrollBar">
<table class="mainTable">
<thead>
<tr>
<th> <div class="th_inner tableFirstColcellPadding">
<input type="checkbox">
</div></th>
<th> <div class="th_inner tableFirstColLeftBorderNone">Users
<div class="sortingMain" onMouseOut="hidesorting()" onMouseOver="showsorting()"> <a href="#" class="sortAnchor"></a>
<div class="ulOff" id="sortingDropdown" style="display:none">
<ul>
<li><a href="#"><span class="ascendingIcon"></span>Sort Ascending</a></li>
<li><a href="#"><span class="decendingIcon"></span>Sort Decending</a></li>
<li><a href="#" class="filter" onMouseOver="showRegularEx()"><span class="filterIcon"></span>Filters</a></li>
</ul>
</div>
<div class="filterInput" style="display:none" id="regularEx">
<input type="text">
</div>
</div>
</div></th>
<th> <div class="th_inner">ID Name
<div class="sortingMain" onMouseOut="hidesorting1()" onMouseOver="showsorting1()"> <a href="#" class="sortAnchor"></a>
<div class="ulOff" id="sortingDropdown1" style="display:none">
<ul>
<li><a href="#"><span class="ascendingIcon"></span>Sort Ascending</a></li>
<li><a href="#"><span class="decendingIcon"></span>Sort Decending</a></li>
<li><a href="#" class="filter" onMouseOver="showRegularEx1()"><span class="filterIcon"></span>Filters</a></li>
</ul>
</div>
<div class="filterInput" id="regularEx1" style="display:none">
<input type="text">
</div>
</div>
</div></th>
<th> <div class="th_inner">
<div style="clear:both;">First Name</div>
<div class="sortingMain" onMouseOut="hidesorting2()" onMouseOver="showsorting2()"> <a href="#" class="sortAnchor"></a>
<div class="ulOff" id="sortingDropdown2" style="display:none">
<ul>
<li><a href="#"><span class="ascendingIcon"></span>Sort Ascending</a></li>
<li><a href="#"><span class="decendingIcon"></span>Sort Decending</a></li>
<li><a href="#" class="filter" onMouseOver="showRegularEx2()"><span class="filterIcon"></span>Filters</a></li>
</ul>
</div>
<div class="filterInput" style="display:none" id="regularEx2">
<input type="text">
</div>
</div>
</div></th>
<th> <div class="th_inner">Last Name
<div class="sortingMain" onMouseOut="hidesorting3()" onMouseOver="showsorting3()"> <a href="#" class="sortAnchor"></a>
<div class="ulOff" id="sortingDropdown3" style="display:none">
<ul>
<li><a href="#"><span class="ascendingIcon"></span>Sort Ascending</a></li>
<li><a href="#"><span class="decendingIcon"></span>Sort Decending</a></li>
<li><a href="#" class="filter" onMouseOver="showRegularEx3()"><span class="filterIcon"></span>Filters</a></li>
</ul>
</div>
<div class="filterInput" style="display:none" id="regularEx3">
<input type="text">
</div>
</div>
</div></th>
<th> <div class="th_inner">Extension
<div class="sortingMain" onMouseOut="hidesorting4()" onMouseOver="showsorting4()"> <a href="#" class="sortAnchor"></a>
<div class="ulOff" id="sortingDropdown4" style="display:none;">
<ul>
<li><a href="#"><span class="ascendingIcon"></span>Sort Ascending</a></li>
<li><a href="#"><span class="decendingIcon"></span>Sort Decending</a></li>
<li><a href="#" class="filter" onMouseOver="showRegularEx4()"><span class="filterIcon"></span>Filters</a></li>
</ul>
</div>
<div class="filterInput" id="regularEx4" style="display:none;">
<input type="text">
</div>
</div>
</div></th>
<th><div class="th_inner"> </div></th>
</tr>
</thead>
<tbody>
<tr>
<td class="borderNone hideTD"></td>
<td class="parentTreeMin hideTD"> Amy Coca</td>
<td class="hideTD">amy@mycompany.com</td>
<td class="hideTD">FirstNameFirstName</td>
<td class="hideTD">LastNameLastName</td>
<td class="hideTD">ExtensionExtension</td>
<td class="hideTD"> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"disabled></td>
<td class="parentTreeMin usersColumn" id="amyname"><table class="inhertBorderRemove">
<tr>
<td><div id="amy_img_min"><a onClick="javascript:showHideDiv('amy');" class="minimizeIcon"> </a></div>
<div id="amy_img_max" style="display:none"><a onClick="javascript:showHideDiv('amy');" class="maximizeIcon"> </a></div></td>
<td><div class="inputError">
<input type="text" value="ram3">
<div id="userNameTip" class="tooltip userNametip"> <span class="tooltipArrow"> </span>
<div class="tooltipBor">
<ul>
<li>The User name must be at least 8 characters
long and max of 20 characters long.</li>
<li class="errorText">No numeric character [0-9].</li>
<li>Must not contain spaces</li>
</ul>
</div>
</div>
</div></td>
</tr>
</table></td>
<td><div class="inputError">
<input type="text" value="ram23">
<div id="userNameTip" class="tooltip"> <span class="tooltipArrow"> </span>
<div class="tooltipBor">
<ul>
<li>The ID Name must be at least 8 characters
long and max of 20 characters long.</li>
<li class="errorText">No numeric character [0-9].</li>
</ul>
</div>
</div>
</div></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td width="40%"><input type="checkbox">
Auto assign
<input type="text" class="inputSmall">
<a href="#">Check Availability</a></td>
<td width="60%"> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
<tr>
<td class="borderNone"><input type="checkbox"></td>
<td class="parentTreeMin" id="jarname"><div id="jar_img_min"><a onClick="javascript:showHideDiv('jar');"class="minimizeIcon"> </a></div>
<div id="jar_img_max" style="display:none"><a onClick="javascript:showHideDiv('jar');" class="maximizeIcon"> </a></div>
Jarod</td>
<td>jarod@mycompany.com</td>
<td>Jarod</td>
<td>5667</td>
<td>8280</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
<footer>©2011 PanTerra Networks, Inc. All Rights Reserved. | <a href="#">Privacy Policy</a></footer>
</div>
</body>
</html>
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="http://l.yimg.com/t/smb/js/geov2.js"></script>
<script language="javascript">geovisit();</script>
<noscript>
<img src="http://visit1.geo.vip.in2.yahoo.com/visit.gif?in1312358647" alt="setstats" border="0" width="1" height="1">
</noscript>
Hi Paul,
Thanks for your feedback. However I would like to make it clear that we are not using 2 tables with one for the header and then one for the scrolling data. What we have done is we gave padding top of 23px to class .tableContainer. So this is pushing the scroll bar down.
Absolutely positioned class .taleHeaderBg with top:0. Absolutely positioned class .th_inner with top:0. These are positioning the headers to top.
You didn’t pay attention to what I was saying or to my demonstrations which I took considerable time testing (an hour or so). 
I never mentioned two tables until the very end when I suggested that it may be the only solution for IE7 and under if you want to have positioned content in the main table because of the nasty overflow/position bug.
The method you are using to create the fixed header is actually my method from the quiz that I set long ago so I know how it works in detail. You seem to have misunderstood how it works as it is not pushing anything down but rather that the header row is placed absolutely so that it sits above the scroll table and because the table is overflow scroll the content scrolls but the absolute element does not because the stacking context for the absolute element is outside the scroll element.
Try the code I posted above and you will see that it is working fine in IE8+. You will either have to give IE7 a normal scrolling header as I already explained or perhaps look for a javascript solution to the fixed header issue.
Of course you never answered my first question as to whether you really wanted a fixed header anyway so we may be talking at cross purposes.
Apologies for not going through your mail properly. The requirement is to have a fixed header. Thanks for your help. Any further help to fix the issue is highly appreciated.