I am having trouble with a nested table with the height set to 100% in ie, the page renders fine in safari, firefox, opera..... but not ie! i have a container table set to a height of 100% (works fine), but then the nested table (in ie) will only scale to the height of the content - not 100% of the available space?
it wouldnt bother me so much, but i have a vertical navigation bar in this nested table, which in ie, moves "up and down" when navigating to different pages....
does anyone know a fix for ie?
heres my CSS:
body
{
margin: 0;
padding: 0;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
height: 100%;
border: none;
}
html
{
margin:0;
padding:0;
height:100%;
border:none
}
a img,:link img,:visited img
{
border: none
}
#wrapper
{
margin: 0 auto;
vertical-align: middle;
height: 100%;
border: none;
padding: 0;
}
#content
{
vertical-align: middle;
height: 100%;
border: none;
}
#nav
{
position: relative;
left: 10px;
top: 20px;
height: 150px;
width: 130px;
border: none;
margin: 0;
padding: 10px;
float: none;
}
***and my HTML*****
<!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>
</head>
<body>
<table id="wrapper" width="100%">
<tr>
<td height="100"> </td>
</tr>
<tr>
<td>
<table id="content" width="100%">
<tr>
<td width="150" valign="top"><table id="nav" width="100%">
<tr>
<td><h1>HOME<br />
<a href="blah/blah.htm">BLAH</a><br />
<a href="blah2/blah2.htm">BLAH2</a><br />
<a href="blah3/blah3.htm">BLAH3</a><br />
<a href="blah4/blah4.htm">BLAH4</a></h1> </td>
</tr>
</table></td>
***etc... etc....
please help
it wouldnt bother me so much, but i have a vertical navigation bar in this nested table, which in ie, moves "up and down" when navigating to different pages....
does anyone know a fix for ie?
heres my CSS:
body
{
margin: 0;
padding: 0;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
height: 100%;
border: none;
}
html
{
margin:0;
padding:0;
height:100%;
border:none
}
a img,:link img,:visited img
{
border: none
}
#wrapper
{
margin: 0 auto;
vertical-align: middle;
height: 100%;
border: none;
padding: 0;
}
#content
{
vertical-align: middle;
height: 100%;
border: none;
}
#nav
{
position: relative;
left: 10px;
top: 20px;
height: 150px;
width: 130px;
border: none;
margin: 0;
padding: 10px;
float: none;
}
***and my HTML*****
<!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>
</head>
<body>
<table id="wrapper" width="100%">
<tr>
<td height="100"> </td>
</tr>
<tr>
<td>
<table id="content" width="100%">
<tr>
<td width="150" valign="top"><table id="nav" width="100%">
<tr>
<td><h1>HOME<br />
<a href="blah/blah.htm">BLAH</a><br />
<a href="blah2/blah2.htm">BLAH2</a><br />
<a href="blah3/blah3.htm">BLAH3</a><br />
<a href="blah4/blah4.htm">BLAH4</a></h1> </td>
</tr>
</table></td>
***etc... etc....
please help
