T
tshad
I have a page that has multiple tables in them and I am trying to get my
<th> row to align with my other tables. The problem is that it overlaps on
the left and right side. You can see the green going about 3 pixels on
either side of the lower tables. I tried padding and cellspacing for just
that row, but I couldn't seem to get it right.
The other problem is that I have my tables showing a border, but the I want
the lines to merge top and bottom. Now they are one after the other.
Here is my HTM file which should run as is. Have the same problem on IE and
Mozilla.
********************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font-size:10px;
}
th {
background-color:#2FABAD;
color:white;
text-decoration: none;
border-style:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
..alternateRow {
background-color:linen;
}
</style>
</head>
<body>
<center>
<br>
<table border="0" width="680" style="border-color:#00FFCC;" >
<tr >
<th colspan=9>Current Job Postings</th>
</tr>
<tr>
<td>
<table id="DataList1" cellspacing="0" cellpadding="0" border="0"
style="margin:0">
<tr>
<td>
<table border=1 cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="30">
<input type="image" name="DataList1:_ctl0:ExpandButton"
id="DataList1__ctl0_ExpandButton" src="../images/expand.gif" alt="Click here
to see details" border="0" />
</td>
<td width="100">
<span id="DataList1__ctl0_lblRefCode">1505</span>
</td>
<td width="210">
<span id="DataList1__ctl0_lblJobTitle">Director of Marketing -
Southern CA </span>
</td>
<td width="90">
<span id="DataList1__ctl0_lblDivision">IT</span>
</td>
<td width="100">
<span id="DataList1__ctl0_lblLocation">US-CA-Los Angeles</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblDatePosted">51</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblAccesses">1</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblApplied">0</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblpasses">0</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alternateRow">
<table border=1 cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="30">
<input type="image" name="DataList1:_ctl1:ExpandButton"
id="DataList1__ctl1_ExpandButton" src="../images/expand.gif" alt="Click here
to see details" border="0" />
</td>
<td width="100">
<span id="DataList1__ctl1_lblRefCode">110052-AC</span>
</td>
<td width="210">
<span id="DataList1__ctl1_lblJobTitle">Direct Marketing
Manager</span>
</td>
<td width="90">
<span id="DataList1__ctl1_lblDivision">Management</span>
</td>
<td width="100">
<span id="DataList1__ctl1_lblLocation">US-CA-Valencia</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblDatePosted">52</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblAccesses">1</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblApplied">0</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblpasses">0</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
********************************************************************************
I have a larger css sheet, but I took out the pertinant parts so you could
see what is happening. This actually came from an asp.net page, but I just
viewed the source and took out all the extraneous parts to show the problem.
Thanks,
Tom.
<th> row to align with my other tables. The problem is that it overlaps on
the left and right side. You can see the green going about 3 pixels on
either side of the lower tables. I tried padding and cellspacing for just
that row, but I couldn't seem to get it right.
The other problem is that I have my tables showing a border, but the I want
the lines to merge top and bottom. Now they are one after the other.
Here is my HTM file which should run as is. Have the same problem on IE and
Mozilla.
********************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font-size:10px;
}
th {
background-color:#2FABAD;
color:white;
text-decoration: none;
border-style:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
..alternateRow {
background-color:linen;
}
</style>
</head>
<body>
<center>
<br>
<table border="0" width="680" style="border-color:#00FFCC;" >
<tr >
<th colspan=9>Current Job Postings</th>
</tr>
<tr>
<td>
<table id="DataList1" cellspacing="0" cellpadding="0" border="0"
style="margin:0">
<tr>
<td>
<table border=1 cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="30">
<input type="image" name="DataList1:_ctl0:ExpandButton"
id="DataList1__ctl0_ExpandButton" src="../images/expand.gif" alt="Click here
to see details" border="0" />
</td>
<td width="100">
<span id="DataList1__ctl0_lblRefCode">1505</span>
</td>
<td width="210">
<span id="DataList1__ctl0_lblJobTitle">Director of Marketing -
Southern CA </span>
</td>
<td width="90">
<span id="DataList1__ctl0_lblDivision">IT</span>
</td>
<td width="100">
<span id="DataList1__ctl0_lblLocation">US-CA-Los Angeles</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblDatePosted">51</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblAccesses">1</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblApplied">0</span>
</td>
<td width="30">
<span id="DataList1__ctl0_lblpasses">0</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alternateRow">
<table border=1 cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="30">
<input type="image" name="DataList1:_ctl1:ExpandButton"
id="DataList1__ctl1_ExpandButton" src="../images/expand.gif" alt="Click here
to see details" border="0" />
</td>
<td width="100">
<span id="DataList1__ctl1_lblRefCode">110052-AC</span>
</td>
<td width="210">
<span id="DataList1__ctl1_lblJobTitle">Direct Marketing
Manager</span>
</td>
<td width="90">
<span id="DataList1__ctl1_lblDivision">Management</span>
</td>
<td width="100">
<span id="DataList1__ctl1_lblLocation">US-CA-Valencia</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblDatePosted">52</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblAccesses">1</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblApplied">0</span>
</td>
<td width="30">
<span id="DataList1__ctl1_lblpasses">0</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
********************************************************************************
I have a larger css sheet, but I took out the pertinant parts so you could
see what is happening. This actually came from an asp.net page, but I just
viewed the source and took out all the extraneous parts to show the problem.
Thanks,
Tom.