rooban
07-25-2011, 10:33 AM
Dear all experts,
Please get me the solution for this simple question.
I'm trying to do a layout using table. (I can solve this issue with div but i need the correct solution for this to get me a good understanding in HTML)
Q : Please solve my inner table height in IE8. the code i attached is working fine in IE6 and 7.
Please use the same code from below because its very simple code. Please dont provide solution with javascript. i have worked with those and get the job done. But i need the proper answer for this.
========================================================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
color:#000;
background-color: #fff;
}
html, body {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
.wrapper {
height:100%;
background-color: Gray;
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}
.wrapper .header {
height:60px;
background-color:Green;
}
.wrapper .content {
background-color:Yellow;
*height:85%;
*background-color:Orange;
_background-color:Blue;
}
.wrapper .footer {
height:10px;
background-color:Red;
}
.Contentwrapper { height:100%; background-color:#C6C; }
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td class="header" valign="top">Header</td>
</tr>
<tr>
<td class="content" valign="top">
<table class="Contentwrapper">
<tr>
<td class="ContentBody">
Content Area
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" valign="top">Footer</td>
</tr>
</table>
</body>
</html>
==========================================
Best Regards,
Rooban
Please get me the solution for this simple question.
I'm trying to do a layout using table. (I can solve this issue with div but i need the correct solution for this to get me a good understanding in HTML)
Q : Please solve my inner table height in IE8. the code i attached is working fine in IE6 and 7.
Please use the same code from below because its very simple code. Please dont provide solution with javascript. i have worked with those and get the job done. But i need the proper answer for this.
========================================================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
color:#000;
background-color: #fff;
}
html, body {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
.wrapper {
height:100%;
background-color: Gray;
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}
.wrapper .header {
height:60px;
background-color:Green;
}
.wrapper .content {
background-color:Yellow;
*height:85%;
*background-color:Orange;
_background-color:Blue;
}
.wrapper .footer {
height:10px;
background-color:Red;
}
.Contentwrapper { height:100%; background-color:#C6C; }
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td class="header" valign="top">Header</td>
</tr>
<tr>
<td class="content" valign="top">
<table class="Contentwrapper">
<tr>
<td class="ContentBody">
Content Area
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer" valign="top">Footer</td>
</tr>
</table>
</body>
</html>
==========================================
Best Regards,
Rooban