ColourMod :: Dynamic (DHTML) Color Picker

I’ve run across a perplexing problem with creating borders around input textfields and the way Safari and Firefox display them. Maybe someone can help.

The end product that I’d like to achieve is similar to the contact form on Mint or the input field on CalFeed.com. So essentially, I want to create a custom border around the input field, a little space and then another border. But before you blow me off as stupid the catch is that you cannot use a table to wrap around it. Yes, that is correct, no tables.

Here is a screenshot comparison between Firefox and Safari:

Notice the two pixel difference on the right edge of the input field? That is what I’m trying to eliminate.

I’ve tried a couple different approaches so far, the code for the one that is represented in the image above looks like this:

<div class="inputWrap">
  <input type="text" value="" />
</div>

The style looks like this:

input {
  font-size: 10px;
  width: 150px;
  border: solid 1px #D7D0B4;
  background-color: #FFFFFF;
  margin: 2px;
}
.inputWrap {
  border: solid 1px #ECE8DA;
  width: 156px;
  margin-left: 20px;
}

Unfortunately, all the methods I’ve tried would look fine in Firefox but would be off by only a couple pixels in Safari, and vice versa. I’ve used this technique with images before with great results, but when it comes to input fields it doesn’t work right. Anyone have any clues or solutions?

input {
  font-size: 10px;
  width: 150px;
  border: solid 1px #D7D0B4;
  background-color: #FFFFFF;
}
.inputWrap {
  float: left;
  border: solid 1px #ECE8DA;
  padding: 2px;
}

The key is in the float. For some reason, adding the float lets both browsers render the padding in between the two borders properly. Go figure.