IE Nested table problem

[dmacster]

I hae one main table defined that contains most info - and within that one nested table of five equal columns - the nested table seems to "pop out" to the right beyond the width of the main table in IE 5. Relevant CSS and HTML below.

<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0" id="mainTable">
  <tr> 
    <td colspan="2" id="topBar">SITE MAP</td>
  </tr>
  <tr> 
    <td id="logo"><img src="images/logoTop.jpg" width="260" height="230"></td>
    <td id="rightImage"><img src="images/montage.jpg" width="100%" height="230"></td>
  </tr>
  <tr> 
    <td colspan="2" id="navigate">&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="2" id="nested"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="columnTable">
        <tr> 
          <td id="grayBox">&nbsp;</td>
          <td id="grayBox">&nbsp;</td>
          <td id="grayBox">&nbsp;</td>
          <td id="grayBox">&nbsp;</td>
          <td id="grayBoxLast">&nbsp;</td>
        </tr>
        <tr> 
          <td rowspan="2" id="columnBorder">&nbsp;</td>
          <td rowspan="2" id="columnBorder">&nbsp;</td>
          <td rowspan="2" id="columnBorder">&nbsp;</td>
          <td rowspan="2" id="columnBorder">&nbsp;</td>
          <td id="columnLast">&nbsp;</td>
        </tr>
        <tr> 
          <td id="columnLastBottom">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td colspan="2" id="footer"><img src="images/logoIcon.jpg" width="118" height="50" align="left">BWI 
      BUSINESS PARTNERSHIP, INC. &copy; 2005<br>
      1344 Ashton Road / Suite 101 / Hanover, Maryland 21076<br>
      410.859.1000 / success@bwipartner.org</td>
  </tr>
</table>

and the CSS

body {
	background-color: #FFFFFF;
	margin: 0px;
}
#mainTable {
	width: 95%;
	line-height: 1.5em;
}	
#logo {
	text-align: left;
	vertical-align: top;
	width: 260px;
}
#rightImage {
	text-align: right;
	vertical-align: top;
	width: 100%;
}	
#navigate {
	padding: 0px;
	border-bottom: 6px solid #ffffff;
	border-top: 8px solid #ffffff;
	background-image: url(images/navBack.jpg);
	background-repeat: repeat-x;
}	
#topBar {
	width: 100%;
	background-image: url(images/topMap.jpg);
	background-repeat: repeat-x;
	border-bottom: 2px solid #ffffff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-align: right;
	padding-right: 5px;
}
#nested {
	width: 100%;
	padding: 0px;
}	
#footer {
	text-align: left;
	padding-top: 5px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #333333;
	vertical-align: middle;
}	
#columnTable {
	border: 6px solid #828E9f;
	width: 100%;
	display: block;
}	
#grayBox {
	background-color: #D1D3D4;
	height: 101px;
	border-right: 6px solid #828E9f;
	width: 20%;
}	
#grayBoxLast {
	background-color: #D1D3D4;
	height: 101px;
	width: 20%;
}	
#columnBorder {
	border-right: 6px solid #828E9f;
	width: 20%;
	text-align: left;
	vertical-align: top;
	}
#columnLast {
	width: 20%;
	text-align: left;
	vertical-align: top;
	}
#columnLastBottom {
	border-top: 3px solid #828E9f;
	width: 20%;
	text-align: left;
	vertical-align: top;
	}

Sorry it's so long - I haven't done tables for some time.

Any help/suggestions appreciated.

Thanks,
Donna

 

[dmacster]

Actually, it seems to be just IE for Mac - perhaps I should wonder more about that. Having different browsers and that tested now.

Again, any ideas appreciated.

Thanks,
Dona

 

[dmacster]

Actually, it seems to be just IE for Mac - perhaps I should wonder more about that. Having different browsers and that tested now.

Again, any ideas appreciated.

Thanks,
Donna