Is there any way to get a border to not add to the total dimensions of a layout? I'm using <th> and <td> to present some tabular information, and I want some instructional text at the top of the table. The border color of <td> is the same as the background color of <th>, so my wish is to enlarge the border of the top <td> (with a colspan to run across the top of the table) so it merges nicely with the content below.

My problem is that if I enlarge the border width, the borders stick out relative to the cells below. I've tried mucking with varying values of margin and padding to no avail. It renders fine in IE but sticks out by half the border width on each side in FF and Safari (which is presumably the standard behavior). Can anyone offer some advice to get things lined up?

I semi-apologize for using tables for layout. Believe me, this is *much* better markup than the previous code I was working with! I've really learned a lot from the books and comments on the site.

Thanks in advance,

Jim Stanley

th {
border-width: 1px 0px 1px 0px;
border-spacing: 2px;
border-style: solid solid solid solid;
border-color: white white white white;
border-collapse: collapse;
background-color: #cce7ff;
font-size: 11px;
font-family: verdana, arial;
td {
border-width: 1px 1px 1px 1px;
border-spacing: 5px;
border-style: solid solid solid solid;
border-color: #cce7ff #cce7ff #cce7ff #cce7ff;
border-collapse: collapse;
background-color: #ffffcc;
font-size: 11px;
font-family: verdana, arial;

<table style="width:95%">
<!-- this sticks out in FF and Safari but not in IE -->
<td colspan=7 style="height:60px;border-width:15px;padding:15px;">
Enter the schedule ID's, separated by the '|' character. Click the Find button to display the various statuses of the schedules.
Charts can only be generated where the status is 'Completing' or higher. Select the check boxes and click on Generate Charts to generate the charts you need.
<th colspan="4" style="height:60px;padding-left:15px;text-align:left;">
<input id="fSchedules" name="fSchedules" type="text" maxlength="500" size="80" /></th>
<th colspan="3" style="text-align:center">
<input type="submit" value="Find" /></th>
<input id="fAction" name="fAction" type="hidden" value="" />
<!-- column titles - the data is provided programmatically -->
<th id='StatusHeader'>Select</th>
<th>Schedule ID</th>
<th>Schedule Type</th>
<th>Voice Status</th>
<th>Email Status</th>
<th>SMS Status</th>