Forum Moderators: not2easy
In NN 7.1 however, #Outer extends beyond the right and lower edges of the window, and #Inner extends beyond the right edge.
Is there any way to get this to work in NN as it does in IE?
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
HTML,
BODY
{
POSITION: absolute;
TOP: 0px;
LEFT: 0px;
HEIGHT: 100%;
WIDTH: 100%;
BORDER: 0px none;
MARGIN: 0px;
PADDING: 42px;
OVERFLOW: hidden;
}#Outer
{
BORDER: red 1px solid;
HEIGHT: 100%;
OVERFLOW: auto;
}
#Inner
{
BORDER: blue 1px solid;
}
</style>
</head><body>
<div id="Outer">
<div id="Inner">
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
BODY{
BORDER: 0;
MARGIN: 0;
PADDING: 42px;
OVERFLOW: hidden;
} #Outer{
BORDER: 1px solid red;
HEIGHT: 100%;
OVERFLOW: auto;
}
#Inner{BORDER: 1px solid blue;}
</style>
</head>
<body>
<div id="Outer">
<div id="Inner">
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
<p>MainMainMainMainMain</p>
</div>
</div>
</body>
</html>
You don't need to absolutely position the body and your width and padding was causing your body to be 100% wide plus 42px padding.
With these changes, #Outer no longer extends to 42px above the bottom of the viewport and the scroll bars move back out to the HTML element. In NN, there are no scroll bars at all.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
HTML {
BORDER: 0px;
HEIGHT: 100%;
PADDING: 42px;
OVERFLOW: hidden;
}
BODY {
HEIGHT: 100%;
MARGIN: 0px;
}
#Outer {
BORDER: 1px solid red;
HEIGHT: 100%;
OVERFLOW: auto;
}
#Inner {
BORDER: 1px solid blue;
}
</style>
</head><body>
<div id="Outer">
<div id="Inner">
<p>Interesting, Flashy and Unique Content Goes Here</p>
<p>Interesting, Flashy and Unique Content Goes Here</p>
<p>Interesting, Flashy and Unique Content Goes Here</p>
<p>Interesting, Flashy and Unique Content Goes Here</p>
<p>Interesting, Flashy and Unique Content Goes Here</p>
<p>Interesting, Flashy and Unique Content Goes Here</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!--
if (navigator.appName == "Netscape") {
window.onload=SizeOuter;
window.onresize = SizeOuter;
}function SizeOuter() {
document.getElementById("Outer").style.height
= (document.body.clientHeight - 84) + "px";
}
//-->
</script>
Thanks, everyone, for your help.
