I have 2 inputs: they both have a width: 100%, and the second one is an absolute box:
<!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>
<style type="text/css">
#box1 { position: absolute }
#box1 { background: #666 }
input { width: 100% }
</style>
</head>
<body>
<form>
<input type="text">
<div id="box1">
<input type="text">
</div>
</form>
</body>
</html>
- On standard-compliant browsers, the
width: 100%seems to have no effect on the input inside the absolutely positioned box, but it does on the input which is not inside that absolutely absolute box. - On IE7, both inputs take the whole width of the page.
Two questions come to mind:
- Why does the
width: 100%have no effect with standard-compliant browsers? I have to say that the way IE7 renders this feels more intuitive to me. - How can I get IE7 to render things like the other browsers, if I can't remove the
width: 100%and can't set a width on the absolutely positioned box?