unnecessary white space at bottom for netscape

  • Thread starter Thread starter Victor
  • Start date Start date
V

Victor

Hi I have a very strange problem for my page. I have writen a js to make
sure my table's height is 100% for the browser's viewport. my code is just
the following. This works fine for firefox and IE. but in netscape, i found
there is some white space at the bottom of the page whose height is about
10- 20 pixal. and these white space cause the v-scrollbar appears. I have no
idea what is wrong here. Can any one help me on this one.

Cheers
Victor

<!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 runat="server">
<title>Untitled Page</title>
</head>
<body style="padding:0;margin:0; ">
<form id="form1" runat="server">
<script type="text/javascript">
function getWindowHeight()
{
var windowHeight=0;
var minWindowHeight = 700;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else
{
if (document.documentElement&&
document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body&&document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}

if (windowHeight < minWindowHeight)
windowHeight = minWindowHeight;

return windowHeight;
}

function setHeight()
{
if (document.getElementById)
{
var windowHeight=getWindowHeight();

if (windowHeight > 0)
{
var tblMain = document.getElementById("tblMain");
tblMain.style.height = windowHeight + 'px';
}
}
}

window.onload = function() {setHeight();}
window.onresize = function() {setHeight();}

</script>
<table id="tblMain" cellpadding="0" cellspacing="0" width="980px"
style="border:solid 1px red;">
<tr>
<td>
testing info
</td>
</tr>
</table>
</form>
</body>
</html>
 
Hi I have a very strange problem for my page. I have writen a js to make
sure my table's height is 100% for the browser's viewport. my code is just
the following. This works fine for firefox and IE. but in netscape, i found
there is some white space at the bottom of the page whose height is about
10- 20 pixal. and these white space cause the v-scrollbar appears. I have no
idea what is wrong here. Can any one help me on this one.

Cheers
Victor

<!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 runat="server">
<title>Untitled Page</title>
</head>
<body style="padding:0;margin:0; ">
<form id="form1" runat="server">
<script type="text/javascript">
function getWindowHeight()
{
var windowHeight=0;
var minWindowHeight = 700;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else
{
if (document.documentElement&&
document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body&&document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}

if (windowHeight < minWindowHeight)
windowHeight = minWindowHeight;

return windowHeight;
}

function setHeight()
{
if (document.getElementById)
{
var windowHeight=getWindowHeight();

if (windowHeight > 0)
{
var tblMain = document.getElementById("tblMain");
tblMain.style.height = windowHeight + 'px';
}
}
}

window.onload = function() {setHeight();}
window.onresize = function() {setHeight();}

</script>
<table id="tblMain" cellpadding="0" cellspacing="0" width="980px"
style="border:solid 1px red;">
<tr>
<td>
testing info
</td>
</tr>
</table>
</form>
</body>
</html>
Click to expand...

here's nothing related to ASP.NET

Netscape's window.innerWidth and window.innerHeight properties always
included the width/height of scrollbars
http://www.jibbering.com/2002/7/drunclear-measure.html
 
Hello Victor,

Regarding on the problem page, have you tried compare the client-side
rendered html source to see whether there is any different between the
netscape and other browsers? If not, I'm afraid the problem is likely due
to the netscape's particular rendering engine. Also, you can try manually
set all the margin(four margin css style attrributes) to see whether it
helps.

<body style="margin-bottom:0; margin-left:0; margin-right:0; margin-top:0">

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


This posting is provided "AS IS" with no warranties, and confers no rights.
 
Back
Top