Forum Moderators: open
If you make a div with absolute position, like this...
<div style="position: absolute; top: 0px; left: 200px;">
...it overflows the right edge of the page because IE7 b3 is not subtracting the 200 pixels from the rendered width. It's too wide. It renders correctly in Firefox and IE6.
I've filed this at Microsoft Connect IE7 feedback, bug 164223 and I since realise it's probably the same as their bugs 156575 and 157457.
div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="position: absolute; top: 0px; left: 200px;">
<h1>Internet Explorer 7 bug (CSS, page width, position: absolute)</h1>
<p>This text should fit within the width of the page as it does in Internet Explorer 6 and Firefox, however there is a bug in Internet Explorer 7 beta 3 which makes the text overflow the right edge of the page.</p>
<p>This text element is in a <div> that has the following CSS positioning: </p>
<p>position: absolute; top: 0px; left: 200px;</p>
<p>The width of this column of text should be the width of the page minus 200 pixels but IE7 is forgetting to subract the 200 pixels and hence the page is wider than is should be.</p>
</div>
</body>
</html>
I agree that subtracting 200px (being the left: value) from the width automatically is sensible, but it might not be part of the CSS specification.
Kaled.
beta2P had all sorts of errors with AP I wonder if some of them have come back,
I had this demo code if you would like to check what happens with it? - the commented out conditional was what made it work for Beta2P, although it is working fine in B2, I'm hoping that if they fixed it once they'll get to it again!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>absolute-positiongtest</title>
<style type="text/css" media="screen">
body {
background: white;
margin: 0;
padding: 0;
}
div {
position: absolute;
left: 20px;
right: 20px;
}#lorem {top: 30px; bottom: 35px; background-color: red;}
#ipsum {top: 40px; bottom: 45px; background-color: green;}
#dolor {top: 50px; bottom: 55px; background-color: lime;}
#foo {top: 60px; bottom: 6px; background-color: yellow;}
</style><!--[if IE 7]>
<style type="text/css" media="screen">
/* sum all tops & bottom values of all parents/containing blocks and what you want it to be? */
/* #ipsum {bottom: 110px;} /* 30 + 35 + 45 */
/* #dolor {bottom: 205px;} /* 30 + 35 + 40 + 45 + 55 */
/* #foo {bottom: 261px;} /* 30 + 35 + 40 + 45 + 50 + 55 + 6 */
</style>
<![endif]--></head>
<body>
<div id="lorem">#lorem
<div id="ipsum">#ipsum
<div id="dolor">#dolor
<div id="foo">#foo
<p>This demo is showing that IE7B2 is now supporting left and right properties together but that it still hasn't got the bottom co-ordinate (and therefore the height) to calculate properly yet?<p>
<p>In the CSS there is a conditional block where if you change the target to IE7 it will show the desired results.
In order to get a bottom value, I had to sum all of the elements ascendant/containing blocks' top and bottom co-ordinates and then add the required value -?</p>
</div>
</div>
</div>
</div>
</body>
</html>
[edited by: SuzyUK at 10:08 am (utc) on July 18, 2006]
Unfortunately right: 0px; makes no difference.
SuzyUK, that code (without modification) looks exactly the same in IE7 beta 3 and Firefox.
I think this must be a new bug.
Nick
>>new
= must be else the right side would've been off the screen! thanks for checking
Suzy
