PDA

View Full Version : table borders not showing up in IE


mattrd
1st February 07, 08:24 PM
i have a table with borders defined in the css. looks great in firefox but no borders shows up in IE on the empty cells. what is going on?

here is my CSS

#panel table.list th, #info table.list th {
border: 1px solid #42949C;
background-color: #D8F3F3;
height:21px;
}

#panel table.list td, #info table.list td {
border: 1px solid #D8F3F3;
height:21px;
}


and here is my html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>

</head>

<body>
<div id="panel">
<table cellpadding="3" cellspacing="0" class="list">
<tr>

<th>Client Id</th>
<th>Last Name</th>
<th>First Name</th>
<th>Date of Birth</th>
<th>Soc Sec #</th>
</tr>

<tr>
<td><a href="/participant/goto/9" >9</a></td>
<td>example-b</td>
<td>Mary</td>
<td>1980-01-11</td>
<td>123342453</td>

</tr>
<tr>
<td><a href="/participant/goto/2" >2</a></td>
<td>Participant</td>
<td>Test</td>
<td>1988-01-07</td>
<td>232456767</td>

</tr>
<tr>
<td><a href="/participant/goto/17" >17</a></td>
<td>Sample</td>
<td>Jane</td>
<td>1981-01-01</td>
<td></td>

</tr>
<tr>
<td><a href="/participant/goto/16" >16</a></td>
<td>Sample</td>
<td>Jane</td>
<td>1982-01-01</td>
<td></td>

</tr>
<tr>
<td><a href="/participant/goto/1" >1</a></td>
<td>Sample</td>
<td>Jane</td>
<td>1982-01-01</td>
<td>222334444</td>

</tr>
<tr>
<td><a href="/participant/goto/3" >3</a></td>
<td>sample-a</td>
<td></td>
<td>1988-01-11</td>
<td></td>

</tr>
</table>
</div>
</body>
</html>


any help would be greatly appreciated. thank you.

Oreo
3rd February 07, 08:04 PM
Hi mattrd,

Just add a non-breaking space into your empty cells.

Oreo
4th February 07, 05:03 PM
Eventhough your code will validate strict, adding a non-breaking space to an empty cell isn't the best way to go. There is a cleaner way.

Also, you may have noticed that when you specify the cells borders to 1px, the borders add up and become 2px instead.

This rule not only solves IE problem of not showing empty cells, but only displays once the border cells with the value you specified.

#panel table { border-collapse: collapse; }