Border gone from table?

Question

For some reason, one of the inside borders disappears on my table whenever I change the default height with some CSS.

HTML:

<table class="event">
  <tr>
    <td>Start Date</td>
    <td>2009-6-2</td>
  </tr>
  <tr>
    <td>End Date</td>
    <td>2009-6-8</td>
  </tr>
  <tr>
    <td>Location</td>
    <td>Vail</td>
  </tr>
</table>

CSS:

table.event
{
  border-collapse: collapse;
  border: 1px solid #000;
  width: 33%;
  height: 300px;
}

table.event td
{
  border: 1px solid #000;
  padding: 2px;
}

Here's what it currently looks like

http://img410.imageshack.us/img410/394/whatv.png http://img410.imageshack.us/img410/394/whatv.png

Anybody have any ideas on how I can fix this problem?

Answer 1

If you take your code and put it directly in a blank html page, does it work? I am wondering if there is something outside causing it, perhapes in a different CSS (just guessing).

I pulled this open in FF, Safari, Opera, Chrome, IE6-7 and 8 and could not replicate it.

Even with/without out the border-collapse i get the same results.

Answer 2

Just solved the problem. Jeez, I feel like an idiot. The reason this was happening was because I was "zoomed out" a little bit in Firefox. The scaling got rid of one of the inside borders.

Thanks to all for the help, It was Jason Heine's idea that eventually lead to me figuring it out.

Answer 3

That code works fine for me in firefox and ie7. Are you changing the height with javascript or something else, or just within the editor? However, you could try getting rid of border-collapse.