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

Quote:

---

Originally Posted by twQ

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.

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

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.