5

Hi

Im trying to position an element so its slightly positioned outside its parent item. In IE8 it works but in IE7 the positioned element gets clipped.

Here's my code HTML:

<div id="parent">
    <div id="child">text</div>
</div>

The CSS

#parent {
height: 40px;
width: 400px;
position: relative;
}

#child {
position: absolute;
width: 100px;
height: 60px;
top: 0px;
left: 0px;
}

In IE7 you will see that the last 20px of the child element gets clipped. How can I solve this?

THX

6
  • Do you have a live example? Here's one jsfiddle.net/PCg6m
    – Kyle
    May 21, 2010 at 7:49
  • awesome! When I brokedown my original code I thought it wouldn't work but apperantly it does. Now I know its not a bug so I'll have to review my code again. Hopefully I can close this issue.
    – yazz
    May 21, 2010 at 8:31
  • now I found the problem. If its I have an sibling to the parent element that has is position relative assigned to it. jsfiddle.net/DrhBE
    – yazz
    May 21, 2010 at 8:42
  • I found it. I just put a z-index to the relative positioned elements and it seems to work. Got to say that is a first. I've never before set a z-index to a relative positioned element. Lovely IE!
    – yazz
    May 21, 2010 at 8:50
  • 2
    If this is the solution to your problem, please add it as a solution and accept it.
    – jackocnr
    Jun 7, 2010 at 11:09
4

Its just the famous z-index bug for IE7
The problem with IE7 is that it applies z-index=0 for all the positioned elements
i.e elements with position != static has z-index=0.
So eventually this stacking context that causes the issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.