Hello,
Embarrassing as it is, I'm stumped by a (I'd imagine) fairly
elementary CSS problem.
Consider the code below. We have a table with three columns, two of
which are set to a width of 150px. The center cell has no specific
width and therefore grows/shrinks as the browser window is re-sized.
In the center cell is a <div>, set to display with the properties set
in #main.
Inside that <div> is another table (the number of rows and columns are
immaterial, I guess) set to 100% width, so that it too appears to
grow/shrink depending on the size of the browser window.
In I.E. 6.something on my Windows machine, the code below results in
the innermost table overlapping (or under-lapping by the looks of it)
with the right-hand column. If I set the width of #main to 100% rather
than auto, the problem seems to go away, but then appears in I.E.
5.something on my Macintosh.
Does anyone have any ideas on how to make this work reliably
cross-browser/platform? How obvious is the thing I'm missing?
Thanks,
Mark
<html>
<head>
<style type="text/css">
<!--
#main {
margin: 10px;
background-color: #99CC00;
padding: 0px;
width: auto;
}
-->
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="150" bgcolor="#990000"> </td>
<td><div id="main">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div></td>
<td width="150" bgcolor="#990000"> </td>
</tr>
</table>
</body>
</html>
