Log in

View Full Version : overflow-y: scroll not working in IE6 -- Help


buntyindia
11-11-2007, 02:03 PM
Hi I am creatng a Scrollable Table following is my code.

This table is working fine in Mozilla but in IE 6 it is not showing the Scroll Bars..

Please Hellp...

Regards,


<html>
<head></head>
<body>

<div id="singleselect" style="overflow: hidden; height: 250px; width: 700px;">

<table id="myScrollTable" style="height: auto; width: 700px;" border="1">

<tr>
<th >Col1</th>
<th >Col2</th>
<th >Col3</th>
<th >Col4</th>
</tr>

<tbody style="overflow-x: hidden; overflow-y: scroll;height: 100px;">
<tr>
<td>10</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>10</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>30</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>20</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>10</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>10</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>20</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>10</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>40</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
<tr>
<td>10</td>
<td>Sample Data 2</td>
<td>Sample Data 3</td>
<td>Sample Data 4</td>
</tr>
</tbody>
</table>

</div>


</body>
</html>
BLiZZaRD
11-11-2007, 04:01 PM
I believe IE needs scrolling set to :auto. I will have to look it up.
jscheuer1
11-11-2007, 04:09 PM
Here is some code updated from an earlier thread that may be of use. It shows normal tables in Opera & Safari (v 3), scrollable tables in IE 6 & 7, and FF:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST SCROLLING</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.tableContainer {
position: relative; /* to capture the absolutely positioned table header */
padding-top: 19px; /* space for the column heads */
margin: 0 auto;
width: 80%;
border-bottom: 1px solid #708090
}

table {
width: 100%;
}

thead td, thead th {
font-size: 14px;
font-weight: bold;
text-align: left;
background-color: #ffefd5;
color: #4682b4;
border: solid 1pt #708090;
width: 116px
}

td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: left;
font-family: Arial,sans-serif;
border-bottom: solid 1px #708090;
border-left: solid 1px #708090;
border-right: solid 1px #708090;
width: 125px
}
</style>
<!--[if IE]>
<![if !IE]>
<![endif]-->
<style type="text/css">
tbody {
height: 100px;
overflow: auto;
border-right:1px solid #708090;
}
tbody tr {
width:98%;
overflow:hidden;
}
</style>
<!--[if IE]>
<![endif]>
<![endif]-->

<!--[if IE]>
<style type="text/css">
/* this enables the table to scroll without scrolling the page */
.innerframe {
overflow-y: scroll;
overflow-x:hidden;
width: auto;
height: 100px; /* height is required */
border-right:1px solid #708090;
}

/* position the row of column heads above the table */
.tableContainer thead tr {
position: absolute; /* throws the header out of the table */
top: 0px;
left: 0px;
}
</style>
<![endif]-->
</head>

<body>



<div class="tableContainer">

<div class="innerframe">
<table cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>

<tbody>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>

</tbody>
</table>

</div>
</div>

<p><p>

<div class="tableContainer">
<div class="innerframe">
<table cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>

</tr>
</thead>

<tbody>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>

</tbody>
</table>

</div>
</div>

</body>
</html>

Reference:

http://www.dynamicdrive.com/forums/showthread.php?t=9456

Unfortunately, not all of the examples linked to in that thread still exist.
buntyindia
11-11-2007, 04:37 PM
Thanks jscheuer1,

Let see will it work for me or not :)

Please also see if any workaround for this overflow-y:scroll is available or not I am using IE6
buntyindia
11-11-2007, 05:13 PM
jscheuer1 i have one concern,

In the example that u provided CSS will be applied to all the tables inside my HTML document. I want to apply it only to one specific table

What changes I have to do then ?


<style type="text/css">

.tableContainer {
position: relative; /* to capture the absolutely positioned table header */
padding-top: 19px; /* space for the column heads */
margin: 0 auto;
width: 80%;
border-bottom: 1px solid #708090
}

table {
width: 100%;
}

thead td, thead th {
font-size: 14px;
font-weight: bold;
text-align: left;
background-color: #ffefd5;
color: #4682b4;
border: solid 1pt #708090;
width: 116px
}

td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: left;
font-family: Arial,sans-serif;
border-bottom: solid 1px #708090;
border-left: solid 1px #708090;
border-right: solid 1px #708090;
width: 125px
}
</style>
<!--[if IE]>
<![if !IE]>
<![endif]-->
<style type="text/css">
tbody {
height: 100px;
overflow: auto;
border-right:1px solid #708090;
}
tbody tr {
width:98%;
overflow:hidden;
}
</style>
<!--[if IE]>
<![endif]>
<![endif]-->

<!--[if IE]>
<style type="text/css">
/* this enables the table to scroll without scrolling the page */
.innerframe {
overflow-y: scroll;
overflow-x:hidden;
width: auto;
height: 100px; /* height is required */
border-right:1px solid #708090;
}

/* position the row of column heads above the table */
.tableContainer thead tr {
position: absolute; /* throws the header out of the table */
top: 0px;
left: 0px;
}
</style>
<![endif]-->
jscheuer1
11-11-2007, 07:52 PM
Well, markup (the stuff in the body) isn't independent of style. In general, you can limit to one which page element gets any sort of treatment by giving it a unique id and adding that id to the style selectors in the appropriate spots in the stylesheet. In this particular (and any similar) case, you would also not use the class designation for elements in the rest of your markup that you don't want their styles applied to. You can also remove/change the cellspacing and width attributes from the table tags of other tables on the page as desired. Here is essentially the same demo, with the first table selected by its id (scroll) and the second one now devoid of any style or attributes. I did make one economy in the style section. I realized I had a spot where I was closing an IE conditional comment, only to open it again on the next line. So, other than the above mentioned changes, I took care of that as well:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST SCROLLING</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.tableContainer {
position: relative; /* to capture the absolutely positioned table header */
padding-top: 19px; /* space for the column heads */
margin: 0 auto;
width: 80%;
border-bottom: 1px solid #708090
}

table#scroll {
width: 100%;
}

#scroll thead td, #scroll thead th {
font-size: 14px;
font-weight: bold;
text-align: left;
background-color: #ffefd5;
color: #4682b4;
border: solid 1pt #708090;
width: 116px
}

#scroll td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: left;
font-family: Arial,sans-serif;
border-bottom: solid 1px #708090;
border-left: solid 1px #708090;
border-right: solid 1px #708090;
width: 125px
}
</style>
<!--[if IE]>
<![if !IE]>
<![endif]-->
<style type="text/css">
#scroll tbody {
height: 100px;
overflow: auto;
border-right:1px solid #708090;
}
#scroll tbody tr {
width:98%;
overflow:hidden;
}
</style>
<!--[if IE]>
<![endif]>

<style type="text/css">
/* this enables the table to scroll without scrolling the page */
.innerframe {
overflow-y: scroll;
overflow-x:hidden;
width: auto;
height: 100px; /* height is required */
border-right:1px solid #708090;
}

/* position the row of column heads above the table */
.tableContainer thead tr {
position: absolute; /* throws the header out of the table */
top: 0px;
left: 0px;
}
</style>
<![endif]-->
</head>

<body>

<div class="tableContainer">

<div class="innerframe">
<table id="scroll" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>

<tbody>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>

</tbody>
</table>

</div>
</div>

<p><p>

<div>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>

</tr>
</thead>

<tbody>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>
<tr>
<td>test</td>
<td>this is a test</td>

</tr>

</tbody>
</table>

</div>
</div>

</body>
</html>

Notes: It would be possible to use scroll as a class and as class selector (changing all '#scroll' to '.scroll 'and changing 'id="scroll"' to 'class="scroll"'). That would then make it possible to have more than one scrolling table on a page without having all tables on a page be scrolling tables.
buntyindia
11-12-2007, 10:24 AM
It's really very help full. I learned one new thing today .... :)

Regards,
buntyindia
11-12-2007, 02:22 PM
Want to know i thing about css at some places i saw html>body what this means ?

html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
boogyman
11-12-2007, 02:36 PM
html>body
is a mod for IE only, used to trick IE into complying with standards. it was first used in the Box Model Hack (http://css-discuss.incutio.com/?page=BoxModelHack)
jscheuer1
11-12-2007, 07:53 PM
Want to know i thing about css at some places i saw html>body what this means ?

html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}


html>body
is a mod for IE only, used to trick IE into complying with standards. it was first used in the Box Model Hack (http://css-discuss.incutio.com/?page=BoxModelHack)

Actually no. The 'Child Selector (http://www.eskimo.com/~bloo/indexdot/css/syntax/selectors/element.htm#child)' isn't supported by IE prior to IE 7, and then only in compliance mode. As a hack, it used to tell other browsers what to do, confident that IE would ignore it. Since the advent of IE conditional comments with IE 5, these hacks are no longer necessary nor desirable as support for them can, and has at times changed.

What boogyman was probably thinking about is the 'star' html hack:


* html some_selector {
IE only styles here
}

This unsupported hack is also obsolete due to the supported IE conditional comments, and the fact that IE 7 will ignore it in compliance mode.

The Child Selector is valid css, but the 'star' html hack is not. However, due to a lack of universal support for the Child Selector, and now an uneven lack of support for it in browsers (IE) that once universally ignored it, care should be exercised in its use. Conditional comments are much safer and unambiguous.
buntyindia
11-13-2007, 04:23 AM
I agree with you....as this hack is provided for only Mozilla :)