FF Table Centering

[cweaver]

I can't get this image to center within the div.

<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:

<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:

#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?

[cweaver]

I changed margin-top: 20px; to padding-top: 20px; and I got the effect I wanted without the use of a table.

[ph23man]

You can do this simply, without extraneous divs and tables. I don't know your layout requirements but here's a simple example:

<div id="header">
    <img src="sample-image.jpg" alt="Sample Image" />
</div>

#header {
    padding-top: 20px;
    text-align: center;
}

This should center the image in the div regardless of the width of the containing div and push the image down 20 pixels. Short, simple, and preserves XHTML compliance.