IE8 overflow:auto with max-height

By : Rytis
Source: Stackoverflow.com
Question!

I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set max-height: 100px and overflow:auto, hoping for scrollbars to appear when the content does not fit.

It all works fine in Firefox and IE7, but IE8 behaves as if overflow:hidden was present instead of overflow:auto.

I tried overflow:scroll, still does not help, IE8 simply truncates the content without showing scrollbars. Changing max-height declaration to height makes overflow work OK, it's the combination of max-height and overflow:auto that breaks things.

This is also logged as an official bug in the final, release version of IE8

Is there a workaround? For now I resorted to using height instead of max-height, but it leaves plenty of empty space in case there isn't much data.

By : Rytis


Answers

This is a really nasty bug as it affects us heavily on Stack Overflow with <pre> code blocks, which have max-height:600 and width:auto.

It is logged as a bug in the final version of IE8 with no fix.

http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759

There is a really, really hacky CSS workaround:

http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

/*
SUPER nasty IE8 hack to deal with this bug
*/
pre 
{
    max-height: none\9 
}

and of course conditional CSS as others have mentioned, but I dislike that because it means you're serving up extra HTML cruft in every page request.



I found this : https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/

This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:

* html div#division { height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* sets max-height for IE */ }

and this works for me perfectly so I decided to share this.

By : Vadim Svv


To reproduce:

(This crashes the whole page.)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                X
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

(Whereas this works fine...)

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                                The quick brown fox
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

(And, madly, so does this. [No content in the div at all.])

<HTML>
<HEAD>
    <META content="IE=8" http-equiv="X-UA-Compatible"/>
</HEAD>

<BODY>
    look:

    <TABLE width="100%">
        <TR>
            <TD>
                <TABLE width="100%">
                    <TR>
                        <TD>
                            <DIV style="overflow-y: scroll; max-height: 100px;">
                            </DIV>
                        </TD>
                    </TR>
                </TABLE>
            </TD>
        </TR>
    </TABLE>
</BODY>
</HTML>
By : ANeves


This video can help you solving your question :)
By: admin