mizukimakiyama / ie7-js

Automatically exported from code.google.com/p/ie7-js
0 stars 0 forks source link

IE6 ignores width attrib on absolute positioned DIV inside relative positioned DIV #289

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
This is a somewhat special case I've run into, trying to create full height 
column backgrounds with borders.  Below is the soure.  In IE7-8, the second 
column obeys the 220px width where in IE6 it reverts to the parents 500px 
width...

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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" />
<title>Insert title here</title>
<!--[if lt IE 7]>
<script 
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<script 
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js"></script
>
<![endif]-->
<style type="text/css">
.a { margin: 50px; position: relative; }
.a { width: 500px;}
.c1, .c2 { float: left; width: 220px; position: relative }
.b { 
    position: absolute; 
    background-color: #aaa; 
    width: 220px !important; 
    max-width: 220px;
    border: 1px solid green; 
    left: 220px;
}
/*.b2 { position: absolute; width: 220px; height: 100%; background-color: #0af; 
}*/
.d { position: relative; width: 500px; left: -220px;}
.c1.green:hover { color: green; }
</style>
</head>
<body>
<div class="a">
    <div class="b">
        <div class="d">
            <div class="c1 green">Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/>Sat<br/>Nam<br/></div>
            <div class="c2 green">Wahe<br/>Guru<br/>Wahe<br/>Guru<br/>Wahe<br/>Guru<br/>Wahe<br/>Guru<br/></div>
        </div>
    </div>
</div>
</body>
</html>

Original issue reported on code.google.com by harikara...@gmail.com on 4 Nov 2010 at 11:43