hasLayout.net

Affected Versions

This bug affects: IE7, IE6

Symptoms

Elements with `overflow` set to either `hidden` or `auto` behave as if overflow was set to `visible` when descendants that are causing overflow have position: relative set on them

Date of the Tutorial

Mon Aug 17 15:51:12 2009

Description

Here's another bug I found on Gérard Talbot's IE7 Bug Collection Page. I shamelessly stole the image he was using in his demo, just because I think it's a brilliant way to demonstrate the bug (I hope he won't mind). What I would like to add to Gérard's bug description is that block-level elements fail to clip as well and the bug is equally present when { overflow: auto } is used instead of { overflow: hidden; }. Let's have a look:

Demo

The demo is available on a separate page

HTML Code:

<div class="container">
    <img src="RelPosChildNotClippedByParentOverflowHidden.png"
         width="300"
         height="300"
         alt="">
</div>

<div class="container">
    <div id="block"></div>
</div>

CSS Code:

.container {
    height: 200px;
    width: 200px;
    overflow: hidden;
    border: 5px solid #000;
}

#block {
    width: 300px;
    height: 300px;
    background: url(RelPosChildNotClippedByParentOverflowHidden.png);
}

#block, img {
    position: relative;
}

Sane browsers will show only the green block along with a border around it. IE6 and IE8 will fail to clip by the 200px by 200px container's size and will show the red parts of the image that are only present beyond 200px x 200px square. Also, note that the overflowing descendants cover the border present on .container

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution)

Date of the Solution

Mon Aug 17 15:51:27 2009

Fixed Versions

All of the affected

Description

The fix for the bug is rather trivial. Let's glance at the fixed demo first:

Fixed demo is available on a separate page

HTML Code:

<div class="container">
    <img src="RelPosChildNotClippedByParentOverflowHidden.png"
         width="300"
         height="300"
         alt="">
</div>

<div class="container">
    <div id="block"></div>
</div>

CSS Code:

.container {
    margin-bottom: 150px;
    height: 200px;
    width: 200px;
    overflow: hidden;
    border: 5px solid #000;
    position: relative;
}

#block {
    width: 300px;
    height: 300px;
    background: url(RelPosChildNotClippedByParentOverflowHidden.png);
}

#block, img {
    position: relative;
}

Our markup stayed the same. The only thing I've added is { position: relative; } on our parents - the .container <div>s. Now IE6 and IE7 behave just like the rest of the pack. Enjoy!

Comments

• N/A

  Thu Apr 21 02:26:34 2011

  IE6 and IE8 will fail to clip by the 200px by 200px container's
  
  
  IE8 should be replaced by IE7

• Zoffix Znet

  Sun Sep 27 01:45:11 2009

  Fixed. Thanks.

• Victor Hernandez

  Thu Sep 24 02:00:13 2009

  the fixed demo link takes to the bug demo.

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: