Search code examples
htmlcssinternet-explorer-7internet-explorer-6

CSS - IE6 overflow


I can see some other question have been raised around this issue but none of the answers fixed it for me.

I have a table which is inside a <div>. In IE7 and above this renders fine and the table can be seen clearly using scroll bars. In IE6 however this renders as a single line (e.g. height of 1px).

Here is the css around these elements.

    DIV.ScrollFrame {
        overflow: auto;
        height: 100%;
    }

    .DataTable {
        border-collapse:collapse;
    }

Then the html look like this

<div class="ScrollFrame" >
    <table class="DataTable">
        //some asp to generate the data
    </table>
</div>

Sorry a cannot provide pictures as the data in the table is confidential.

Thank you in advance.


Solution

  • If your solution is to set a fixed height, make sure you serve it for IE6 only. Best practice is to use an IE6 only stylesheet displayed with conditional comments, like so:

    <!--[if IE 6]>
            <link href="/styles/ie6.css" rel="stylesheet" media="screen, print"/>
    <![endif]-->
    

    Alternatively you can use the * html hack, which only IE6 understands.