CSS Codes
CSS Layouts
Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: overflow-y: scroll not working in IE6 -- Help

  1. 11-11-2007, 02:03 PM #1
    buntyindia
    buntyindia is offline Junior Coders
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default overflow-y: scroll not working in IE6 -- Help

    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,

    PHP Code:
    <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> 
    Reply With Quote Reply With Quote
  2. 11-11-2007, 04:01 PM #2
    BLiZZaRD's Avatar
    BLiZZaRD
    BLiZZaRD is offline Elite Coders
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    I believe IE needs scrolling set to :auto. I will have to look it up.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result = mysql_query("SELECT finger FROM hand WHERE id=3");
    echo     $result; 
    Reply With Quote Reply With Quote
  3. 11-11-2007, 04:09 PM #3
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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/s...ead.php?t=9456

    Unfortunately, not all of the examples linked to in that thread still exist.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  4. 11-11-2007, 04:37 PM #4
    buntyindia
    buntyindia is offline Junior Coders
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Reply With Quote Reply With Quote
  5. 11-11-2007, 05:13 PM #5
    buntyindia
    buntyindia is offline Junior Coders
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 ?
    PHP Code:
    <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]--> 
    Reply With Quote Reply With Quote
  6. 11-11-2007, 07:52 PM #6
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  7. 11-12-2007, 10:24 AM #7
    buntyindia
    buntyindia is offline Junior Coders
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It's really very help full. I learned one new thing today ....

    Regards,
    Reply With Quote Reply With Quote
  8. 11-12-2007, 02:22 PM #8
    buntyindia
    buntyindia is offline Junior Coders
    Join Date
    Jun 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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%
    }
    Reply With Quote Reply With Quote
  9. 11-12-2007, 02:36 PM #9
    boogyman
    boogyman is offline Elite Coders
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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
    Reply With Quote Reply With Quote
  10. 11-12-2007, 07:53 PM #10
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by buntyindia View Post
    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%
    }
    Quote Originally Posted by boogyman View Post
    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
    Actually no. The 'Child Selector' 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:

    Code:
    * 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules