CODEWITHSUNDEEP
htmlcssinternet-explorer-8
hollandlef
hollandlef

Reputation: 247

IE8 Bug with min-height and overflow:hidden?

Check out the following:

http://jsfiddle.net/symposion/P8KBe/7/

in IE8 and then Chrome/Firefox/IE9+. You will notice that in IE8, the inner blue div is sliced off at the edge of the outermost #slicer div, despite the fact that it is only #outer that is overflow:hidden. If I change the min-height on #outer to an explicit height, the problem goes away.

The example may seem contrived, but only because I've simplified it right down here. I've encountered this in a real project and it's causing a headache because I have limited scope to change the layout principles being used - there are too many other dependencies. I'm looking for two things here:

  1. Is this a known bug listed somewhere? What is the simplest statement of the issue? I still don't feel like I really understand the underlying error that is causing IE8 to get this wrong; it's still not a particularly simple test case.

  2. Is there a workaround that doesn't involve changing the styles of #outer and #slicer? In my real world example these are part of a larger page framework that I'm going to have trouble changing, whereas the #inner bit is more readily under my control.

(Update) The original example is very contrived in an effort to be minimal. I have created a new JSFiddle here: http://jsfiddle.net/symposion/NDa6U/ that gives a slightly better view of the real-world problem. If you resize the html pane in IE8, you will notice that eventually the green inner content section starts getting cut off incorrectly. What I'm looking for is for this section to remain 100% of the height of the div it's contained in, ideally without having to make any significant changes to anything other than #innerContainer. But to be honest, I'd be interested in any solution that preserves the basic layout principle (a bottom section that expands from a defined pixel position to a defined distance from the bottom of the page, but has a min-height) that works in IE8.

Upvotes: 1

Views: 509

Answers (1)

thirtydot
thirtydot

Reputation: 228282

How about http://jsfiddle.net/thirtydot/NDa6U/22/?

#innerContainer {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}​

Here's some (relatively) old background information about this technique: http://www.positioniseverything.net/articles/onetruelayout/combined

From personal experience, it works in all modern browsers with no problems.

Upvotes: 1

Related Questions