FF Table Centering
I can't get this image to center within the 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.
<table align="center" cellpadding="3" id="headerTable">
<img src="Images/ContactMeHeadShot.png" border="0" alt="Rebecca's Headshot" align="center">
I've also tried this:
The style on the 'header' div looks like this:
<div Style="width:209px; margin-left:auto; margin-right:auto; margin-top:20px;">
<img src="Images/ContactMeHeadShot.png" border="0" alt="Rebecca's Headshot" >
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.
background: url(Images/FlowerPetals.png) #C0B68F no-repeat center;
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?
I changed margin-top: 20px; to padding-top: 20px; and I got the effect I wanted without the use of a table.
You can do this simply, without extraneous divs and tables. I don't know your layout requirements but here's a simple example:
<img src="sample-image.jpg" alt="Sample Image" />
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. :)