I have a skin that includes a table. That table has a class that puts a 1px border around the entire table, then each cell has a style applied that also has a 1px border. The combined effect is a 2px grid for the table.

Everything looks ine in IE, but in firefox the 1px border on the cell only shows up if the cell has content in it. This causes problems as the border size changes based on the pages you are viewing.

So the 2 questions I have are....

Is there a better way to create that 2px grid look?
Is there a way, in firefox, to force the style on the cell without placing content in it?

Another way to create this effect is to use only one table and set the cellspacing="1", then wrap that table with a div or a span that has the background color set to the color you want for your gridlines.

<style>
.gridtable { empty-cells: show; }
.gridtable td { background-color:#fff; }
</style>
<div style="background-color:blue;width:150px;">
<table cellspacing="1" cellpadding="1" border="0" class="gridtable" width="150" >
<tr><td>Cell with data</td><td width="50"></td></tr>
<tr><td>Cell with data</td><td></td></tr>
</table>
</div>

The empty-cells:show is a CSS2 reference, but it doesn't make a difference using this method unless you set it to empty-cells:hide because the default is to show.

The main reason why you wouldn't see an empty cell without data is because it would collapse without it, so set a width to make it stay "open".

 

---

The nbsp worked for this existing skin. I will try the other method with my next skin.

Thank you both for your help.