Here's what I'm building: http://muledesign.hoologic.com/heya.html

All CSS is internal to this file. My problem is on IE/Mac: the widths of the two colored vertical edges are different.
It's perfect on Windows: IE6, NN7, and Opera.

If I remove the DIV around the image, the problem goes away.
For a variety of reasons, I need this DIV (I have gutted a bunch of code for clarity).
Even if you just have a plain DIV wrapper around the image (removing the ID attribute),
it messes with the widths of those edges.

[Another minor thing I noticed: on Opera, for #outer, I can't have "right: 2px; bottom: 3px;".
I have to have "left: -2px; top: -3px;". Other browsers don't seem to care. Is this an Opera bug?]

Here's the code:

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=iso-8859-1">
      <style type="text/css">
         body { margin: 0px; padding: 10px; }
         #column { float: left; width: 200px; }
         #box-shadow { background-color: #CCC; }
         #outer { background-color: #E6C88C; border: 1px dashed #960; left: -2px; padding: 9px 4px 4px; position: relative; top: -3px; }
         #image { font-size: 1px; padding-left: 2px; }
         #inner-border { background-color: #E6C88C; border: 1px dashed #960; margin-top: 8px; }
         #inner { background-color: #FFF; padding: 10px; text-align: center; }
      </style>
      <title>MULE &raquo; Off the Hoof &raquo; January 2004 Archives</title>
   </head>
   <body>
      <div id="column">
         <div id="box-shadow">
            <div id="outer">
               <div id="image"><img alt="" height="12" src="/i/mule_recommends_s.gif" width="148"></div>
               <div id="inner-border">
                  <div id="inner">
                     heya
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>