I can't get this image to center within the div.
HTML Code:
<div id="header">
        <table align="center" cellpadding="3" id="headerTable">
       <tr> 
           <td align="center">
       	<img src="Images/ContactMeHeadShot.png" border="0" alt="Rebecca's Headshot" align="center">
           </td>
       </tr>
      </table>
     </div>
As you can see, I've tried a number of different things to get it centered, but it still hangs to the left margin.
I've also tried this:
HTML Code:
<div id="header">
    <div Style="width:209px; margin-left:auto; margin-right:auto; margin-top:20px;">
    <img src="Images/ContactMeHeadShot.png" border="0" alt="Rebecca's Headshot" >
    </div>
   </div>
The style on the 'header' div looks like this:
Code:
#header{
  	background: url(Images/FlowerPetals.png) #C0B68F no-repeat center;
  	width:680px;
  	height: 320px;
  	margin-left:auto;
  	margin-right:auto;
  }
The problem that I have in FF with the second method is that the addition of the 'margin-top:20px;' brought the outer 'header' div down 20px relative to its container instead of the inner unnamed div coming down 20px within the header div as it does in IE.

What would you suggest with this? I would like to get the image centered left to right and down about 20px. The table method allowed me to move it down easily by adding a row above it while the div method allowed me to center it. Am I left to combine the two? I think there must be something I'm missing here.

Anyone feel like illuminating?