How to fix table's column empty space in firefox?

Question

This is inline code of a .aspx page:-

<table>
<tr>
 <td>Some static data</td>
 <td>Text box control</td>
 <td><div id="div1"></div></td>
</tr>
</table>

Third <td> has a div 'div1'. This div does not have any data most of time on that page. But sometimes i need to display some dynamic data there). Now problem is, if there is no data in div 'div1', firefox consider it as a space in it and takes approx. 5px space in browser. (But IE8 in compatibility view is fine)

What is the work around here for firefox?

Answer 1

Try setting all margins and padding to 0 at the start of your CSS.

*{
  margin: 0;
  padding: 0;
}

And then you can set those values explicitly where required.

Answer 2

That's because you have a padding applied to the td elements. You could do this: <td style="padding:0"><div id="div1" style="display:none; padding:1px;"></td>

And shift the padding to the div element and the hide it when it is empty. Firefox doesn't apply any padding to it in that case. But, it should still look like other tds when there is data applied to it.

Answer 3

I'd consider if you actually need the div - I guess you are filling it with data in certain circumstances by targetting the ID, by why not just target the table cell instead?

<table>
<tr>
 <td>Some static data</td>
 <td>Text box control</td>
 <td id="div1"></td>
</tr>
</table>

Answer 4

It sounds like you need to reset your styles. There's a couple of good ones out there including Eric Meyer's CSS reset and Yahoo YUI2 CSS reset.