SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FF Table Centering

    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?

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Temecula, CA
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed margin-top: 20px; to padding-top: 20px; and I got the effect I wanted without the use of a table.

  3. #3
    SitePoint Member
    Join Date
    Jan 2003
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do this simply, without extraneous divs and tables. I don't know your layout requirements but here's a simple example:

    Code:
    <div id="header">
        <img src="sample-image.jpg" alt="Sample Image" />
    </div>
    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •