Did you notice that there is no overlapping when you remove this line in the .css?: letter-spacing: 1pt;
or if you write:
lol - All that does is shorten the length of the words so the scrollbar isn't appearing. 
You get no overlapping if you have your window open wide enough. It's not strange at all and the differences are because you have not controlled everything as shown in my example.
It has nothing to do with the letter-spacing but the simple fact that the words are longer when you add more spacing and therefore the button is longer and you obviously have your window very small or have put the table in a confined space. If you look at the image you sent me you can see that there is a horizontal scrollbar on the body which is forcing the cell to overlap.
There is a bug in IE however and that is it shouldn't collapse the middle cell but tables and floats don't go very well together (who said tables were better for rendering).
If you can't control the widths of the inputs then you can't control the width of the table because IE adds more padding to the left and right of the inputs and increases it proportionately the longer the words get. This cannot be controlled via css and even removing padding has no effect. The only control you have is to apply a width.
As you can't control the width the only other option is to give IE some code instead of the floats and then the cell won't collapse and overlap.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Botones</title>
<style type="text/css">
.ButtonLeft {
float:left;
cursor: hand;
background: url(btnL.gif) no-repeat left top;
padding-left: 7px;
height: 20px;
}
.ButtonRight {
float:left;
cursor: hand;
background: url(btnR.gif) no-repeat right top;
padding-right: 8px;
height: 20px;
}
.ButtonBackground {
float:left;
white-space:nowrap;
cursor: hand;
border: 0 none;
font-family: "Verdana";
font-size: 10px;
font-style: normal;
font-variant: normal;
font-weight: bold;
text-decoration: none;
color: #ffffff;
padding:3px 0;
height: 20px;
background: url(btnC.gif) repeat-x;
cursor: pointer;
letter-spacing: 1px; /*If I uncomment this it works fine*/
text-indent: 0;
}
</style>
<!--[if IE ]>
<style type="text/css">
input,.ButtonLeft,.ButtonRight{display:inline-block;float:none!important}
</style>
<![endif]-->
</head>
<body>
<form action="">
<table id="table3" cellpadding="1" cellspacing="2" border="1" >
<tr>
<td><input type="button" name="button4" title="Enter" value="Enter sin redondear"></td>
<td><div class="ButtonLeft"><span class="ButtonRight">
<input type="button" name="button3" value="Enter con bordes redondos" title="Enter" class="ButtonBackground">
</span></div></td>
<td><input type="button" name="button4" value="Enter sin redondear" title="Enter" ></td>
</tr>
</table>
</form>
</body>
</html>
that with letter-spacing:normal the rendering is different in IE. I tried everything: resizing the browser windows, writing a longer text in the button value. And whatever I do, with letter-spacing:normal the buttons never overlap.
Bookmarks