2 replies [Last post]
CHolt
Offline
newbie
Last seen: 15 years 14 weeks ago
Joined: 2007-05-07
Posts: 2
Points: 0

I cannot get z-index and scrolling to work together. Here is a little info about my environment. I'm using IE 7.0 in standards mode (The sample html and CSS I'm about to show works when IE is running in quirks mode but I can't run that way).

Here is my html:

Test Page


Name
Major
Sex
English
Japanese
Calculus
Geometry


Student01
Languages
male
80
70
75
80



Student02
Mathematics
male
90
88
100
90



Student03
Languages
female
85
95
80
85



Student04
Languages
male
60
55
100
100



Student05
Languages
female
68
80
95
80



Student06
Mathematics
male
100
99
100
90



Student07
Mathematics
male
85
68
90
90



Student08
Languages
male
100
90
90
85



Student09
Mathematics
male
80
50
65
75



Student10
Languages
male
85
100
100
90

Here is my stylesheet:

div#tbl-container {
width: 418px;
height: 252px;
overflow: scroll;
scrollbar-base-color:#ffeaff;
}

table {
table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
}

div#tbl-container table th {
width: 100px;
}

thead th, thead th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
}

thead th {
top: expression(document.getElementById("tbl-container").scrollTop-2); /*IE5+ only*/
z-index: 20;
}

thead th.locked {z-index: 30;}

td.locked, th.locked{
background-color: #ffeaff;
font-weight: bold;
border-right: 1px solid silver;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); /*IE5+ only*/
position: relative;
z-index: 10;
}

/*these styles have nothing to do with the locked column*/
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
}

td {
padding: 2px 5px 2px 2px;
font-size: 12px;
border-left: 1px solid silver;
border-bottom: 1px solid silver;
text-align: right;
}

button {
width: 150px;
font-weight: bold;
color: navy;
margin-bottom: 5px;
}

div.infobox {
position:absolute;
top:110px;
left:470px;
right:5px;
border: double 4px #6633ff;
padding:8px;
font-size:12px;
font-family:Arial, sans-serif;
text-align:justify;
text-justify:newspaper;
background-color:whitesmoke;
}

blockquote {
font-family: Tahoma, Verdana, sans-serif;
font-size: 85%;
border: double 4px #6633ff;
padding: 8px 20px;
margin: 3% auto auto 0;
background-color: whitesmoke;
width: 418px;
}

.sig {
color:#6633ff;
font-style: italic;
letter-spacing: 2px;
}

The problem is the column headings overwrite the div area. So in effect the z-index is causing the elements to overwrite the containing div tag. I have tried neg. z-indexes and all sorts of combinations but I can't get it to behave properly. Is there a way to layer elements within a container div tag and still have the contents scroll?

Thanks

john love
john love's picture
Offline
Enthusiast
Last seen: 11 years 16 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

Overwriting div area

I cannot address IE 7 for Windows since I am using OS X for the Macintosh. However, for what it's worth, I entered your code with both a Strict and a Transitional DocType and did not experience any overwriting at all.

One tangential point, why do you have overflow: scroll, versus auto?

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!

CHolt
Offline
newbie
Last seen: 15 years 14 weeks ago
Joined: 2007-05-07
Posts: 2
Points: 0

whoops. That is just in

whoops. That is just in there from my mucking around trying to get it to work. It should be auto.

I just found the problem though after reading the CSS specs. The problem has to do with parenting. I had to make the div tag have a relative position as well so that the headers see the div tag as a containing block.