Hello,
I'm having problems closing the gap on a page in IE6. I want the table
on the right to fill 100% of the right_panel container. In IE6, there
is a 2px gap on the left. When I try to set a width of 100% on the
<table> or in the table class in the CSS, the table gets pushed down so
it starts below the left panel content. So, the gap goes away, but now
I need the table moved back up to the top of the container. Any
thoughts? Here's the code:
<!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>
<style>
#main_body
{
position: absolute;
left: 0px;
top: 56px;
margin: 0px;
padding: 0px;
width: 100%;
}
#left_panel
{
float: left;
width: 210px;
}
#right_panel
{
padding: 0px;
margin-left: 216px;
margin-right: 6px;
border: 1px solid #999;
}
..results_grid
{
padding: 0px;
margin: 0px;
background-color: #fff;
}
..panel_title {
width: 100%;
background-color: #555;
color: #fff
}
</style>
</head>
<body>
<div id="main_body">
<div id="left_panel">
<div class="panel_title">Left Panel</div>
</div>
<div id="right_panel">
<table class="results_grid" border="1" cellpadding="0"
cellspacing="0">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td style="width: 20%;">
12345
</td><td style="width: 50%;">
Data Data Data Data Data Data Data Data Data Data Data Data Data
Data Data Data
</td><td style="width: 30%;">
Unknown
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
