SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute with percentage height in IE6

    I'm trying to achieve a very simple effect in IE6. Please view any of the examples below in any browser other than IE6 to see the desired effect. I've created 3 variations that all produce the same visual effect in browsers other than IE6.

    http://chriscressman.com/absoluteOverlay1/
    http://chriscressman.com/absoluteOverlay2/
    http://chriscressman.com/absoluteOverlay3/

    I can get this to work in IE6 if I set a fixed height that is larger than the natural content height on the gray div. To see this working, visit:

    http://chriscressman.com/absoluteOverlay4/

    Can anyone get this to work in IE6 _without_ setting a fixed height on the gray div?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, IE6 won't let an absolute child use percentage heights unless the parent has a height set. There's no getting around that unless you want to cheat a bit

    You are only using 50% height but if you wnated to cover everything up you could set a height larger then you ever would need, and then hide the overflow with the parent
    Code:
    *{margin:0;padding:0;}
    body{color:black;background:white;font:4em/1 sans-serif;}
    div.gray{position:relative;width:800px;background:gray;overflow:hidden;}
    div.red{position:absolute;top:0;left:0;width:800px;height:999em;background:red;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •