|
table { empty-cells: show } doesn't seem to work
hey, quick and easy question. i have a CSS problem whereby Table { empty-cells: show } won't seem to work. any ideas?
here's my code. I bolded the affected parts
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hairy Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function showLinks(n){
var el=document.getElementById(n);
var p=el.parentNode;
for(var i=0;i<p.childNodes.length;i++){//check all of n's siblings (n's parent's childen)
if(p.childNodes[i].style && p.childNodes[i].style.display=='block'){//find who is displaying
p.childNodes[i].style.display='none';
if(p.childNodes[i]==el) return;//remove this line to remove toggling action
break;
}
}
el.style.display='block'
}
</script>
<style type="text/css">
table {
empty-cells: show }
td {
text-align: center }
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width=25%><a href="#" onClick="showLinks('class1');return false">Link 1</a></td>
<td width=25%><a href="#" onClick="showLinks('class2');return false">Link 2</a></td>
<td width=25%>Link 3</td>
<td width=25%>Link 4</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<div id="class1" style="display: none">Link 1.1 | Link 1.2</div>
<div id="class2" style="display: none">Link 2.1 | Link 2.2</div>
<div id="class3" style="display: none"></div>
<div id="class4" style="display: none"></div>
</td> <td> </td>
</tr>
</table>
</body>
</html>
__________________
Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)
|
Before you post, read our: 
