SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot center image (existing posts not helping)

    I have an image I want to center on a page using css, just like everyone else. My html code is:

    Code:
     
       <div class='center'>
    	<div class="header_footer">
    	 <table width='630' border='0' cellpadding='0' cellspacing='0'>
    	  <tr>
    	   <td>
    		<img src="images/header_01.jpg" width='625' height='80' alt='me me me' />
    	   </td>
    	   <td>
    		<img src="images/header_02.jpg" width='5' height='80' alt='' />
    	   </td>
    	  </tr>
    	 </table>	 
    	</div>
       </div>
    My relevant css code is:
    Code:
     
    body { background-color: #EFEFEF; }
    html, body {margin: 0; padding: 0; border: 0;}
    body {
    color: #000; 
    font-family: verdana, sans-serif; 
    font-size: 80%; 
    text-align: center;
    margin: 30px 0;
    }
     
    .center { text-align: center; }
    .header_footer {
    background-color: #ffc;	/* header and footer colours */
    width: 100%; 
    border: 2px solid #000;
    font-size: 1.4em;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    }
    In IE, it centers fine. In Moz, it doesn't. Can anyone see why?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes!

    It's because you are centering a 100% div. Obviously 100% is going to take up a 100%. You need to centre the table. (Ie centres it because of its broken interpretation of text:align center)

    change your code to something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    body { background-color: #EFEFEF; }
    html, body {margin: 0; padding: 0; border: 0;}
    body {
    color: #000; 
    font-family: verdana, sans-serif; 
    font-size: 80%; 
    margin: 30px 0;
    }
     
    .header_footer  {
    background-color: #ffc; /* header and footer colours */
    width: 100%; 
    border: 2px solid #000;
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    }
    .header_footer table{
    margin-right:auto;
    margin-left:auto;
    }
    </style>
    </head>
    <body>
    <div class="header_footer">
      <table width='630' border='0' cellpadding='0' cellspacing='0'>
       <tr>
    	<td>
      <img src="<FONT face=Courier>images/header_01.jpg</FONT>" width='625' height='80' alt='me me me' />
    	</td>
    	<td>
      <img src="<FONT face=Courier>images/header_02.jpg</FONT>" width='5' height='80' alt='' />
    	</td>
       </tr>
      </table>  
    </div>
    </body>
    </html>
    Is there any need to use a table for this?? The images would have been centred automatically if they weren't in the table as text-align:center aligns text and images in an element.

    Paul

  3. #3
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunetly that isn't working either. I have the table there because of the header images, which are spliced. just making sure they are aligned correctly.

    Try this link to see what I'm seeing. IE5.5 is ok, but NN6 isn't showing up correctly.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I give you the answer and you ignore it

    What more can I do?
    Code:
    .header_footer table{margin-left: auto;
    margin-right: auto;
    }
    You need to centre the table not the 100% div

    Paul

  5. #5
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man, I'm sorry. I did put that code in, but forgot the table keyword. Sorry about that.

    I changed it to be .header_footer table, but it still doesn't work. Did I miss anything else?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't even see header_footer in your stylesheet now!

    Are you still using the same link above. (I have the version working locally ok from the last time I posted.)

    Paul

  7. #7
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, its still there. They're down at the very bottom.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It is now (it wasn't a minute ago).

    It's centred in Netscape 6.2 and mozilla 1.2 )and IE of course).

    What are you seeing now? Is it not centred in your browers?

    Looks ok to me.

    Paul

  9. #9
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE5.5 it's center, but not in Netscape 6.01/Mozilla5.0.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Are we talking about the images being centred in the header footer div? Or is there another centreing that we are talking about? As I said the images are now centered in ie6,moz 1.2 & 1.4, netscape 6.2, opera 6 and Opera7.

    You can take the 100% width out of header_footer as it is making it too wide for its container (in Mozilla etc 100% + border).

    Paul

  11. #11
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be centered in the header of the block, like so. But to me in NN, it is not.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is a screenshot from Netscape 6.2:
    http://www.pmob.co.uk/temp/images/nn62.gif

    Moz, Opera 6 & 7 are all the same.

    I don't have any lower versions on my system to test. What I suggest you try is to make a test page with just the header,table and images and see if you can get it to centre in your browser. Once you have it centred you can move it back to your page and know that the problem lies somewhere else.

    Sorry I can't be more specific but its working on all the browsers I've got. (although you do have a slight alignment problem as shown in the screenshot).

    Paul

  13. #13
    orange pips! orange pips!
    Join Date
    Oct 2001
    Location
    Its all about location
    Posts
    652
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, looks like I just have an outdated version of netscape then. I'll update and see if it changes anything. Thanx for your help Paul!


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
  •