Forums

Get help. Give help. A Web Design and Development Community.

Absolute elements inside a relative disappears in IE7

  • # October 28, 2009 at 11:02 am

    Hi,
    Does anyone have a solution for the absolute elements that disappears inside a relative element in IE7? Test the code below in FF and IE7 to see the difference.
    Thanks!

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Absolute elements inside a relative elements disappears in IE7


    # October 28, 2009 at 11:55 am

    . . . IE doesn’t like the word "grey". If you change it to "gray" it works fine. :D

    # October 29, 2009 at 5:06 am

    Ha ha!! THAT is weird bug!!! Sorry about that small mistake, but that wasn’t the real problem.

    Here is some new code that is more accurate and that illustrates the problem. Run it in FF and in IE7/IE8 to see it.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    IE7 Bug


    IE7 Bug


    # October 29, 2009 at 5:39 am

    This reply has been reported for inappropriate content.

    Well I really can’t be bothered to boot up the pc to have a look in ie7 but I suspect your problem is coming from chaining the classes.

    Code:

    IE7 Bug

    .wrapper {
    width: 300px;
    }
    .item {
    background: #ccc none;
    border: 1px solid #828282;
    height: 100px;
    margin-bottom: 5px;
    position: relative;
    width: 100%;
    }
    .settings {
    background: #E3E6E9 none repeat scroll 0 0;
    border: 1px solid #828282;
    height: 150px;
    position: absolute;
    right: -1px;
    top: -1px;
    width: 200px;
    z-index: 10000;
    }

    IE7 Bug

    # October 29, 2009 at 7:15 am

    hi dude , you better position the div element relatively to the parent div witch is the wrapper ,i think it’s going to solve you’re little problem .here is your code with changes that i made.

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    IE7 Bug


    IE7 Bug


    # October 29, 2009 at 8:39 am

    This reply has been reported for inappropriate content.

    "webdesigner82" wrote:
    hi dude , you better position the div element relatively to the parent div witch is the wrapper ,i think it’s going to solve you’re little problem .here is your code with changes that i made.

    Actually the parent is the first .item div.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

We have a pretty good* newsletter.