ASP Hosting sale!
Double disk space and transfer for FREE!
Limited time offer! Act Now!

aspdev | articles | tutorials | forums

 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

problem with positioning when changing style

Post new topic   Reply to topic Forum Index -> JavaScript / DHTML / HTML / CSS
View previous topic :: View next topic  
Author Message

Joined: 14 Mar 2006
Posts: 1

PostPosted: Tue Mar 14, 2006 1:34 pm    Post subject: problem with positioning when changing style Reply with quote

i want to write a table in which the header doesn't move when the table is scrolled down, and that also allows dynamic change in the content styling.
i need it to work in explorer.

i tried the following code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en"><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="en-us" />

<style type="text/css">

/* begin some basic styling here */
body {
background: #FFF;
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0

/* end basic styling */

/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid green;
height: 285px;
overflow: auto;
width: 756px

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
overflow: hidden;
width: 756px

/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
width: 740px

/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. */
html>body div.tableContainer table {
width: 756px

/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative

/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
display: block

/* make the TH elements pretty */
thead.fixedHeader td {
background: green;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left

color: green;

color: black;
function setData(){
var html = new Array();
html[html.length] = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" class=\"scrollTable\"><thead class=\"fixedHeader\"><tr><td>bbb</td></tr><tr><td>aaaa</td></tr></thead><tbody class=\"scrollContent\" id=\"scrollContent\">";
for(var i =0;i<30;i++){
html[html.length] = "<tr id=row"+i+" onmouseover='highlightRow("+i+")' onmouseout='unhighlightRow("+i+")'><td id='cell"+i+"' class='noHighlight'>bla bla"+i+"</td></tr>"
html[html.length] = "</tbody></table>";
document.getElementById('tableContainer').innerHTML = html.join("");

function highlightRow(i){

document.getElementById("cell"+i).className = "highlight"

function unhighlightRow(i){

document.getElementById("cell"+i).className = "noHighlight";
</head><body onload="setData()">

<div id="tableContainer" class="tableContainer">




the problem is when i scroll the table, and then go over a row, the positioning of the thead is lost.
any ideas on how i can avoid it, or how i can do it differently?
Back to top
View user's profile Send private message

Joined: 11 Oct 2004
Posts: 128

PostPosted: Thu Mar 16, 2006 7:41 am    Post subject: Reply with quote

Do you have the page published online? If yes, please post the URL here.

World Countries | Survival Skills
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic Forum Index -> JavaScript / DHTML / HTML / CSS All times are GMT - 5 Hours
Page 1 of 1

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Powered by phpBB © 2001, 2002 phpBB Group

SQL Tutorial