Problem with 100% height table layout
-
Its a simple 3 cell table layout:
top left contIn firefox it shows up just as i wanted, but when i open it in IE7 the table is actually bigger than window size and the vertical scroll bar apears. When i resize window it sometimes shows correct, but most of the time not. what am i doing wrong here? -
Its a simple 3 cell table layout:
top left contIn firefox it shows up just as i wanted, but when i open it in IE7 the table is actually bigger than window size and the vertical scroll bar apears. When i resize window it sometimes shows correct, but most of the time not. what am i doing wrong here?You are not doing anything wrong. The issue here is how the html element is interpreted by the brwosers. The two browsers implement it in different ways. So you cannot fix the issue without JavaScript. Here is a possible solution:
<!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><title>Test</title>
<script type="text/javascript">
<!--
function resizeProperly() {
if (window.innerHeight) {
document.body.style.width =
window.innerWidth + "px";
document.body.style.height =
window.innerHeight + "px";
} else {
document.body.style.width =
document.documentElement.offsetWidth + "px";
document.body.style.height =
document.documentElement.offsetHeight + "px";
}
}window.onresize = window.onload = resizeProperly;
//-->
</script>
</head>
<body style="height: 100%;margin:0;padding:0">
<table style="height:100%;width: 100%; border: 5px solid #000000;">
<tr>
<td colspan="2" style="width:100%">top</td></tr>
<tr>
<td style="width:100%">left</td>
<td style="width:100%">
cont</td></tr>
</table>
</body>
</html>Co-Author ASP.NET AJAX in Action
-
You are not doing anything wrong. The issue here is how the html element is interpreted by the brwosers. The two browsers implement it in different ways. So you cannot fix the issue without JavaScript. Here is a possible solution:
<!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><title>Test</title>
<script type="text/javascript">
<!--
function resizeProperly() {
if (window.innerHeight) {
document.body.style.width =
window.innerWidth + "px";
document.body.style.height =
window.innerHeight + "px";
} else {
document.body.style.width =
document.documentElement.offsetWidth + "px";
document.body.style.height =
document.documentElement.offsetHeight + "px";
}
}window.onresize = window.onload = resizeProperly;
//-->
</script>
</head>
<body style="height: 100%;margin:0;padding:0">
<table style="height:100%;width: 100%; border: 5px solid #000000;">
<tr>
<td colspan="2" style="width:100%">top</td></tr>
<tr>
<td style="width:100%">left</td>
<td style="width:100%">
cont</td></tr>
</table>
</body>
</html>Co-Author ASP.NET AJAX in Action
Seems part of my html code doesnt show inside code tags. Here's the link to page for what i was going for: http://212.18.51.202/layout.htm and problem i'm getting in IE: http://img143.imageshack.us/img143/1761/ssqh7.gif Thanks
