ansaurus

Question

Why doesn't the percentage width child in absolutely positioned parent work in IE7?

Answer 1

+9 A:

Does the parent div have a defined width either pixel or percentage? Not 100% sure but I think in IE7, the parent div needs a defined width for child percentage divs to work correctly.

2008-08-01 12:22:51

Answer 2

+3 A:

Here is some sample code. I think this is what you are looking for. The following displays exactly the same in Firefox 3 (mac) and IE7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<style>
#absdiv {
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 80%; 
    height: 60%; 
    background: #999;
}

#pctchild {
    width: 60%; 
    height: 40%; 
    background: #CCC;
}

#reldiv {
    position: relative;
    left: 20px;
    top: 20px;
    height: 25px;
    width: 40%;
    background: red;
}
</style>
</head>

<body>
<div id="absdiv">
    <div id="reldiv">
    </div>
    <div id="pctchild">
    </div>
</div>
</body>
</html>

maclema 2008-08-05 05:54:23

Answer 3

A:

IE prior to 8 has a temporal aspect to its box model that most notably creates a problem with percentage based widths. In your case here an absolutely positioned div by default has no width. Its width will be worked out based on the pixel width of its content and will be calculated after the contents are rendered. So at the point IE encounters and renders your relatively positioned div its parent has a width of 0 hence why it itself collapses to 0.

If you would like a more in depth discussion of this along with lots of working examples, have a gander here.

Evil Andy 2008-09-04 09:02:42

Answer 4

+1 A:

Why doesn’t the percentage width child in absolutely positioned parent work in IE7?

-- Because it's Internet Exploder

Is there something I'm missing here?

-- That is, to raise your co-worker's / clients' awareness that IE sucks.

Is there an easy fix besides the pixel-based width on the child?

-- Use em as they are more useful when creating liquid layouts as you can use them for padding and margins as well as font-sizes. So your whitespace grows and shrinks proportional to your text if it is resized (which is really what you need). I don't think percentages give a finer control than ems; there's nothing to stop you specifying in hundredths of ems (0.01 em) and the browser will interpret as it sees fit.

Is there an area of the CSS specification that covers this?

-- None, as far as I remember em's and %'s were intended for font sizes alone back at CSS 1.0.

lock 2009-05-13 07:47:40

Answer 5

A:

I think this has something to do with the way the hasLayout property is implemented in the older browser.

Have you tried your code in Ie8 to see if works in there, too?

Ie8 has a Debugger (F12) and can also run in IE7 mode.

Mike 2010-10-22 16:21:10

ansaurus

tags:

views:

answers:

Why doesn't the percentage width child in absolutely positioned parent work in IE7?

related questions