Hello all!

Usually firefox is perfect and I have to tweak to get IE to behave. Not so today! I would like a 1px border around my layout, like an outlined box. IE is displaying my border perfectly and firefox is displaying only the top. I have played around with padding and widths, but I've got images that need to match up in a certain way. Do I need to have two wrappers? That seems excessive.

Here's my styles, for reference, and thanks for any help!

body {background:#b8c997; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {margin:0 auto; padding:2px; width:800px; height:auto; border: #fff 1px solid;
}

#sidebar {margin:0; padding:0; width:149px; height:auto; float:left;
}

#header {margin:0; padding:0; width:651px; float:right;
}

#main {margin:0; padding:0; width:651px; height:600px; float:right;
}

#footer {margin:0; padding:0; width:800px; height:40px; float:left;
}