Results 1 to 4 of 4

Thread: IE6 collapsing absolute positioned box with % width

  1. #1
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default IE6 collapsing absolute positioned box with % width

    Alright, I remember reading something about this happening but didn't think much of it and a Google search has led to nothing useful yet.

    The problem is I have an absolutely positioned box in the center of my page. It renders fine in all browsers except IE6 (possibly above, not sure) it collapses the box to the size of whatever is inside.

    The old thing I read mentioned it being the usage of percentage heights and widths as well as absolute positioning. The fact that it started right after I changed to percentages seems to confirm this lol.

    The code used is:

    CSS
    Code:
    #popup {
    width: 40%;
    height: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10%;
    margin-left: -20%;
    color: #000000;
    text-align: center;
    background: #FFFFFF;
    border: #000000 1px solid;
    display: none;
    }
    HTML
    Code:
    <div id="popup">
    a popup!
    <div>
    How can I prevent the box from collapsing in IE? I don't really care for 6. Or anything below 8 for that matter, but to alert the users that the site might not work properly if they are running below 8 (according to conditional comments) they get that pop up when they load the site.

    I figure at least the "it might not work" should work...

    Thanks
    Tm

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by twQ View Post
    Alright, I remember reading something about this happening but didn't think much of it and a Google search has led to nothing useful yet.

    The problem is I have an absolutely positioned box in the center of my page. It renders fine in all browsers except IE6 (possibly above, not sure) it collapses the box to the size of whatever is inside.

    The old thing I read mentioned it being the usage of percentage heights and widths as well as absolute positioning. The fact that it started right after I changed to percentages seems to confirm this lol.

    The code used is:

    CSS
    Code:
    #popup {
    width: 40%;
    height: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10%;
    margin-left: -20%;
    color: #000000;
    text-align: center;
    background: #FFFFFF;
    border: #000000 1px solid;
    display: none;
    }
    HTML
    Code:
    <div id="popup">
    a popup!
    <div>
    How can I prevent the box from collapsing in IE? I don't really care for 6. Or anything below 8 for that matter, but to alert the users that the site might not work properly if they are running below 8 (according to conditional comments) they get that pop up when they load the site.

    I figure at least the "it might not work" should work...

    Thanks
    Tm
    I believe that IE Conditional Comments: http://haslayout.net/condcom will get you where you want.

  3. #3
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default

    I believe you misunderstood my question. I know what those are, and I'm already using them to display the box.

    The issue is when it's displayed IE 6 (not sure about other versions), it collapses the box down so rather than being some amount of pixels high it's just high enough to accommodate the text in it.

    From what I remember reading it is my combination of a percentage height (height: 30%) and my positioning (position: absolute).

    Thanks for trying!
    Tim

  4. #4
    Join Date
    Sep 2008
    Location
    Seattle, WA
    Posts
    135
    Thanks
    1
    Thanked 11 Times in 11 Posts

    Default

    Try using a fixed height and width and make sure your absolutely positioned div is inside of a relatively positioned one. The positioning is relative to the closest container your box is located in.

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
  •