PDA

Click to See Complete Forum and Search --> : [RESOLVED] overflow:auto; height:inherit; works in Firefox not IE

Ultimater
04-25-2006, 10:28 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>overflow:auto; height:100%; in IE</title>
</head>
<body>

<div style="position:absolute;width:150px; height:100%; overflow:auto; background-color:red;"">
a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>
</div>

</body>
</html>

The above renders prefectly how I want it to in Firefox.
IE on the other hand doesn't like height:100%; and wants an actual value...

Any suggestions?
Ultimater
04-25-2006, 11:10 PM
Forget it, I solved it. I searched for "100% IE css" and came across this thread:
http://forums.devshed.com/css-help-116/100-height-does-not-work-in-ie-314437.html
which told me to use:

body {
height: 100%;
}
html {
height: 100%;
}



Finished product:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en" style="height:100%;">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<title>overflow:auto; height:100%; in IE</title>
<style type="text/css">
body {height: 100%;padding:0;margin:0;}
html {height: 100%;padding:0;margin:0;}
div#nav{position:absolute;width:150px; height:100%; overflow:auto; background-color:red;padding:0;margin:0;}
</style>
</head>
<body style="height:100%;">

<div id="nav">
a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>a<br>b<br>
</div>

</body>
</html>