Resolved Issue with DIV using 100% of remaining Space.. [Archive]

Mad_T

06-09-2012, 11:18 AM

The following works fine in Firefox and Chrome, but not IE9.
In Firefox and Chrome the 'test' div is at the correct position and fills the remaining height of the screen.

In IE9 it appears small in height and width.

How do I get this to work on all 3 browsers ?
Thanks :)

<html><head>
<style type="text/css">
.test {
background: #FFF;
font-size: 10px;
color: #000;
border: 2px solid black;
position:absolute;
top:190px;
right:10;
bottom:10;
left:10;
overflow:auto;
}
</style>

</head><body>
<div style="position:absolute; top:8px; right:8px" >
BLAH BLAH BLAH BLAH BLAH
</div><div id="hidden" style="position:absolute; top:100px; right:15px" ></div>

<div>
<button>Button1</button>
<button>Button2</button>
</div>

<div id="test" class="test">
<h3>DIV WINDOWS</h3>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</div>

</body>
</html>

Candygirl

06-09-2012, 11:45 AM

Hello,

How do I get this to work on all 3 browsers ?
First of all you have to add a doctype (http://www.codingforums.com/showpost.php?p=1117631&postcount=3) on the very top of your document. This will prevent browsers to run in quirks mode and should solve most of compatibility problems.

Also some units are missing in your css:

.test {
right:10px;
bottom:10px;
left:10px;
}