Could you provide the CSS and the HTML for the table/buttons? And does this behavior occur only in Firefox? Or do other browsers have the same behavior?

Mozilla doesn't appear to have a way to post code directly to a response. Odd, that. I have replaced all open angle brackets with double colon (::) and all close angle brackets with a double tilde (~~). You'll need to switch them back to run the code.

Edit: OK, a double colon has some kind of meaning in Mozilla. There's probably a security hole in the forum because of all this. Let's try replacing the open angle bracket with a double pound sign.

Nope, that appears to be a shortcut to creating an HTML list. Let's see what hapens if I don't replace the open angle brackets.

Nope, that didn't work either, and there's no way to post a file other than an image to this post. Let's try surrounding the entire block pre tags.

Almost there!

This forum doesn't honor the >pre< block. I could use an answer to this question, but I literally can't find a way to post the code that doesn't get interpreted by this website. Even the pre block can't keep all the div blocks in place. Some show as expected, others are interpreted. Hey Mozilla! Your forum could use a bit of work. May I suggest you look at what StakOverflow.com did?

OK, let's try replacing open angle brackets with tilde-dash (~-) and the close angle brackets with dash-tilde (-~).

Eureka!

<script>
function openProfile(evt, profile_name){
  var i;
  var x = document.getElementsByClassName("profile_edit");
  for(i = 0; i < x.length; i++){
    x[i].style.display = "none";
  }
  document.getElementById(profile_name).style.display = "block";

  x = document.getElementsByClassName("profile_tab_cell");
  for(i = 0; i < x.length; i++){
    x[i].className = x[i].className.replace(" profile_tab_cell_active", "");
  }
  evt.currentTarget.parentElement.className += " profile_tab_cell_active";

  x = document.getElementsByClassName("profile_tab_item");
  for(i = 0; i < x.length; i++){
    x[i].className = x[i].className.replace(" profile_tab_active", "");
  }
  evt.currentTarget.className += " profile_tab_active";
}
</script>
<style>
div.profile_container{ font-size : 0; }
div.profile_edit{
  margin : 0;
  padding : 5px;
  background : white;
  border : 1px solid #aaa;
  border-top-width : 0;
  border-right : 2px solid #aaa;
  font-size : 14px;
  font-weight : normal;
}
div.profile_tab_bar{
  margin : 0;
  padding : 0;
}
button.profile_tab_item{
  background : #ddd;
  -webkit-border-radius : 5px 5px 0 0;
  -khtml-border-radius : 5px 5px 0 0;
  behavior: url(border-radius.htc);
  border-radius : 5px 5px 0 0;
  border : 1px solid #aaa;
  border-bottom-width : 0;
  margin : 0;
  margin-right : 1px;
  font-size : 11px;
  font-weight : bold;
}
button.profile_tab_item:hover{
  background : #aaa;
}
td.profile_tab_cell{
  white-space : nowrap;
  width : 1%;
  font-size : 0;
  margin : 0;
  padding : 0;
  border-bottom : 1px solid #aaa;
}
td.profile_cell_bottom_border{
  border-bottom : 1px solid #aaa;
  width : 99%;
}
td.profile_tab_cell_active{ border-bottom : 1px solid white; }
button.profile_tab_active{ background : white; }
input.profile_field_input{
  font-size : 11px;
  border : 0;
  margin : 0;
  padding : 1px;
  padding-left : 7px;
  border-left : 1px solid #eadcce;
  border-bottom : 1px solid #eadcce;
  -webkit-border-radius : 10px;
  -khtml-border-radius : 10px;
  behavior: url(border-radius.htc);
  border-radius : 10px;
}
</style>
<h1>Edit Your Account Profile</h1>

<div class="profile_container"><table cols="5" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
  <td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block1')">Block1</button></td>
  <td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block2')">block2</button></td>
  <td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block3')">block3</button></td>
  <td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block4')">block4</button></td>
  <td class="profile_tab_cell profile_cell_bottom_border"></td>
</tr><tr><td colspan="5">
</div>
<div id="profile_block1" class="profile_edit">
Block #1
</div>
<div id="profile_block2" class="profile_edit" style="display:none;">
Block #2
</div>
<div id="profile_block3" class="profile_edit" style="display:none;">
Block #3
</div>
<div id="profile_block4" class="profile_edit" style="display:none;">
Block #4
</div>
</table></div>

That was a lot of work. OK, no, I haven't tried this in other browsers and yes, I might end up having to chase this problem (or ignore it) with every major browser. Mozilla's CSS rules indicate the border is diagonal, meaning corner pixels overlap. Apparently this is horizontal (top and bottom) first, veritcal (right and left) second, then repeat. What I'm hoping to find is a way to reverse that order such that the corner pixels are filled veritcal (right and left) first, horizontal (top and bottom) second. And I'm hoping to set that either in CSS or Javascript.